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

// Всплывающее окно селектора
@mixin power-select-popup () {
	@include flex-col-auto();

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

	.popup {
		@include flex-col-auto();
		overflow: hidden;
		height: 210px;
		border: 1px solid #D4DCE5;
		border-radius: 3px;
		background: #FFFFFF;
		box-shadow: 0 5px 7px 0 rgba(127,154,199,0.14);
	}

	.search {
		@include flex-col-auto();
		position: relative;
		height: 23px;
		margin: 8px 10px 3px 10px;
		border-bottom: solid 1px #4A90E2;
	}

	.input {
		@include font-family();
		@include placeholder($color-placeholder);
		height: 18px;
		line-height: 18px;
		font-size: 14px;
		background-color: $color-bg;
		color: $color;
		border: none;

		&::-ms-clear,
		&::-ms-reveal {
			display: none;
		}
		&:required,
		&:invalid {
			box-shadow: none;
		}
	}

	.icon {
		position: absolute;
		top: 0;
		right: 0;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		fill: #ACBAD0;
		background: #F2F6FB;
		transition: background 0.3s ease;
		&:hover {
			background: #E0E9F3;
		}
	}

	.list {
		@include flex-col-auto();
	}

	.item {
		@include flex-col-auto();
		@include font-family();
		justify-content: center;
		height: 32px;
		padding: 0 16px;
		font-size: 13px;
		line-height: 15px;
		color: #5C5C5C;
		background: #FFFFFF;
		border-bottom: solid 1px rgba(#D4DCE5, 0.3);
		transition: background 0.3s ease;
		user-select: none;
		cursor: pointer;
		&:hover {
			background: #F6FAFF;
		}
	}
	.item--selected {
		background: #F6FAFF;
	}

	.button {
		margin: 10px;
		margin-top: 9px;
	}
}