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

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

.#{$hashClassName}.#{$class-prefix}-selectdrawer {
  @include flex();
  gap: $m-s-12;
  box-sizing: border-box;

  @each $size in $sizes {
    &--#{$size} {
      font-size: var(--cn-select-drawer-#{$size}-font-size);
    }
  }

  &-form,
  &-filter {
    --cn-select-drawer-medium-padding-tb: 0;
    --cn-select-drawer-small-padding-tb: 0;
    --cn-select-drawer-large-padding-tb: 0;
    --cn-select-drawer-padding-lr: 0;
  }

  &-filter .#{$class-prefix}-selectdrawer-content > * {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-drawer {
    --cn-list-title-color: #{$m-color-text};
    --cn-list-title-font-size: #{$m-font-size-body-1};
    --cn-list-item-min-height: #{$m-s-48};
    --cn-list-divider-border-bottom-color: #{$m-color-bg-disabled};
    --cn-list-item-padding-lr: #{$m-s-16};

    border-top-left-radius: #{$m-radius-largest};
    border-top-right-radius: #{$m-radius-largest};

    .#{$class-prefix}-selectdrawer-container {
      @include flex(column, flex-start, stretch);
      box-sizing: border-box;
      max-height: 80vh;
    }

    .#{$class-prefix}-selectdrawer-drawer-content {
      @include flex(column, flex-start, stretch);
      flex: 1;
      box-sizing: border-box;
      overflow-y: scroll;
      .cn-ui-m-select-search-wrapper {
        box-sizing: border-box;
        padding: var(--cn-select-search-padding);
      }
    }

    .#{$class-prefix}-selectdrawer-drawer--empty {
      padding-left: var(--cn-select-drawer-empty-padding-lr);
      padding-right: var(--cn-select-drawer-empty-padding-lr);
      padding-top: var(--cn-select-drawer-empty-padding-tb);
      padding-bottom: var(--cn-select-drawer-empty-padding-tb);
      text-align: center;
    }

    .#{$class-prefix}-selectdrawer-drawer-empty-text {
      color: var(--cn-select-drawer-empty-font-color);
      font-size: var(--cn-select-drawer-empty-font-size);
      text-align: center;
    }

    .#{$class-prefix}-search-wrapper {
      box-sizing: border-box;
      padding: var(--cn-select-search-padding);
    }

    .#{$class-prefix}-selectdrawer-toolbar {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: $m-line solid $m-color-bg-disabled;
      font-size: $m-font-size-body-1;
      padding: $m-s-8;

      &--no-border {
        border-bottom: none;
      }

      &-title {
        flex-grow: 1;
        text-align: center;
        color: var(--cn-select-drawer-title-color);
      }

      &-btn-cancel {
        min-width: 160rpx;
        justify-content: flex-start;
      }
      &-btn-ok {
        min-width: 160rpx;
        justify-content: flex-end;
      }
    }
  }

  .#{$class-prefix}-selectdrawer {
    &-content {
      @each $size in $sizes {
        &--#{$size} {
          padding-top: var(--cn-select-drawer-#{$size}-padding-tb);
          padding-bottom: var(--cn-select-drawer-#{$size}-padding-tb);
        }
      }
      padding-left: var(--cn-select-drawer-padding-lr);
      flex: 1;
      min-width: 0;
      color: var(--cn-select-drawer-normal-color);

      &--inverse {
        color: var(--cn-select-drawer-inverse-color);
      }

      &--right {
        justify-content: flex-end;
        text-align: right;
      }

      &-text {
        @extend %ellipsis;
        display: block;

        &--disabled {
          color: var(--cn-select-drawer-disabled-color);
        }

        &--right {
          justify-content: flex-end;
          text-align: right;
        }

        &--left {
          text-align: left;
        }

        &--inverse {
          color: var(--cn-select-drawer-inverse-color);
        }

        &--inverse-disabled {
          color: var(--cn-select-drawer-inverse-disabled-color);
        }
      }
      &--inside-filter {
        color: $m-color-primary;
      }
      &--overflow {
        max-width: $m-s-86;
      }
    }

    &-placeholder {
      color: var(--cn-select-drawer-normal-placeholder-color);

      &--right {
        justify-content: flex-end;
        text-align: right;
      }

      &--inverse {
        color: var(--cn-select-drawer-inverse-placeholder-color);
      }

      &--disabled {
        color: var(--cn-select-drawer-disabled-color);
      }
      &--inverse-disabled {
        color: var(--cn-select-drawer-inverse-disabled-color);
      }
    }

    &-icon {
      display: flex;
      justify-content: center;
      padding-right: var(--cn-select-drawer-padding-lr);
      color: var(--cn-select-drawer-normal-icon-color);

      @each $size in $sizes {
        &--#{$size} {
          padding-top: var(--cn-select-drawer-#{$size}-padding-tb);
          padding-bottom: var(--cn-select-drawer-#{$size}-padding-tb);
        }
      }

      &--inverse {
        color: var(--cn-select-drawer-inverse-icon-color);
      }

      &-text {
        position: relative;

        @each $size in $sizes {
          &--#{$size},
          &--#{$size}.cn-ui-m-icon-remote {
            font-size: var(--cn-select-drawer-#{$size}-icon-size);
          }
        }

        &--inverse {
          color: var(--cn-select-drawer-inverse-icon-color);
        }

        &--disabled {
          color: var(--cn-select-drawer-disabled-color);
        }

        &--inverse-disabled {
          color: var(--cn-select-drawer-inverse-disabled-icon-color);
        }
      }
    }
  }

  @each $size in $sizes {
    &--#{$size} {
      & .#{$class-prefix}-selectdrawer-content-text,
      & .#{$class-prefix}-selectdrawer-placeholder {
        font-size: var(--cn-select-drawer-#{$size}-font-size);
        line-height: $m-font-lineheight-2;
      }
    }
  }

  .#{$class-prefix}-select-drawer-footer {
    // 用于显示boxShadow
    z-index: 1;
    --box-primary-text-font-color: #{$m-color-primary};
  }
}