@use "sass:map";
@use "@db-ui/foundations/build/styles/animation";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/icons";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/colors";
@use "../../styles/internal/button-components";
@use "../../styles/internal/tag-components";
@use "../../styles/internal/icon-passing";
@use "../../styles/internal/component";

%no-text {
	&[data-no-text="true"] {
		--icon-margin-after: 0;

		@include icons.is-icon-text-replace();

		padding: 0;

		label {
			@include icons.is-icon-text-replace();
		}
	}

	&:not([data-no-text="true"]) {
		--db-padding-inline-start: #{variables.$db-spacing-fixed-2xs};

		/* stylelint-disable-next-line db-ui/use-spacings */
		padding-inline: var(--db-padding-inline-start)
			#{variables.$db-spacing-fixed-2xs};

		&:has(.db-tab-remove-button) {
			padding-inline-end: 0;
		}

		&:has(dbbutton):has(dbbutton:not(.db-tab-remove-button)),
		&:has(db-button):has(db-button:not(.db-tab-remove-button)),
		&:not(:has(dbbutton)):has(button:not(.db-tab-remove-button)),
		&:has(a),
		&:has(label) {
			padding-inline: 0;
		}
	}
}

%db-tag {
	--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};

	@extend %default-interactive-component;
	@extend %db-overwrite-font-size-sm;
	@extend %default-button;
	@extend %no-text;

	padding-block: 0;
	block-size: variables.$db-sizing-sm;
	min-inline-size: variables.$db-sizing-sm;
	inline-size: fit-content;
	position: relative;

	&:not(:has(#{tag-components.$interactive-selectors})),
	&:has(.db-tab-remove-button) {
		@extend %component-border;

		@include tag-components.get-tag-colors();
	}

	&:has(#{tag-components.$interactive-selectors}) {
		@include icon-passing.icon-passing(variables.$db-spacing-fixed-2xs);
		@include tag-components.get-tag-colors-interactive();
	}

	button:nth-of-type(2),
	dbbutton:nth-of-type(2),
	&:has(db-button):has(dbbutton) .db-tab-remove-button {
		display: none;
	}

	> :is(
			[class="db-checkbox"],
			[class="db-radio"],
			[class="db-link"],
			[class="db-button"]
		) {
		block-size: 100%;
	}
}

.db-tag {
	@extend %db-tag;

	position: relative;

	label {
		@extend %default-transition;

		inline-size: 100%;
		margin-inline-start: 0;
		display: flex;
		align-items: center;

		@media (forced-colors: active) {
			&:not(:has(input:checked)) {
				border-style: dashed;
			}
		}

		&:has(input:checked) {
			border-width: variables.$db-border-height-3xs;

			&::before {
				content: none;
			}
		}

		// Handle native radio and checkbox input elements, especially regarding focus-visible indicator
		input {
			appearance: none;
			inline-size: 100%;
			block-size: 100%;
			position: absolute;
			margin-inline-end: initial;
			border: 0;
			border-radius: inherit;
			cursor: pointer;
			inset: 0;
			aspect-ratio: unset;

			&:checked {
				&,
				&:not(:disabled):is(:hover, :focus, :active) {
					background-color: colors.$db-brand-bg-basic-transparent-full-default;
				}

				&:not([data-hide-icon-before="true"]) {
					&::before {
						content: none;
					}
				}
			}
		}
	}

	a {
		@extend %default-transition;

		display: inline-flex;
		align-items: center;
		text-decoration: none;

		&::after {
			--db-icon-margin-start: 0;
			--db-icon-font-size: 0;

			content: none !important;
		}
	}

	.db-link {
		&:is(:hover, :focus, :active) {
			color: inherit;
		}
	}

	&:not(:has(dbbutton, db-button)):has(button:not(.db-tab-remove-button)),
	&:has(:is(dbbutton, db-button):not(.db-tab-remove-button), a, label) {
		border: 0;
	}

	button,
	a,
	label {
		@extend %db-overwrite-font-size-sm;
		@extend %component-border;

		block-size: inherit;
		padding: 0 variables.$db-spacing-fixed-2xs;
		border-radius: variables.$db-border-radius-xs;
		font-weight: 700;
		appearance: none;
	}

	db-button,
	dbbutton,
	db-checkbox,
	dbcheckbox,
	db-radio,
	dbradio,
	db-link,
	dblink {
		// angular workaround
		block-size: inherit;
	}

	&:has(:disabled),
	&[data-disabled="true"] {
		opacity: component.$default-disabled;
		pointer-events: none;
	}

	&[data-overflow="true"] {
		max-inline-size: variables.$db-sizing-2xl;

		> * {
			inline-size: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.db-tab-remove-button {
		&:is(button),
		button {
			// overwrite to transparent
			background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
			margin-inline-start: variables.$db-spacing-fixed-2xs;
			border: 0;
			aspect-ratio: 1 / 1;
		}
	}
}