.efly-select {
  width: 180px;
  display: inline-block;
  position: relative;
  font-size: $font-default;


  &.efly-select-center{
    input{
      text-align: center;
      padding: 0;
    }
  }

  &.disabled {
    cursor: not-allowed;

    input {
      &:disabled {
        color: $color-text-secondary;
        background: $color-disabled;
        cursor: not-allowed;
      }
    }

    .icon {
      color: $color-text-secondary;
    }

    &:hover {
      .efly-select-data {
        display: none;
      }
    }
  }

  &.top {
    .efly-select-data {
      //bottom: 32px;
    }
  }

  &:hover {
    .efly-select-data {
      display: block;
    }
  }

  input {
    width: 100%;
    min-height: $height-default;
    outline: none;
    padding: 0 $space-default+$space-xs 0 $space-mini;
    border: 1px solid $color-border-base;
    box-sizing: border-box;

    &::placeholder {
      color: $color-primary;
    }

    &:disabled {
      color: $color-primary;
      background: white;
      cursor: pointer;
    }
  }

  .efly-select-multi {
    width: 100%;
    min-height: $height-default - 2px;
    padding: 0 $space-default+$space-xs 0 $space-mini;
    border: 1px solid $color-border-base;
    box-sizing: border-box;
    @include box();
    @include flex-align-center();
    flex-wrap: wrap;


    .efly-select-multi-placeholder {
      color: $color-primary;
    }

    .efly-select-multi-item {
      @include box();
      @include flex-align-center();
      margin: 0 $space-xs $space-xs 0;
      background: $color-medium-primary;
      padding: 0 $space-mini 0 $space-small;
      color: $color-primary;
      height: $height-default - $space-xs - $space-xs - 2px;
      @include box-sizing();

      .icon {
        position: relative;
        color: $color-primary;
        cursor: pointer;

        &:hover {
          color: $color-primary;
        }
      }
    }
  }

  .icon {
    @include box();
    @include flex-center();
    width: $space-default;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    color: $color-primary;
    font-size: $font-default;
  }

  .efly-select-data {
    display: none;
    z-index: 10000;
    position: fixed;
    left: 0;
    top: 0;
    background: white;
    border: 1px solid $color-border-base;
    box-sizing: border-box;


    .efly-select-search {
      width: 100%;
      padding: $space-4;
      box-sizing: border-box;
      position: relative;

      input {
        width: 100%;
        height: $height-default;
      }

      .icon {
        @include box();
        @include flex-center();
        width: $space-default;
        height: 100%;
        position: absolute;
        right: $space-mini;
        top: 0;
        color: $color-text-secondary;
        font-size: $font-default;
      }
    }

    .efly-select-content {
      width: 100%;
      overflow-y: auto;
      box-sizing: border-box;

      .efly-select-box {
        width: 100%;

        .efly-select-item {
          width: 100%;

          .efly-select-item-label {
            position: relative;
            width: 100%;
            padding: $space-mini;
            box-sizing: border-box;
            text-align: left;
            word-break: break-all;
            cursor: pointer;

            .icon {
              text-indent: 0;
              font-size: $font-default;
            }

            &:hover, &.hover, &.active, &:active {
              background: $color-light-primary;
            }
          }

        }
      }
    }
  }
}


$input-size: (name: "small", font: $font-small, height: $height-small, serach: $height-mini),
(name: "mini", font: $font-mini, height: $height-mini, serach: $height-xs);
@for $i from 1 through length($input-size) {
  $item: nth($input-size, $i);
  $name: map-get($item, name);
  $font: map-get($item, font);
  $height: map-get($item, height);
  $serach: map-get($item, serach);

  .efly-select-#{$name} {
    font-size: $font;

    input {
      min-height: $height;
      font-size: $font;

      &::placeholder {
        font-size: $font;
      }
    }

    .icon {
      font-size: $font;
    }

    .efly-select-multi {
      min-height: $height - 2px;

      .efly-select-multi-item {
        height: $height - $space-xs - $space-xs - 2px;

        .icon {
          font-size: $font;
        }
      }
    }

    .efly-select-data {
      .efly-select-search {
        input {
          width: 100%;
          height: $serach;
        }

        .icon {
          font-size: $font;
        }
      }

    }
  }
}