@import '../../../scss/index.scss';

// Выбор даты
@mixin datepicker () {
	@include flex-row-auto();

	// Фикс
	&,
	& * {
		@include fix();
	}

	.datepicker {
		@include flex-row-max();
		position: relative;
		overflow: hidden;
		height: 32px;
	}

	.input {
		@include flex-row-max();
		padding-left: 9px;
		padding-right: 9px + 12px + 8px + 8px;
	}
	.input:hover + .toggle {
		border: 1px solid $color-border-hover;
		border-left: none;
		& > .toggle__line {
			border-left: solid 1px $border-hover;
		}
	}
	.input:focus + .toggle {
		border: 1px solid $color-border-focus;
		border-left: none;
		& > .toggle__line {
			border-left: solid 1px $border-focus;
		}
	}

	.input[disabled],
	.input[readonly] {
		&,
		&:hover,
		&:focus {
			& + .toggle {
				background: $toggle-bg;
				border: 1px solid $color-border-disabled;
				border-left: none;
				cursor: default;
				& > .toggle__line {
					border-left: solid 1px $border-disabled;
				}
				& > .toggle__icon {
					fill: $icon-fill-disabled;
				}
			}
		}
	}

	// Поле с ошибкой
	&[has-error="true"] {
		.input {
			border: 1px solid $color-border-error;
		}
		.input + .toggle {
			border: 1px solid $color-border-error;
			border-left: none;
		}
		.input + .toggle > .toggle__line {
			border-left: solid 1px $border-error;
		}
		.input + .toggle > .toggle__icon {
			fill: $icon-fill-error;
		}
	}

	.toggle {
		@include flex-row-auto();
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 32px;
		cursor: pointer;
		background: $toggle-bg;
		border: 1px solid $color-border;
		border-left: none;
		border-radius: 0 3px 3px 0;
		transition:
			border 0.2s ease,
			background 0.2s ease;
		&:hover {
			background: $toggle-bg-hover;
		}
	}
	.toggle__line {
		position: absolute;
		top: 6px;
		bottom: 6px;
		left: 0px;
		transition: border 200ms ease;
		border-left: solid 1px $border;
	}
	.toggle__icon {
		width: 32px;
		height: 32px;
		margin: auto;
		pointer-events: none;
		fill: $icon-fill;
		background-color: $bg;
	}
}