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

// Селектор
@mixin power-select () {
	@include flex-row-auto();
	position: relative;
	overflow: hidden;
	height: 32px;

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

	.input {
		@include flex-row-max();
		@include reset-input();
		@include font-family();
		@include placeholder($color-placeholder);
		height: 32px;
		padding-left: 9px;
		padding-right: 9px + 12px + 8px;
		line-height: 18px;
		font-size: 14px;
		border-radius: 3px;
		border: 1px solid $color-border;
		background-color: $color-bg;
		color: $color;
		transition:
			background 200ms ease,
			color 200ms ease,
			border 200ms ease;

		&:hover {
			border: 1px solid $color-border-hover;
		}
		&:focus {
			border: 1px solid $color-border-focus;
		}

		// Поле отключено / только для чтения
		&[disabled] {
			&,
			&:hover,
			&:focus {
				@include placeholder(rgba($color-disabled, 0.5));
				background: $color-bg-disabled;
				border: 1px solid $color-border-disabled;
				color: $color-disabled;
			}
		}
	}

	.icon {
		position: absolute;
		top: 12px;
		bottom: 12px;
		right: 10px;
		width: 12px;
		height: 8px;
		pointer-events: none;
		fill: #7F9AC7;
		background-color: $color-bg;
	}
}