.#{$prefix}select {
  display: flex;
  position: relative;
  font-size: 12px;

  &-disable {
    & .xe-select-btn,
    & .xe-select-btn-font {
      cursor: no-drop;
    }

    & .xe-select-btn-arrow {
      border-top-color: $disable;
    }
  }

  &-btn {
    padding: 8px 24px 8px 8px;
    text-decoration: none !important;
    position: relative;

    &-font {
      width: 36px;
      height: 16px;
      line-height: 16px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: $title-color;

      &-disable {
        color: $icon-color;
      }
    }

    &-arrow {
      cursor: default;
      height: 0;
      width: 0;
      font-size: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid #484848;
      position: absolute;
      right: 8px;
      top: 14px;
      transition: border-top-color 0.5s;

      &-disable {
        border-top-color: $icon-color;
      }
    }
  }

  &-list {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 32px;
    left: -1px;
    width: 160px;
    max-height: 120px;
    overflow: auto;
    border: 1px solid $border-color;
    background: $white;

    &-item {
      font-size: 12px;
      line-height: 1.5;
      padding: 6px 8px;
      cursor: pointer;

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