@import "mixins/mixins";
@import "common/var";
@import "./popper";

@include b(select-dropdown) {
  position: absolute;
  z-index: #{$--index-top + 1};
  border-radius: $--border-radius-base;
  background-color: $--select-dropdown-background;
  
  box-shadow: 4px 4px 8px 0px rgba(111, 144, 194, 0.04), -4px 4px 8px 0px rgba(111, 144, 194, 0.04), 4px 4px 8px 0px rgba(60, 102, 165, 0.04), -4px 4px 8px 0px rgba(60, 102, 165, 0.04);
  box-sizing: border-box;
  margin: 5px 0;
  & .yk-select-dropdown__item {
    height: 32px;
    line-height: 32px;
    margin-bottom: 8px;
  }
  & .yk-select-dropdown__item.selected {
    color: $--select-option-selected-font-color;
    font-weight: 400;
  }

  & .yk-select-dropdown__item.selected:not(.is-checkall){
    background-color: $--select-option-selected-background !important;
  }
  @include when(multiple) {
    & .yk-select-dropdown__item.selected{
      color: $--select-option-selected-font-color;
      &.hover {
        background-color: $--select-option-hover-background;
      }

      &::after {
        position: absolute;
        right: 20px;
        font-family: 'yk-icons';
        content: "\e6da";
        font-size: 12px;
        font-weight: bold;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }
    & .yk-select-dropdown__item.selected:not(.is-checkall){
      background-color: $--select-option-selected-background !important;
    }
  }

  .yk-scrollbar.is-empty .yk-select-dropdown__list{
    padding: 0;
  }
  &.yk-popper[x-placement^="bottom"]{
      margin-top: $--popover-arrow-size;
    }
}

@include b(select-dropdown__empty) {
  padding: $--select-dropdown-empty-padding;
  margin: 0;
  text-align: center;
  color: $--select-dropdown-empty-color;
  font-size: $--select-font-size;
}

@include b(select-dropdown__wrap) {
  max-height: $--select-dropdown-max-height;
}

@include b(select-dropdown__list) {
  list-style: none;
  padding: 0px 4px;
  padding-bottom: 0;
  margin: 0;
  box-sizing: border-box;
  .yk-select-group__wrap{
    &:not(:last-of-type){
      padding-bottom: 1px;
      &::after{
        left: 12px;
        right: 12px;
        bottom: 0px;
        background: rgba(46, 99, 253, 0.0600);
      }
    }
    .yk-select-group__title{
      line-height: 48px;
      padding-left: 12px;
      position: relative;
      margin-bottom: 8px;
      &::after{
        content: '';
        position: absolute;
        display: block;
        height: 1px;
        background: rgba(46, 99, 253, 0.0600);
        left: 12px;
        right: 12px;
        bottom: 0px;
      }
    }
    .yk-select-dropdown__item{
      padding-left: 12px;
    }
  }
}

.yk-select-dropdown__selectAll {
  border-bottom: 1px solid rgba(46, 99, 253, 0.06);
  height: 32px;
  line-height: 32px;
  margin-left: 4px;
}