//== 下拉框
//
//
.select {
  position: relative;
  display: inline-flex;
  width: $select-width;
  align-items: center;
  line-height: $select-option-inline-height;
  cursor: pointer;
  border: $border-width solid $gray-light;
  border-radius: $border-radius;

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

  &.required {
    border-color: $brand-danger;

    ::placeholder {
      color: $brand-danger;
    }
  }

  &.disabled {

    &,
    .select-addon,
    .select-tags,
    .select-selection {
      cursor: not-allowed;
      border-color: $gray-light;
      color: $select-selection-color;
      background-color: $select-disable-bg;
    }
  }

  // 多选
  &.select-multiple {
    width: $select-multiple-width;
  }

  &>.select-tags {
    @include scroll-reset();
    @include set-font-size(1rem);

    position: relative;
    display: inline-block;
    width: 100%;
    min-height: $select-height-md;
    max-height: $select-multiple-max-height;
    padding: 2px 42px 2px 2px;
    overflow-y: auto;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: border-color ease-in-out .18s, box-shadow ease-in-out .18s;
    text-align: left;
    text-overflow: ellipsis;
    color: $gray-base;
    border: none;
    background-color: $select-bg-color;
    background-image: none;
    background-clip: padding-box;

    &>.dada-tag-default {
      margin: 2px;

      &:hover {
        border-color: $gray-light;
        background-color: $gray-light;
      }
    }

    &>.select-placeholder {
      @include set-font-size(rem(14px));

      display: inline-block;
      padding: 4px 0 4px 5px;
      color: $gray;
    }
  }
}

.select-selection {
  display: inline-block;
  width: 100%;
  padding: $input-padding-y-md $input-padding-x;
  cursor: pointer;
  transition: border-color ease-in-out .18s, box-shadow ease-in-out .18s;
  text-align: left;
  text-overflow: ellipsis;
  color: $gray-base;
  border: none;
  border-radius: $border-radius;
  background-color: $select-bg-color;
  background-image: none;
  background-clip: padding-box;

  &:active,
  &:focus {
    outline: none;

    &::placeholder {
      opacity: 1;
    }
  }

  &[readonly] {
    background: $select-bg;
  }

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

.select-open {
  transition: border-color ease-in-out .18s, box-shadow ease-in-out .18s;
  border-color: $brand-primary;
  outline: none;
}

.select-options-wrap {
  margin: 0;
  padding: .714rem 0;
  box-sizing: border-box;
  border-radius: $border-radius;
  background: $select-bg;
}

.select-search-wrap {
  position: relative;
  z-index: $zindex-select;
  padding: $select-option-padding;
  box-sizing: border-box;
  background-color: $select-bg-color;

  .select-search {
    position: absolute;
    top: rem(4px);
    right: $input-padding-x;
    height: 2.142rem;
  }
}

.select-search-input {
  display: inline-block;
  width: 100%;
  height: 2.143rem;
  padding: $select-padding-y-md $input-padding-x;
  padding-right: $select-selection-padding-right;
  font-size: 1rem;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color ease-in-out .18s, box-shadow ease-in-out .18s;
  text-align: left;
  text-overflow: ellipsis;
  color: $gray-base;
  border: 1px solid $border-color;
  background-color: $select-bg-color;
  background-image: none;
  background-clip: padding-box;

  &:active,
  &:focus {
    outline: none;

    &::placeholder {
      opacity: 1;
    }
  }

  &[readonly] {
    background: $select-bg;
  }

  .open & {
    display: inline-block;
  }
}

.select-search {
  position: absolute;
  z-index: 2;
  top: 2px;
  right: 1px;
  padding: $select-padding-y-md $input-padding-x;
  font-size: 1.25rem;
  cursor: pointer;
  user-select: none;
  color: $gray-light;
}

.select-empty {
  margin-bottom: 0;
  padding: $select-padding-y-md $input-padding-x;
  text-align: center;
  color: $gray-dark;
}

.select-addon {
  position: absolute;
  top: 0;
  right: $select-addon-margin-x;
  cursor: pointer;
  user-select: none;
  transition: $select-transition;
  color: $gray-light;

  .open & {
    transform: rotate(180deg);
  }
}

.select-options {
  @include scroll-reset();

  position: relative;
  z-index: $zindex-select;
  width: 100%;
  max-height: $select-selection-max-height;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;

  .select-noresult {
    padding: $select-option-padding;
    cursor: not-allowed;
    color: $select-option-disable-color;
  }
}

.select-option {
  height: $select-height-md + rem(2px);
  padding: $select-option-padding-y $select-option-padding-x;
  overflow: hidden;
  line-height: $select-line-height-md;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: $gray-base;

  &:hover {
    background-color: $select-option-hover-bg;
  }

  &.active {
    color: $select-option-active-color;
  }

  &.disabled {
    cursor: not-allowed;
    color: $select-option-disable-color;
  }

  .select-group-inner & {
    padding-left: $input-padding-x * 2;
  }
}

.select-group-container {
  padding: 0;
  list-style-type: none;

  &.disabled {
    cursor: not-allowed;
    color: $select-option-disable-color;
  }

  .disabled & {
    .select-group-title {
      color: $select-option-disable-color;
    }
  }

  .select-group-title {
    height: 2.867rem;
    padding: $select-padding-y-md $input-padding-x;
  }

  .select-group-inner {
    padding: 0;
  }
}

// Size
.dada-select-xs {
  &>.select-selection {
    height: $select-height-xs;
    padding: $select-padding-y-xs $select-addon-font-size-xs + $select-padding-x * 2 $select-padding-y-xs $select-padding-x;
    font-size: rem(12px);
    line-height: $select-line-height-xs;
  }

  &>.select-addon {
    height: $select-height-xs;
    font-size: $select-addon-font-size-sm;
    line-height: $select-height-xs;
  }

  &>.select-tags {
    min-height: $select-height-xs;
    max-height: $select-xs-multiple-max-height;
    padding: 1px 42px 1px 1px;

    &>.select-placeholder {
      @include set-font-size(rem(12px));

      padding: 2px 0 2px 6px;
    }
  }
}

.dada-select-sm {
  &>.select-selection {
    height: $select-height-sm;
    padding: $select-padding-y-sm $select-addon-font-size-sm + $select-padding-x * 2 $select-padding-y-sm $select-padding-x;
    font-size: $font-size-sm;
    line-height: $select-line-height-sm;
  }

  &>.select-addon {
    height: $select-height-sm;
    font-size: $select-addon-font-size-sm;
    line-height: $select-height-sm;
  }

  &>.select-tags {
    min-height: $select-height-sm;
    max-height: $select-xs-multiple-max-height;

    &>.select-placeholder {
      @include set-font-size(rem(12px));

      padding: 2px 0 2px 6px;
    }
  }
}

.dada-select-md {
  &>.select-selection {
    height: $select-height-md;
    padding: $select-padding-y-md $select-addon-font-size-md + $select-padding-x * 2 $select-padding-y-md $select-padding-x;
    font-size: $font-size-base;
    line-height: $select-line-height-md;
  }

  &>.select-addon {
    height: $select-height-md;
    font-size: $select-addon-font-size-md;
    line-height: $select-height-md;
  }
}

.dada-select-lg {
  &>.select-selection {
    height: $select-height-lg;
    padding: $select-padding-y-lg $select-addon-font-size-lg + $select-padding-x * 2 $select-padding-y-lg $select-padding-x;
    font-size: $select-font-size-lg;
    line-height: $select-line-height-lg;
  }

  &>.select-addon {
    height: $select-height-lg;
    font-size: $select-addon-font-size-lg;
    line-height: $select-height-lg;
  }

  &>.select-tags {
    min-height: $select-height-lg;
    line-height: $select-line-height-lg;
    vertical-align: middle;
    padding: 4px 42px 4px 4px;
  }
}