@import '../variables/all';
@import '../mixins/all';
@import '../utils/all';

.select {
  @include control-base;
  background-color: $select-background-color;
  position: relative;
  cursor: $cursor-pointer;
  width: $form-min-width;

  &.placeholder {
    color: $ash-grey;
  }

  &:focus,
  &:hover,
  .open > & {
    border-color: $control-active-border-color;
  }

  &.open {
    /*
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    */
  }

  &.disabled {
    @include disabled;
  }

  > div {
    @include ellipsis;
    margin: 0 15px 0 0;
  }

  & i.icon-arrow-down {
    @include vertical-center;
    //@include triangle-down(10px, 6px, $select__icon-color);
    right: $space-lvl1;
    margin: 1px 8px 0 0;

    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.1rem;
    color: $black;
    line-height: 1.2em;
  }

  &.grayed_item {
    color: $mid-grey;
  }
}

.select--sm {
  @include control-sm;
}

.select--lg {
  @include control-lg;
}

/*
.select__icon {
  @include vertical-center;
  @include triangle-down(10px, 6px, $select__icon-color);
  right: 0;
  margin: 1px 8px 0 0;

  width: 1.2rem;
  height: 1.2rem;
  font-size: 1.2rem;
  color: black;
  line-height: 1.2em;
}
*/

.select__option {
  padding: 6px 0 6px 12px;
  cursor: $cursor-pointer;
  @include fontSizeM;

  &:hover {
    background-color: $select__option-hover-background-color;
  }

  &.selected {
    background-color: $select__option-selected-background-color;
    color: $select__option-selected-color;
  }
  &.odd {
    background-color: $light-grey;
  }
  &.grayed_item {
    color: $mid-grey;
  }
}

.select__clear-btn {
  padding: 6px 18px 6px;
}

.select__popover {
  z-index: $z-tooltip;
  margin-top: 2px;

  .popup-content {
    width: 100%;
    //border: 1px solid $control-active-border-color;
    border-top: 0;
    position: relative;
    overflow: hidden;
    color: $popup-color;
    background-color: $popup-background-color;
    @include border-radius($border-radius-base);
    @include fontSizeXS;
    @include box-shadow($shadow-lvl3);
  }
}

.select__popover--animation-slide-y-appear {
  @include slide-in-y;
}

.select__popover--animation-slide-y-leave {
  @include slide-out-y;
}

.select__search-container {
  padding: 6px 12px;
}

.select__search {
  width: 100%;

  & input {
    width: 100%;
  }
}

.select__options {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 192px;
  position: relative;
}

.select--grouped {
  background-color: rgba(51, 51, 51, 0.1);
}

.select__group:not(:last-child):after {
  content: "";
  display: block;
  color: black;
  margin: 12px 12px 0 12px;
  border-bottom: 1px solid $white-five;
}

.no-results-found {
  color: $mid-grey;
  text-align: center;
}

.select__group-name {
  font-size: 1.4rem;
}

.select__group-header {
  font-size: 1.4rem;
  font-weight: $semi-bold-weight;
  padding: 12px;
}

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

.select__popup-footer {
  padding: 5px 5px 5px 10px;
  border-top: 1px solid #e9e9e9;
}