@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  position: relative;
  border-radius: 4px;
  border: 1px solid $border-color;
  background-color: #ffffff;
  cursor: pointer;
  transition: all $trans-speed ease-in-out;

  &:hover,
  &:focus {
    border-color: $input-hover-color;
  }

  &.disabled {
    border-color: $border-color !important;
    cursor: default;
  }
}

.options {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: -1px;
  max-height: 258px;
  border-radius: 4px;
  border: 1px solid $input-hover-color;
  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.2);
  background-color: #fff;
  z-index: 5;
  overflow: auto;
}

.option,
.control {
  display: flex;
  justify-items: flex-start;
  position: relative;
  height: 64px;
  padding: 12px 64px 12px 12px;
  transition: background-color $trans-speed ease-in-out,
    border $trans-speed ease-in-out;
  user-select: none;

  &.withIcon {
    padding-left: 64px;
  }

  .leftIcon {
    position: absolute;
    @include vertical-center;
    left: 12px;
  }

  .text {
    min-width: 160px;

    &:first-of-type {
      min-width: 200px;
    }

    & > div {
      color: $text-color;
      font-weight: $font-bold;
    }

    & > p {
      color: $second-text-color;
      white-space: nowrap;
      @include ellipsis;
    }
  }

  .rightIcon {
    position: absolute;
    @include vertical-center;
    right: 12px;
  }

  &.selected {
    background-color: $bg-color;
  }
}

.option {
  &:hover {
    background-color: $light-color01;
  }
}
