@mixin select-size($height, $padding, $font-size, $border-radius) {
  @include e(selection) {
    min-height: $height;
    font-size: $font-size;

    @include e(text) {
      line-height: $height - 2;
      padding-left: $padding;
      padding-right: $height;
    }

    .za-select__icon,
    .za-select__arrow {
      right: ($height - $font-size) / 2;
      margin-top: - $font-size / 2;
    }
  }

  .ui-dropdown {
    position: absolute;
    left: 0;
    top: $height + 4;

    .ui-select-notfound {
      margin: $padding;
    }
  }

  &.radius {
    .za-select__selection {
      border-radius: $border-radius;
    }
  }
}

@include b(select) {
  @include select-size($base-height, $base-padding, $base-fontSize, $base-radius);

  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  color: #666;

  @include e(selection) {
    outline: none;
    user-select: none;
    display: block;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    cursor: pointer;

    &:hover {
      border-color: $base-theme-info;
    }

    &:active {
      border-color: $base-select-active-color;
      outline: 0;
      box-shadow: inset 0 1px 1px $base-select-active-color, 0 0 8px $base-select-active-color;
    }

    @include e(text) {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      input {
        display: block;
        border: 0;
        box-shadow: none;
      }
    }

    .za-select__icon,
    .za-select__arrow {
      position: absolute;
      top: 50%;
      color: #d9d9d9;
      transition: transform .2s ease;
      line-height: normal;
    }
  }

  &.za-select--open {
    .za-select-selection {
      border-color: $base-select-active-color;
      outline: 0;

      .ui-select-arrow {
        transform: rotate(180deg);
      }
    }
  }

  &.disabled {
    .za-select__selection {
      cursor: not-allowed;
      background-color: #f3f5f7;

      &:hover {
        border-color: #d9d9d9;
      }

      &:active {
        border-color: #d9d9d9;
      }
    }
  }

  &.size-xl {
    @include select-size($base-height-xl, $base-padding-xl, $base-fontSize-xl, $base-radius-xl);
  }

  &.size-lg {
    @include select-size($base-height-lg, $base-padding-lg, $base-fontSize-lg, $base-radius-lg);
  }

  &.size-sm {
    @include select-size($base-height-sm, $base-padding-sm, $base-fontSize-sm, $base-radius-sm);
  }

  &.size-xs {
    @include select-size($base-height-xs, $base-padding-xs, $base-fontSize-xs, $base-radius-xs);
  }
}

.ui-dropdown {
  .za-select--notfound {
    display: block;
    padding: 8px;
    color: #ccc;
  }

  .checked-icon {
    position: absolute;
    right: 5px;
  }
}

@include b(option) {
  @include e(list) {
    position: relative;
    white-space: nowrap;
    padding: 10px;
    line-height: 20px;
    cursor: pointer;

    &:hover {
      color: $base-select-focus-color;
      background-color: $base-select-active-color;
    }

    &.is-checked {
      background-color: $base-select-active-color;
      color: $base-select-focus-color;
    }

    &.is-disabled {
      color: #ccc;
      cursor: no-drop;

      &:hover {
        background-color: transparent;
      }
    }
  }
}