@theme {
	--color-tabs-title: light-dark(var(--fui-color-gray-500), var(--fui-color-gray-400));
	--color-tabs-title-h: light-dark(var(--fui-color-gray-900), var(--fui-color-white));
	--color-tabs-title-a: var(--fui-color-primary-600);
	--color-tabs-title-d: light-dark(var(--fui-color-gray-300), var(--fui-color-gray-600));
	--color-tabs-divider: light-dark(var(--fui-color-gray-200), var(--fui-color-gray-700));
}

.fui-tabs-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;

	.fui-tabs-button {
		position: relative;
		/*@apply fui:mb-1;*/
		padding: 0;

		@apply fui:font-sans;
		font-weight: 500;
		letter-spacing: 0.015em;
		@apply fui:text-tabs-title;

		background: none;
		border: none;
		appearance: none;
		cursor: pointer;
		user-select: none;
		/*@apply fui:rounded-tl-lg;*/
		@apply fui:rounded-lg;

		@apply fui:outline-focus-prepear;
		transition-property: color;
		transition-duration: var(--fui-transition-duration-default);

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			height: 1px;
			background-color: transparent;
			transition-property: background-color;
			transition-duration: var(--fui-transition-duration-default);
		}

		&:hover:not(:disabled,.is-active) {
			@apply fui:text-tabs-title-h;
		}

		&:focus-visible {
			@apply fui:outline-focus;
		}

		&:disabled {
			@apply fui:text-tabs-title-d;
			cursor: not-allowed;
		}

		&.is-active {
			@apply fui:text-tabs-title-a;

			&::after {
				@apply fui:bg-tabs-title-a;
			}
		}
	}
}

.fui-tabs-size-s {
	@apply fui:gap-6;

	.fui-tabs-button {
		@apply fui:p-1.5;
		@apply fui:-mx-1.5;
		@apply fui:text-xs;

		&::after {
			@apply fui:left-1.5;
			@apply fui:right-1.5;
		}
	}
}

.fui-tabs-size-m {
	@apply fui:gap-8;

	.fui-tabs-button {
		@apply fui:p-2;
		@apply fui:-mx-2;
		@apply fui:text-sm;

		&::after {
			@apply fui:left-2;
			@apply fui:right-2;
		}
	}
}

.fui-tabs-divider {
	margin: 0;
	@apply fui:mb-4;
	margin-top: -1px;
	border: none;
	border-bottom: 1px solid;
	@apply fui:border-tabs-divider;
}