@use "@gloria/a11y/_mixins.scss" as *;

.c-tabs {
	margin-block: var(--spacing-6);

	&__list {
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
		border-bottom: 1px solid var(--color-gray-500);
		white-space: nowrap;

		&--center {
			justify-content: center;
		}

		&--right {
			justify-content: flex-end;
		}
	}

	&__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--spacing-1-5);
		position: relative;
		padding: var(--spacing-2) var(--spacing-4);
		font-family: var(--font-family-text);
		font-size: var(--font-size-base);
		font-weight: var(--font-weight-semibold);
		line-height: var(--line-height-xs);
		color: var(--color-text-secondary);
		transition:
			border-color var(--duration-ultra-fast) var(--smoothstep),
			box-shadow var(--duration-ultra-fast) var(--smoothstep),
			color var(--duration-fast) var(--cbuc-quad-out),
			background-color var(--duration-fast) var (--cbuc-quad-out);

		@include a11y-keyboard-focus-ring(false);

		&:hover {
			background-color: var(--color-primary-100);
			color: var(--color-primary);
		}

		&:active {
			background-color: var(--color-primary-200);
			color: var(--color-primary);
		}

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2px;
			background-color: transparent;
			transition: background-color var(--duration-ultra-fast) var(--smoothstep);
		}

		&[aria-selected="true"] {
			color: var(--color-primary-500);

			&::after {
				background-color: var(--color-primary-500);
			}
		}
	}

	&__panel {
		@include a11y-keyboard-focus-ring;

		&.is-spaced {
			padding-top: var(--spacing-6);
		}
	}
}
