@import '../common/var-nb.scss';
@import '../mixins/utils.scss';
@import '../mixins/mixins.scss';

/* dropdown
 ----------------------------*/

@include b(dropdown) {
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    color: $--color-font-weight;
    font-size: $--size-font-mid;
    padding: 0 20px;
    display: inline-block;
    min-width: 120px;
    cursor: pointer;
    @include b(dropdown-name) {
      @include utils-user-select;
      position: relative;
      padding-right: 20px;
      text-align: center;
      .iconfont{
        font-size: 18px;
        display: inline-block;
        transition: all .3s cubic-bezier(.645, .045, .355, 1);
        transform: rotate(-180deg);
        margin: 0px 0 0 10px;
        &.is-active{
          top: 11px;
          transform: rotate(0);
        }
        position: absolute;
        top: 14px;
        right: -4px;
      }
    }
}

@include b(dropdown-board) {
  -webkit-box-shadow: $--box-shadow-b;
  box-shadow: $--box-shadow-b;
  background: $--color-white;
  font-size: $--size-font-mid;
  color: $--color-font;
  text-align: left;
  width:100%;
  border-radius: 4px;
  padding : 10px 0;
  position: absolute;
  left: 0;
  bottom: -8px;
  z-index: $--zIndex;
  -webkit-transform:translateY(100%);
  transform:translateY(100%);
  @include b(dropdown-item) {
    height: $--dropdown-size-item-height;
    line-height: $--dropdown-size-item-height;
    padding: 0 25px;
    border-bottom: 1px solid $--dropdown-color-item-border;
    cursor: pointer;
    &.is-active,
    &:hover{
      background: $--dropdown-color-background-hover;
      color: $--color-primary;
    }
    &:last-child{
      border-bottom: 1px solid $--color-white;
      &.is-active,
      &:hover{
        border-bottom: 1px solid $--dropdown-color-item-border;
      }
    }
    &:first-child{
      border-top: 1px solid $--color-white;
      &.is-active,
      &:hover{
        border-top: 1px solid $--dropdown-color-item-border;
      }
    }
  }
}