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

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

.db-input {
	@include form-components.set-default-form-component(input);

	// padding-inline-end according to current amount of icons
	&[data-icon],
	&:has(input[type="search"]) {
		--db-form-component-padding-inline-start: #{$icon-padding};
	}

	&[data-icon-after],
	&:has(input[type="search"]),
	&:has(datalist) {
		--db-form-component-padding-inline-end: #{$icon-padding};
	}

	&[data-hide-label="true"] {
		--db-label-visible-height: 0;
		--db-label-visible-spacing: 1;
	}

	&:has(input[type="search"]) {
		@include icons.set-icon("magnifying_glass");
		@include icons.set-icon("cross_circle", "after");

		&::after {
			opacity: 0;

			@media screen and (prefers-reduced-motion: no-preference) {
				transition: opacity variables.$db-transition-duration-fast;
			}
		}

		&:has(input:not(:placeholder-shown)):has(
				input:hover,
				input:focus-visible
			) {
			&::after {
				opacity: 1;
			}
		}
	}

	&:has(input[type="date"]),
	&:has(input[type="week"]),
	&:has(input[type="datetime-local"]),
	&:has(input[type="month"]) {
		@include icons.set-icon("calendar", "after");
	}

	&:has(input[type="time"]) {
		@include icons.set-icon("clock", "after");
	}

	&:has(input[type="file"]) {
		input {
			@extend %db-overwrite-font-size-sm;

			padding-block-start: variables.$db-spacing-fixed-xs;
		}

		&[data-variant="floating"] {
			input {
				@extend %db-overwrite-font-size-xs;

				padding-block-start: calc(
					#{variables.$db-spacing-fixed-md} +
						#{variables.$db-spacing-fixed-3xs}
				);

				&::file-selector-button {
					@extend %db-overwrite-font-size-xs;

					block-size: variables.$db-sizing-xs;
					padding: 0 variables.$db-spacing-fixed-xs;
					margin-inline-end: variables.$db-spacing-fixed-xs;
				}
			}
		}
	}

	input {
		position: relative;

		&::-webkit-calendar-picker-indicator,
		&::-webkit-search-cancel-button {
			background-image: none;
			inline-size: icons.$default-icon-font-size;
			block-size: icons.$default-icon-font-size;
			padding: 0;
			cursor: pointer;
		}

		&::-webkit-search-cancel-button {
			appearance: none;
			position: absolute;
			inset-inline-end: calc(
				#{variables.$db-spacing-fixed-sm} +
					#{variables.$db-border-height-3xs}
			);
		}

		&::file-selector-button {
			@extend %default-interactive-component;
			@extend %default-button;
			@extend %db-overwrite-font-size-sm;

			color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
			block-size: variables.$db-sizing-sm;
			padding: variables.$db-spacing-fixed-3xs
				variables.$db-spacing-fixed-sm;
			margin-inline-end: variables.$db-spacing-fixed-sm;

			&:hover,
			&:focus {
				background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
			}

			&:active {
				background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
			}
		}
	}

	&:has(datalist) {
		@extend %dropdown-icon;

		input {
			&::-webkit-calendar-picker-indicator {
				display: none !important;
			}
		}
	}
}