
@import "../../scss/theme/config";

.cd-dropdown {
  position: relative;
  width: 100%;

  &.cd-active {
    .cd-dropdown-el {
      &:hover {
        border-color: $inputSearchColor;
      }

      .cd-dropdown-name {
        .cd-component-black-arrow {
          transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
        }
      }
    }
  }

  .cd-dropdown-el {
    @include boxSizing(border-box);
    background: $colorContainerBg;
    position: absolute;
    z-index: 9;
    border: 1px solid $inputSearchColor;
    border-radius: 2px;
    outline: 0;
    cursor: pointer;
    color: $colorDark;
    left: 0;
    right: 0;

    &:hover {
      border-color: $inputHoverColor;
    }

    .cd-dropdown-name {
      @include flexBox();
      @include flexCenterBox();
      position: relative;
      padding: 0 10px;
      height: 100%;
      justify-content: left;

      .cd-dropdown-name-text {
        @include ellipse();
        display: block;
        width: 89%;
      }

      .cd-component-black-arrow {
        @include transition(transform, .2s, linear);
        position: absolute;
        right: 12px;
        top: 50%;
        margin-top: -3px;
      }
    }

    .cd-dropdown-list {
      @include transition(all, .1s, linear);
      height: 0;
      overflow-x: hidden;
      overflow-y: auto;

      .cd-dropdown-list-item {
        @include ellipse();
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        background-color: $colorContainerBg;

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

