/*-------------- drop-cond -----------------*/
.drop-cond{
	display: inline-block;
	vertical-align: middle;
	position: relative;

	&__head{
		width: 200px;
    min-height: 30px;
		@include font(normal, normal, rem(14px), rem(28px), $color-grey);
		padding: 0 20px 0px 6px;
		border-bottom: 1px solid $color-light-grey;
		position: relative;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	&_small &__head{width: 140px;}
	&_big &__head{width: 250px;}

	&__head.active{color: $color-dark-grey;}

	&__head-arr{
		display: inline-block;
		width: 30px;
		height: 30px;
		position: absolute;
		top: 0px;
		right: -5px;
	}

  &__search{
    position: relative;
    width: 200px;

    input[type="text"]{
      display: inline-block;
      height: rem(30px);
      width: 100%;
      @include font(normal, normal, rem(14px), rem(28px), $color-dark-blue);
      padding: 0 45px 0 5px;
      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-cond__search-close{
      display: inline-block;
    }
  }

  &_small &__search{width: 140px;}
  &_big &__search{width: 250px;}

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

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

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

	&__content{position: relative;}

	&__popup{
		width: 100%;
		min-width: 200px;
		padding-top: 3px;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 100;
	}

  &__popup_big{width: 380px;}

  &__popup_huge{
    width: auto;
    max-width: 500px !important;
  }

  &__popup_huge &__param-text{margin-right: 10px;}

  &__popup_big &__param-icon{
    display: flex;
    justify-content: space-between;
    padding-right: 9px;
  }

  &__popup_big &__ic{
    flex: 0 0 24px;
    text-align: center;
    width: 24px;
    height: 24px;
    position: static;
    margin-left: 10px;
    transform: none;
    margin-top: 5px;

    .icon{
      width: 20px;
      height: 20px;
      fill: $color-dark-grey;
    }

    .ic-calendar{
      width: 24px;
      height: 24px;
    }
  }

	&__option{
		width: 100%;
		background: #fff;
		border-radius: 2px;
		border: solid 1px $color-light-grey;
		box-shadow: -10px 9px 21px 0 rgba(128, 152, 213, 0.08);
    max-height: 245px;
    overflow-y: auto;
	}

	&__content:hover &__popup,
	&__popup.active{
		display: block;
		z-index: 2;
	}

	&__content:hover &__head{border-color: $color-purple;}

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

	&__param{
		@include font(normal, normal, rem(14px), rem(30px), $color-dark-grey);
    padding: 0 5px 0 14px;
		position: relative;
		cursor: pointer;

    .icon{vertical-align: top;}
  }

  &__ic{
    position: absolute;
    @include top-center;
    right: 15px;
    width: 16px;
    height: 16px;

    .icon{
      vertical-align: top;
      width: 16px;
      height: 16px;
    }

    .tooltip{display: none;}
  }

  &__ic .tooltip.active,
  &__ic:hover .tooltip{
    display: inline-block;
    width: 250px;
    margin: 0 0 0 8px;
    position: absolute;
    left: 100%;
    top: -9px;
    z-index: 2;
  }

  &__accent{color: $color-green;}

	&__param-icon{
		padding-right: 20px;
	}

	// &__param-text{
	// 	white-space: nowrap;
	// 	text-overflow: ellipsis;
	// 	overflow: hidden;
	// }

	&__sub{
		display: none;
		background: #fff;
		border-radius: 2px;
		border: solid 1px $color-light-grey;
		box-shadow: -10px 9px 21px 0 rgba(128, 152, 213, 0.08);
		position: absolute;
		left: 100%;
		top: 0;
	}

	&__arr{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		position: absolute;
		top: 0;
		right: 0;

		.icon{
			width: 22px;
			height: 22px;
			position: static;
			transform: none;
		}
	}

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

	&__param:hover &__sub{display: block;}

  &.error{outline: none;}
	&.error &__head{border-color: $color-red;}

	&__error{
		@include font(normal, normal, rem(13px), 1.54, $color-red);
		margin-top: 5px;
		position: relative;

		.ic-failure{
			vertical-align: middle;
			width: 16px;
			height: 14px;
			margin-right: 5px;
		}

		.tooltip{
			position: absolute;
			top: 100%;
			left: 0;
			max-width: 100%;
			z-index: 2;
		}
	}

  &__warning{
    @include font(normal, normal, rem(13px), 1.54, #eb6565);
    margin-top: 5px;
    position: relative;

    .ic-warning{
      vertical-align: middle;
      width: 15px;
      height: 15px;
      margin-right: 5px;
      margin-top: -2px;
    }

    .icon.ic-warning{fill: #eb6565;}

    .tooltip{
      position: absolute;
      top: 100%;
      left: 0;
      max-width: 100%;
      z-index: 2;
    }
  }

  &_up &__popup{
    top: auto;
    bottom: 100%;
    padding-top: 0;
    padding-bottom: 3px;
  }

  &.no-scroll &__option{
    max-height: none;
    overflow: visible;
  }

  &.disabled &__head{
    color: $color-light-grey;
    border-bottom: 1px solid rgba(172, 178, 195, 0.7);
  }

  &.disabled &__head-arr .icon{fill: $color-light-grey;}

  &.disabled &__content:hover &__popup,
  &.disabled &__popup.active{
    display: none;
  }

  &.disabled &__content:hover &__head{border-bottom: 1px solid rgba(172, 178, 195, 0.7);}
}