/*-------------- drop-event -----------------*/
.drop-event{
	display: inline-block;
	position: relative;

	&__head{
		width: 220px;
		padding-bottom: 3px;
		position: relative;
	}

	&__head-arr{
		position: absolute;
		top: 2px;
		right: 0;
	}

	&__search{
		position: relative;

		input[type="text"]{
			display: inline-block;
			height: rem(30px);
			width: 100%;
			@include font(normal, normal, rem(14px), rem(28px), $color-dark-blue);
			padding: 0 50px 0 8px;
			margin: 0;
			border: 0;
			outline: 0;
			border-bottom: 1px solid $color-light-grey;
			background: transparent;
		}

		input[type="text"]::placeholder{color: $color-grey; opacity: 1;}
		input[type="text"]::-webkit-input-placeholder {color: $color-grey; opacity: 1;}
		input[type="text"]:-moz-placeholder {color: $color-grey; opacity: 1;}

		input[type="text"]:focus + .drop-event__search-close{
			display: inline-block;
		}
	}

	&__search-close{
		display: none;
		width: 7px;
		height: 7px;
		position: absolute;
		right: 35px;
		@include top-center;
		text-align: center;
		vertical-align: middle;
		margin-top: 2px;
	}

	&__search-close .ic-close-small{
		width: 100%;
		height: 100%;
		fill: $color-dark-blue;
		vertical-align: top;
	}

	&__popup{
		display: none;
		background: #f8f9fa;
		border-radius: 2px;
		border: solid 1px $color-light-grey;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
	}

	&__option{
		min-height: 48px;
		max-height: 236px;
		width: 350px;
		padding: 8px 15px;
		overflow-y: auto;
	}

	&:hover &__popup,
	&__popup.active{
		display: block;
	}

	&:hover &__search input[type="text"]{border-color: $color-purple;}

	&__label{
		@include font(normal, 600, rem(14px), 1.2, $color-dark-blue);
		margin-bottom: 5px;
	}

	&__sect:not(:last-child){
		border-bottom: 1px solid $color-light-grey;
		padding-bottom: 6px;
		margin-bottom: 11px;
	}

	&__empty{
		@include font(normal, normal, rem(14px), 1.2, $color-grey);
	}

	&.disabled &__search input[type="text"]{border-color: rgba(172, 178, 195, 0.7);}
	&.disabled &__head-arr .icon{fill: $color-light-grey;}

	&.disabled:hover .drop-event__popup,
	&.disabled &__popup.active{
		display: none;
	}

	&.disabled &__search{
		input[type="text"]{color: $color-light-grey;}
		input[type="text"]::placeholder{color: $color-light-grey;}
		input[type="text"]::-webkit-input-placeholder {color: $color-light-grey;}
		input[type="text"]:-moz-placeholder {color: $color-light-grey;}
	}
}

.drop-event-param{
	display: flex;
	justify-content: space-between;
	min-height: rem(30px);
	margin: 0 -15px;
	padding: 4px 15px;

	&__icon{
		display: flex;
		justify-content: center;
		flex: 0 0 24px;
		width: 24px;
		margin-right: 7px;
		position: relative;

		.icon{
			width: 24px;
			height: 24px;
		}
	}

	&__mark{
		width: 9px;
		position: absolute;
		top: 0;
		right: 0;

		.ic-pointer{
			vertical-align: top;
			width: 9px;
			height: 11px;
			fill: $color-red;
		}
	}

	&__text{
		width: calc(100% - 31px);
		@include font(normal, normal, rem(13px), 1.3, $color-dark-blue);
		padding: 3px 15px 4px;
	}

	&.active,
	&:hover{
		background: $color-sort-grey;
	}

	&__accent{color: $color-green;}
}