@use '../../tokens/index.scss' as tokens;
@use '../../mixins/index.scss' as mixins;

$input-color: tokens.$text !default;
$input-background-color: tokens.$body-background !default;
$input-border-color: tokens.$control-border !default;
$input-border-bottom-color: tokens.$control-border-bottom !default;
$input-placeholder-color: tokens.$text-subtle !default;

$input-hover-color: tokens.$text !default;
$input-hover-border-color: tokens.$default-hover !default;
$input-focus-border-color: tokens.$primary !default;

$input-disabled-color: tokens.$text-subtle !default;
$input-disabled-background-color: tokens.$body-background-medium !default;
$input-disabled-border-color: tokens.$table-border-dark !default;

$input-danger-border-color: tokens.$danger !default;
$input-success-border-color: tokens.$success !default;

$input-focus-box-shadow-size: 0 0.0625rem 0 0 !default;

$input-icon-size: 2.25em !default;
$input-icon-color: tokens.$text-subtle !default;

.input {
	@include mixins.control;

	width: 100%;
	max-width: 100%;
	border-color: $input-border-color;
	border-block-end-color: $input-border-bottom-color;
	background-color: $input-background-color;
	color: $input-color !important;

	&::placeholder {
		color: $input-placeholder-color;
	}

	&:hover {
		border-color: $input-hover-border-color;
		border-block-end-color: $input-border-bottom-color;
	}

	&[disabled] {
		border-color: $input-disabled-border-color;
		background-color: $input-disabled-background-color;
		color: $input-disabled-color;
	}

	@include mixins.focus-visible {
		@extend %focus;

		border-block-end-color: $input-focus-border-color;
		outline-color: transparent;
		outline-offset: 0;
		outline-style: solid;
		box-shadow: $input-focus-box-shadow-size $input-focus-border-color;
	}

	&.input-sm {
		@include mixins.control-sm;
	}

	&.input-lg {
		@include mixins.control-lg;
	}

	&.input-danger {
		border-color: $input-danger-border-color;

		@include mixins.focus-visible() {
			border-color: $input-border-color;
			border-block-end-color: $input-danger-border-color;
			box-shadow: $input-focus-box-shadow-size $input-danger-border-color;
		}
	}

	&.input-success {
		border-color: $input-success-border-color;

		@include mixins.focus-visible() {
			border-color: $input-border-color;
			border-block-end-color: $input-success-border-color;
			box-shadow: $input-focus-box-shadow-size $input-success-border-color;
		}
	}

	&.input-icon-right {
		padding-inline-end: $input-icon-size;

		~ .icon {
			inset-inline-start: unset !important;
			inset-inline-end: 0;
		}

		.input[type='date'] {
			position: relative;

			&::-webkit-calendar-picker-indicator {
				position: absolute;
				width: 1.5em;
				background: none;
				color: transparent;
				inset-inline-end: 0;
				z-index: tokens.$zindex-dropdown;
			}
		}
	}

	&.input-icon,
	&.input-icon-right {
		padding-inline-start: $input-icon-size;

		&.input-icon-right {
			padding-inline-start: mixins.$control-padding-horizontal;
		}

		+ .icon {
			@include mixins.fill-current-color();

			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			width: $input-icon-size;
			height: 100%;
			color: $input-icon-color;
			pointer-events: none;
			z-index: tokens.$zindex-multi;
		}

		&.input-sm {
			~ .icon svg {
				width: 0.875em;
				height: 0.875em;
			}
		}

		&.input-lg {
			~ .icon svg {
				width: 1.125em;
				height: 1.125em;
			}
		}
	}
}