@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/icons";
@use "@db-ui/foundations/build/styles/helpers";
@use "../../styles/internal/component";
@use "../../styles/internal/db-puls";
@use "../../styles/internal/form-components";

$with-icon-padding-calc: calc(
	#{variables.$db-spacing-fixed-xs} + #{variables.$db-spacing-fixed-sm} +
		#{form-components.$font-size-height}
);


.db-tab-item {
	position: relative;
	display: inline-flex;
	list-style-type: "";
	border-radius: variables.$db-border-radius-sm;

	&:has(input:disabled) {
		opacity: component.$default-disabled;
	}

	label {
		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
		padding: variables.$db-spacing-fixed-xs;
		align-items: center;
		display: inline-block;
		white-space: nowrap;
		border: 0;
		border-radius: variables.$db-border-radius-sm;
		overflow: hidden;
		text-overflow: ellipsis;

		@include helpers.hover {
			&:has(:not(input:disabled)) {
				background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
			}

			&:has(input:disabled) {
				cursor: initial;
			}
		}

		@include helpers.hover {
			&:has(:not(input:disabled)) {
				background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
			}

			&:has(input:disabled) {
				cursor: initial;
			}
		}

		&:has(input:checked) {
			font-weight: 700;
		}

		&[data-icon] {
			padding-inline-start: $with-icon-padding-calc;

			&::before {
				position: absolute;
				transform: translateY(-50%);
				inset-block-start: 50%;
				inset-inline-start: calc(
					0% + #{variables.$db-spacing-fixed-xs}
				);
			}
		}

		&[data-icon-after] {
			padding-inline-end: $with-icon-padding-calc;

			&::after {
				position: absolute;
				transform: translateY(-50%);
				inset-block-start: 50%;
				inset-inline-end: calc(0% + #{variables.$db-spacing-fixed-xs});
			}
		}

		&:is([data-no-text], [data-no-text="true"]) {
			@include icons.is-icon-text-replace();

			padding: 0;
			inline-size: calc(
				#{$with-icon-padding-calc} - #{variables.$db-spacing-fixed-2xs}
			);
			block-size: calc(
				#{form-components.$font-size-height} +
					#{variables.$db-spacing-fixed-xs}
			);

			&::before {
				margin-inline-end: 0;
			}
		}
	}

	input {
		position: absolute;
		appearance: none;
		inline-size: 100%;
		margin-inline-end: initial;
		inset: 0;
		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
		border-radius: variables.$db-border-radius-sm;
		z-index: -1;

		/*
		focus must be set on input:
		- parent label tag may use before AND after for displaying icons
		- placed on li.db-tab-item focus would get cut off partially by by overflow hidden (orientation vertical)
		 */
		&:focus-visible {
			&:is(input[type="radio"]) {
				outline: none;
				box-shadow: none;
			}

			&::before {
				@extend %focus-placeholder;

				content: "";
				position: absolute;
				inset: 0;
				border-radius: variables.$db-border-radius-sm;
				z-index: 10;
				pointer-events: none;
			}
		}
	}
}