//== 下拉框
//
//
.select {
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 16rem;
  line-height: $select-option-inline-height;
  &.disabled {
    &,
    .select-addon,
    .select-tags,
    .select-selection {
      background: $select-disable-bg;
      cursor: $cursor-disabled;
      color: $select-selection-color;
    }
    .tag {
      cursor: $cursor-disabled;
    }
  }
  .select-tags {
    cursor: pointer;
    position: relative;
    display: inline-block;
    user-select: none;
    text-align: left;
    text-overflow: ellipsis;
    width: 100%;
    border-radius: rem(2px);
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 0.7;
    color: $gray-base;
    background-color: $select-tags-bg-color;
    background-image: none;
    background-clip: padding-box;
    border: rem(1px) solid $gray;
    transition: border-color ease-in-out 0.18s, box-shadow ease-in-out 0.18s;
    padding-right: $select-selection-padding-right;
    max-height: 5.71rem;
    min-height: 2.857rem;
    overflow-y: auto;
    .tag-default {
      color: $gray-base;
      background: rgba(233, 235, 240, 0.5);
      margin-bottom: 0.3rem;
      margin-top: 0.35rem;
      height: 2.142rem;
      border: none;
      padding-left: 0.714rem;
      padding-right: 0.714rem;
    }
    .tag-close {
      color: $gray-darker;
      opacity: 1;
      font-size: $font-size-lg;
      &:hover {
        color: $gray-base;
      }
    }
    .select-placeholder {
      color: $gray-darker;
      position: absolute;
      top: $input-padding-x;
      left: $input-padding-x;
      .required & {
        color: $brand-danger;
      }
    }
    .tag {
      line-height: 1.7rem;
    }
    .required & {
      border: rem(1px) solid $brand-danger;
    }
  }
  &.select-multiple {
    width: 28.57rem;
  }
}

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

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

    &::placeholder {
      opacity: 1;
    }
  }

  &[readonly] {
    background: $select-bg;
  }
  &::placeholder {
    color: $gray-darker;
  }
  .open & {
    border-color: $brand-primary;
    outline: none;
  }
  .required & {
    border-color: $brand-danger;
    &::placeholder {
      color: $brand-danger;
    }
  }
}
.select-required {
  color: $brand-danger;
}
.select-option-outer {
  z-index: $zindex-select;
}
.select-options-wrap {
  box-sizing: border-box;
  border-radius: rem(2px);
  animation: 0.3s scaleIn ease;
  border: $select-options-border;
  transform-origin: center 0;
  box-shadow: 0px rem(2px) rem(10px) 0px rgba(19, 34, 64, 0.1);
  margin: 0;
  background: $select-bg;
  padding: 0.714rem 0;
}
.select-search-wrap {
  position: relative;
  z-index: $zindex-select;
  background-color: $select-tags-bg-color;
  box-sizing: border-box;
  padding: $select-option-padding;
  .select-search {
    position: absolute;
    right: $input-padding-x;
    height: 2.142rem;
    top: rem(8px);
  }
}

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

    &::placeholder {
      opacity: 1;
    }
  }

  &[readonly] {
    background: $select-bg;
  }
  .open & {
    display: inline-block;
  }
}

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

.select-empty {
  margin-bottom: 0;
  text-align: center;
  color: $gray-darker;
  padding: $input-padding-y $input-padding-x;
}
.select-addon {
  cursor: pointer;
  user-select: none;
  position: absolute;
  color: $gray;
  right: rem(1px);
  top: rem(3px);
  z-index: 2;
  padding: $input-padding-y $input-padding-x;
  transition: $select-transition;

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

.select-options {
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: $zindex-select;
  list-style: none;
  overflow-y: auto;
  max-height: $select-selection-max-height;
  .select-noresult {
    cursor: not-allowed;
    color: $select-option-disable-color;
    padding: $select-option-padding;
  }
}

.select-option {
  cursor: pointer;
  overflow: hidden;
  height: 2.867rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: $gray-base;
  padding: $input-padding-y $input-padding-x-lg;
  line-height: $select-option-inline-height;
  &:hover {
    background-color: $select-option-hover-bg;
  }

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

  &.disabled {
    cursor: $cursor-disabled;
    color: $select-option-disable-color;
  }
  .select-group-inner & {
    padding-left: $input-padding-x-lg * 2;
  }
}
.select-group-container {
  list-style-type: none;
  padding: 0;
  &.disabled {
    cursor: $cursor-disabled;
    color: $select-option-disable-color;
  }
  .disabled & {
    .select-group-title {
      color: $select-option-disable-color;
    }
  }
  .select-group-title {
    height: 2.867rem;
    padding: $input-padding-y $input-padding-x-lg;
  }
  .select-group-inner {
    padding: 0;
  }
}