@import 'variable';
@import '../../../styles/mixins.scss';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;

.#{$hashClassName}.#{$class-prefix}-select {
  .#{$class-prefix}-select {
    &-value {
      &--inverse {
        color: $m-color-bg-white;
      }
      &--disabled {
        color: $m-color-text-disabled;
      }
      &--inverse-disabled {
        color: $m-color-bg-disabled;
      }
    }
  }

  // 预览
  @each $size in $sizes {
    &-preview--#{$size} {
      font-size: var(--cn-select-preview-#{$size}-font-size);
      color: $m-color-text;
    }
  }

  &-tag-item {
    margin: $m-s-4 $m-s-4 $m-s-4 0;

    &:last-child {
      margin-right: 0;
    }
  }

  &-tag-value {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  &-drawer {
    height: auto;
  }

  &--searchable {
    height: 80vh;

    .cn-ui-m-drawer-body .cn-ui-m-selectdrawer-drawer-content {
      overflow: hidden;
    }
  }

  &-option {
    &-icon {
      color: $m-color-primary;

      &--disabled {
        color: $m-color-text-disabled;
      }
    }

    &-checkbox {
      padding: 0;
    }
    &--disabled {
      --cn-list-title-color: #{$m-color-text-disabled};
    }
  }

  &-drawer {
    width: 100%;
  }
}

.#{$hashClassName}.cn-ui-m-selectdrawer-drawer {
  .#{$class-prefix}-select {
    &-drawer-content {
      max-height: 75vh;
    }

    &-option-group {
      &-title {
        color: $m-color-bg-heavy;
        font-size: $m-font-size-body-1;
        height: $m-s-38;
        line-height: $m-s-38;
        margin: 0 $m-s-16;
        font-weight: 500;
        border-top: $m-s-1 solid $m-color-bg-disabled;
      }
      &.#{$class-prefix}-select-single {
        .#{$class-prefix}-list-item-title {
          padding: 0 $m-s-12;
        }
      }
    }

    &-option-list {
      flex: 1;
      @include limitedOverScroll();
      overflow-y: scroll;
      transition: all 0.1s;

      .#{$class-prefix}-select--tag {
        padding: #{$m-s-16};
      }
    }

    &-search-empty {
      @include flex(column, center, center);
      height: 100%;
      text-align: center;

      &-tip {
        color: var(--cn-select-search-empty-color);
        font-size: $m-font-size-body-1;
      }
    }

    &-footer-counter {
      @include flex(row, flex-start);
      color: $m-color-text;
      font-size: $m-font-size-body-1;
    }

    &-total-num {
      margin: 0 $m-s-4;
      color: $m-color-primary;
    }

    &-safe-area {
      flex: 0 0 auto;
    }
  }
}

.#{$hashClassName}.#{$class-prefix}-select-option {
  padding-right: $m-s-16;
  .mt-list-item-container {
    --cn-list-item-padding-lr: 0;
  }

  &.#{$class-prefix}-select-option--selected {
    --cn-list-title-color: #{$m-color-primary};
  }
}
/* prettier-ignore */
[dir=rtl] .#{$hashClassName}.#{$class-prefix}-select-option {
  padding-right: var(--cn-list-item-padding-lr);
}