.dropdown-field {
	position: relative;
	width: 100%;
	min-width: 330px;
}

.dropdown-field__toggler {
	@include btn-reset;
	position: relative;
	box-sizing: border-box;
	padding: 14px 25px;
	width: 100%;
	height: 50px;
	text-align: left;
	font-weight: 500;
	font-size: 17px;
	line-height: 20px;
	color: $text-main;
	background-color: #F6F6F6;
	border: 1px solid rgba(208, 209, 209, 0.8);
	border-radius: 2px;
	transition: all 0.3s ease;

	&::after {
		content: "";
		position: absolute;
		top: 22px;
		right: 22px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 5px 0 5px;
		border-color: $gray-dark transparent transparent transparent;
		pointer-events: none;
		transition: all 0.3s ease;

	}

	&:hover {
		background-color: #F2F2F2;
		border-color: #D7D8D7;
	}

	//&:focus,
	.dropdown-field--opened & {
		outline: none;
		background-color: $bg-main;
		border-color: $accent-main;
		border-radius: 2px 2px 0 0;
		box-shadow: 0px 3px 10px #CFF3D9;

		&::after {
			transform: scale(1,-1);
			border-color: $accent-main transparent transparent transparent;
		}

		& + .dropdown-field__tooltip {
			max-height: none;
			opacity: 1;
			pointer-events: auto;
		}
	}
}

.dropdown-field__placeholder {
	display: inline-block;
	vertical-align: top;
	max-width: calc(100% - 20px);
	color: rgba(166, 166, 166, 0.5);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.dropdown-field__placeholder--filled {
	color: $text-main;
}

.dropdown-field__tooltip {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 20px;
	max-height: 0;
	background-color: $bg-main;
	border-radius: 0 0 2px 2px;
	box-shadow: 0px 3px 10px #ADADAD;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	transition: opacity 0.3s ease;

	.dropdown-field--opened & {
		max-height: none;
		opacity: 1;
		pointer-events: auto;
	}
/*
	.dropdown-field__toggler:focus-within + & {
		max-height: none;
		opacity: 1;
		pointer-events: auto;
	}*/
/*
	&:focus-within {
		max-height: none;
		opacity: 1;
		pointer-events: auto;
	}*/
}

.dropdown-field__search  {
	position: relative;
	display: flex;
	flex-direction: column;
}

.dropdown-field__search-field {
	position: relative;
	display: block;
}

.dropdown-field__search-clear {
	@include hover;
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.dropdown-field__clear {
	@include btn-reset;
	align-self: flex-end;
	margin: 5px 0;
	font-weight: 500;
	font-size: 15px;
	line-height: 30px;
	color: $accent-dark;
	transition: all 0.3s ease;

	&:hover,
	&:focus,
	&:active {
		color: $accent-medium;
		outline: none;
	}

	&:disabled {
		color: $gray-medium;
	}
}

.dropdown-field__list {
	@include list-reset;
	max-height: 250px;
	overflow-y: auto;
}

.dropdown-field__button {
	padding-top: 10px;

	button {
		min-width: 136px;
	}
}
