@import '@resources/index.css';

.supt-section-tabs {
	position: relative;
	background-color: $color-interface-grey-20;

	&__inner {
		@extend %grid;

		grid-template-rows: auto 1fr; /* 2nd row should take remaining height/space */
	}

	&__headline {
		grid-column: 1 / span 12;

		@media (min-width: $sm-breakpoint) {
			grid-column: 2 / span 10;
		}
		@media (min-width: $md-breakpoint) {
			grid-column: 3 / span 8;
		}

		.supt-section__title {
			margin-bottom: 0;
		}
	}

	&__content-wrapper {
		@mixin clamp margin-top, 28, 56, $xxs-breakpoint, $lg-breakpoint;
		grid-column: 1 / span 12;

		@media (min-width: $ml-breakpoint) {
			grid-column: 2 / span 10;
		}

		/* Overrides javascript height for sticky display */
		@media (max-width: calc($xxs-breakpoint - 1px)) {
			height: auto !important;
		}
	}

	&__content {
		display: flex;
		flex-direction: column;
		position: relative;

		@media (min-width: $xxs-breakpoint) {
			position: sticky;
			top: 10vh;
		}
		@media (min-width: $md-breakpoint) {
			top: 15vh;
		}
		@media (min-width: $ml-breakpoint) {
			top: 20vh;
		}
	}

	&__nav {
		position: relative;
		align-items: stretch;
		flex-wrap: wrap;
		gap: 8px 12px;
		padding-bottom: 8px;
		overflow: hidden;

		display: none;

		@media (min-width: $xxs-breakpoint) {
			display: flex;
		}

		&__button-wrapper {
			position: relative;
			width: 47%;
			flex-grow: 1;

			@media (min-width: $sm-breakpoint) {
				width: 30%;
			}
			@media (min-width: $md-breakpoint) {
				width: 17%;
			}

			&::after {
				content: '';
				position: absolute;
				inset: 0;
				border-radius: 16px;
				background-color: #f7f7f7;
				z-index: -1;

				transition: transform $transition-mid ease-in-out;
			}

			/* Modifier */
			&.-is-active {
				.supt-section-tabs__nav__button {
					color: $color-interface-grey-100;
					background-color: $color-white;
				}
			}
		}

		&__button {
			@extend %reset-button, %t-s;
			color: $color-interface-grey-80;

			display: block;
			width: 100%;
			height: 100%;
			border-radius: 16px;
			background-color: transparent;

			position: relative;
			z-index: 1;

			transition:
				transform $transition-mid ease-in-out,
				color $transition-mid,
				background-color $transition-fast;

			@mixin desktop-only {
				&:hover {
					background-color: $color-white;
				}
			}
			&:focus-visible {
				box-shadow: inset 0 0 0 1.5px $color-interface-grey-100;
			}
		}

		&__button-inner {
			display: block;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding: 14px 16px;
		}

		&__marker {
			position: absolute;
			top: 0;
			left: 0;
			bottom: -4px;
			width: var(--supt-tab-button-width, 200px);

			color: $color-white;
			background-color: $color-white;
			border-radius: 24px;

			transform: translateX(calc(var(--supt-tab-button-translate, 20px)));
			transition:
				transform $transition-mid ease-in-out,
				width $transition-mid ease-in-out;
			pointer-events: none;

			z-index: 0;

			display: none;
		}
		&__shape {
			position: absolute;
			top: 0;
			display: block;

			&.-left {
				right: calc(100% - 20px);
			}
			&.-right {
				left: calc(100% - 20px);
			}
		}
	}

	&__tabs {
		position: relative;
	}

	.supt-tab {
		margin-bottom: 20px;
		@media (min-width: $xxs-breakpoint) {
			margin-bottom: 0;
			opacity: 0;
			pointer-events: none;
			transition: opacity $transition-slow ease-in-out;
		}

		&__title,
		&__text {
			@media (min-width: $xxs-breakpoint) {
				transform: translateY(20px);
				transition: transform $transition-mid ease-in-out;
			}
		}

		&__title {
			transition-delay: 0.1s;
		}

		&:not(:first-child) {
			@media (min-width: $xxs-breakpoint) {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
			}
		}
	}

	/* Modifiers */
	&.-is-desktop-nav {
		.supt-section-tabs__nav {
			column-gap: 4px;
			padding-bottom: 4px;
			border-top-left-radius: 24px;
			flex-wrap: nowrap;

			&__button-wrapper {
				width: auto;
				flex-grow: 0;

				&::after {
					border-radius: 24px;
				}

				/* Modifier */
				&.-is-active {
					.supt-section-tabs__nav__button {
						background-color: transparent;
					}

					/* 20px being the width of the left/right shapes of the marker */
					&::after,
					.supt-section-tabs__nav__button {
						transform: translateX(20px);
					}

					~ .supt-section-tabs__nav__button-wrapper {
						&::after,
						.supt-section-tabs__nav__button {
							transform: translateX(calc(20px * 2));
						}
					}

					&:first-child {
						&::after,
						.supt-section-tabs__nav__button {
							transform: translateX(0px);
						}

						~ .supt-section-tabs__nav__button-wrapper {
							&::after,
							.supt-section-tabs__nav__button {
								transform: translateX(20px);
							}
						}
					}
				}
			}

			&__button {
				border-radius: 24px;
			}

			&__button-inner {
				min-width: 200px;
				padding: 24px 32px;
			}

			&__marker {
				display: block;
			}
		}

		.supt-tab {
			&:first-child {
				.supt-tab__inner {
					border-top-left-radius: 0 !important;
				}
			}
		}
	}

	&[data-current-tab='0'] .supt-tab:nth-child(1),
	&[data-current-tab='1'] .supt-tab:nth-child(2),
	&[data-current-tab='2'] .supt-tab:nth-child(3),
	&[data-current-tab='3'] .supt-tab:nth-child(4),
	&[data-current-tab='4'] .supt-tab:nth-child(5),
	&[data-current-tab='5'] .supt-tab:nth-child(6) {
		opacity: 1;
		pointer-events: auto;

		.supt-tab__title,
		.supt-tab__text {
			transform: translateY(0px);
			transition-duration: $transition-slow;
		}
		.supt-tab__title {
			transition-delay: 0s;
		}
		.supt-tab__text {
			transition-delay: 0.1s;
		}
	}
}