@use "sass:map";
@use "component";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/helpers";

$interactive-selectors: "label, button:not(.db-tab-remove-button), a";

%set-adaptive-strong-tag {
	--db-adaptive-on-bg-basic-emphasis-60-default: #{colors.$db-adaptive-bg-inverted-contrast-high-default};

	@include colors.set-current-colors(
		colors.$db-adaptive-bg-inverted-contrast-high-default,
		colors.$db-adaptive-on-bg-inverted-default
	);
}

@mixin get-tag-colors() {
	background-color: colors.$db-adaptive-bg-basic-level-3-default;

	&[data-emphasis="strong"] {
		@extend %set-adaptive-strong-tag;
	}

	@each $name in colors.$variant-colors {
		&[data-semantic="#{$name}"] {
			@extend %db-#{$name}-bg-basic-level-3;

			&[data-emphasis="strong"] {
				--db-adaptive-on-bg-basic-emphasis-60-default: var(
					--db-#{$name}-bg-inverted-contrast-high-default
				);

				@include colors.set-current-colors(
					var(--db-#{$name}-bg-inverted-contrast-high-default),
					var(--db-#{$name}-on-bg-inverted-default)
				);
			}
		}
	}
}

// get button and link tags
@mixin get-interactive-selectors() {
	&:not(:has(dbbutton)) button:not(.db-tab-remove-button),
	dbbutton:not(.db-tab-remove-button) > button,
	db-button > button,
	a {
		@content;
	}
}

%set-interactive-strong {
	@extend %set-adaptive-strong-tag;

	@include helpers.hover {
		background-color: colors.$db-adaptive-bg-inverted-contrast-high-hovered;
		// TODO: will be changed in the future tag refactoring
		/* stylelint-disable-next-line db-ui/use-border-color */
		border-color: colors.$db-adaptive-bg-inverted-contrast-high-hovered;
	}

	@include helpers.active {
		background-color: colors.$db-adaptive-bg-inverted-contrast-high-pressed;
		// TODO: will be changed in the future tag refactoring
		/* stylelint-disable-next-line db-ui/use-border-color */
		border-color: colors.$db-adaptive-bg-inverted-contrast-high-pressed;
	}
}

@mixin revert-db-components() {
	input:checked {
		background-color: transparent;

		@include helpers.hover {
			background-color: transparent;
		}

		@include helpers.active {
			background-color: transparent;
		}
	}

	a {
		color: currentcolor;

		@include helpers.hover {
			color: currentcolor;
		}

		@include helpers.active {
			color: currentcolor;
		}
	}
}

@mixin get-tag-colors-interactive() {
	@include revert-db-components;

	// overwrite current variables for semantic color
	@each $name in colors.$variant-colors {
		&[data-semantic="#{$name}"] {
			@extend %db-#{$name}-variables;
		}
	}

	label:has(input) {
		background-color: colors.$db-adaptive-bg-basic-level-1-default;

		@include helpers.hover {
			background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
		}

		@include helpers.active {
			background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
		}
	}

	&:not([data-emphasis]),
	&[data-emphasis="weak"] {
		// buttons and links should have bg-basic-level-2
		@include get-interactive-selectors() {
			background-color: colors.$db-adaptive-bg-basic-level-3-default;

			@include helpers.hover {
				background-color: colors.$db-adaptive-bg-basic-level-3-hovered;
			}

			@include helpers.active {
				background-color: colors.$db-adaptive-bg-basic-level-3-pressed;
			}
		}

		// checkbox should have bg-basic-level-3 (checked)
		label:has(input[type="checkbox"]:checked) {
			background-color: colors.$db-adaptive-bg-basic-level-3-default;

			@include helpers.hover {
				background-color: colors.$db-adaptive-bg-basic-level-3-hovered;
			}

			@include helpers.active {
				background-color: colors.$db-adaptive-bg-basic-level-3-pressed;
			}
		}

		// radio should have bg-basic-level-3 (checked) without hover/pressed
		label:has(input[type="radio"]:checked) {
			&,
			&:is(:hover, :focus, :active) {
				background-color: colors.$db-adaptive-bg-basic-level-3-default;
			}
		}
	}

	&[data-emphasis="strong"] {
		@include get-interactive-selectors() {
			@extend %set-interactive-strong;
		}

		label:has(input[type="radio"]:checked) {
			@extend %set-adaptive-strong-tag;

			/* Revert this for checked radio button (it's not clickable again) */
			@include helpers.hover {
				background-color: colors.$db-adaptive-bg-inverted-contrast-high-default;
			}

			@include helpers.active {
				cursor: default;
				background-color: colors.$db-adaptive-bg-inverted-contrast-high-default;
			}
		}

		label:has(input[type="checkbox"]:checked) {
			@extend %set-interactive-strong;
		}

		&:has(a),
		&:has(input:checked) {
			@extend %set-adaptive-strong-tag;
		}
	}
}