@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/breakpoints' as break;
@use '../../base/mixins/typography' as font;
@use '../../base/mixins/accessibility' as a11y;
@use '../../base/functions' as *;

.tabs {
	max-width: max-content;
	width: 100%;
	margin: 0 auto var(--spacing-small) auto;
	padding: var(--padding-extra-small);
	display: flex;
	gap: var(--padding-medium);
	border-radius: var(--radius-small);
	border-width: 1px;
	border-style: solid;
	cursor: default;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	border-color: with-opacity(var(--ui-subtle), 30);

	&-body {
		display: flex;
		min-height: var(--spacing-huge);
	}

	&-slim {
		padding: var(--padding-slim);
		gap: var(--padding-slim);
		background-color: var(--color-dark-grey);
		border: 0.0625rem solid with-opacity(var(--neutral-6), 30);

		.tab-label-content {
			display: inline-flex;
			align-items: center;
			gap: var(--padding-extra-small);
		}

		.tab-tag {
			@include font.get-typography(body-small);

			background-color: var(--color-violet);
			color: var(--neutral-6);
			border-radius: var(--radius-small);
			padding: 0 var(--padding-extra-small);
		}

		.tab .tab-label {
			@include font.get-typography(body-lead);
		}
	}

	.tab {
		border: 0.0625rem solid transparent;
		border-radius: var(--radius-extra-small);
		cursor: pointer;
		display: flex;
		flex-direction: column;
		gap: var(--padding-extra-small);
		align-items: center;
		justify-content: center;
		min-width: max-content;
		outline: transparent solid 0.1875rem;
		padding: var(--padding-extra-small) var(--padding-small);
		text-align: center;
		transition:
			color var(--transition-fast),
			background-color var(--transition-fast);
		user-select: none;
		-webkit-text-stroke: 0.06ex transparent;
		font-weight: 700;
		scroll-snap-align: center;

		&-label {
			@include font.get-typography(body-lead-bold);

			color: var(--action);
		}

		&-subtext {
			@include font.get-typography(body);

			color: var(--ui-body);
		}

		&:hover {
			background-color: with-opacity(var(--action), 10);
		}

		&.active {
			pointer-events: none;
			background-color: var(--action);
			border-color: var(--neutral-6);

			.tab-label,
			.tab-subtext {
				color: var(--action-contrast);
			}
		}

		&:focus {
			outline: var(--action-outline) solid 0.1875rem;
		}
	}
}

.hide-tab {
	display: none;
}

.slide-in-left {
	@include break.min-tablet {
		animation-name: slide-in-left;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		overflow-x: hidden;
	}

	@include a11y.reduced-motion {
		animation: none;
	}
}

.slide-in-right {
	@include break.min-tablet {
		animation-name: slide-in-right;
		animation-duration: 1s;
		animation-fill-mode: forwards;
	}

	@include a11y.reduced-motion {
		animation: none;
	}
}

@keyframes slide-in-left {
	0% {
		transform: translateX(-5rem);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slide-in-right {
	0% {
		transform: translateX(5rem);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}