@import '@resources/index.css';

.supt-categories {
	@mixin clamp margin-bottom, 32, 48, $xs-breakpoint, $lg-breakpoint;

	position: relative;
	z-index: 2;

	scroll-margin-top: 100px;

	&__list {
		display: flex;
		list-style: none;

		flex-wrap: wrap;
		align-items: center;
		gap: 16px;

		@media (max-width: calc($sm-breakpoint - 1px)) {
			gap: 0;
			align-items: flex-start;
			flex-direction: column;
			border-radius: 10px;
			background-color: $color-interface-grey-20;
			padding: 8px 0;
			margin-top: 8px;
			position: absolute;
			left: 0;
			right: 0;
			top: 100%;

			opacity: 0;
			pointer-events: none;
			transform: translateY(-10px);

			transition:
				opacity 0.3s,
				transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
		}

		/* Button for mobile dropdown only */
		.supt-button-link {
			width: 100%;
			padding: 10px 16px;

			&:not(.-is-current) {
				font-weight: 300;
			}
		}
	}

	&__dropdown-button {
		width: 100%;
		margin: 0;

		@media (min-width: $sm-breakpoint) {
			display: none;
		}
	}

	&.-is-opened {
		.supt-categories__dropdown-button {
			.supt-button__icon svg {
				transform: rotate(180deg);
			}
		}
		.supt-categories__list {
			opacity: 1;
			pointer-events: auto;
			transform: translateY(0);
		}
	}
}