@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';

.#{$hashClassName}.cn-ui-m-filter {
  background: $m-color-bg-white;

  .cn-ui-m-filter {
    &-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: $m-s-40;
      // background: $m-color-bg-white;
      border-bottom: $m-line solid $m-color-bg-disabled;
      // 卡片级标题操作列筛选
      &-card--sub-action {
        height: auto;
        border-bottom: none;
      }
    }

    &-search {
      padding: $m-s-8 $m-s-16;
    }

    &-quick-filter-wrapper {
      flex: auto;
      padding: 0 $m-s-8;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &-quick-filter-no-warp-wrapper {
      display: flex;
      align-items: center;
      height: $m-s-40;
      border-bottom: $m-line solid $m-color-bg-disabled;
    }

    // 卡片标题级快捷筛选容器
    &-quick-filter-card-sub-action-wrapper {
      display: flex;
      align-items: center;
      height: $m-s-30;
    }

    &-quick-filter {
      width: min-content;
      margin: 0 auto;
      white-space: nowrap;
    }

    &-quick-filter-no-warp {
      white-space: nowrap;
      padding: $m-s-7 $m-s-16;
      overflow-x: scroll;
      overflow-y: hidden;
      &::-webkit-scrollbar {
        display: none;
      }
      .cn-ui-m-checkbox-group--tag.cn-ui-m-checkbox-group--hoz {
        flex-wrap: nowrap;
      }
      .cn-ui-m-radio-tag.cn-ui-m-radio-group--hoz {
        flex-wrap: nowrap;
      }

      // 解决radio为button时样式错乱问题
      .cn-ui-m-filter-quick-filter-radio-group--max-width {
        max-width: none;
      }

      // 卡片内间距
      &-card-padding {
        padding: $m-s-7 0;
      }
    }

    &-header {
      display: flex;
      flex: 1;
      flex-wrap: nowrap;
      justify-content: space-between;
      padding: 0 $m-s-8 0 $m-s-8;
      overflow-x: auto;
      overflow-y: hidden;

      &::-webkit-scrollbar {
        display: none;
      }
      // 卡片内间距
      &-card-padding {
        padding: 0;
      }
    }

    &-footer {
      margin-left: auto;
      display: flex;
      align-items: center;
      height: $m-s-40;
      padding: 0 $m-s-16 0 $m-s-12;
      // 筛选按钮区域
      &-search {
        display: flex;
        align-items: center;
        > .cn-ui-m-filter-btn-icon {
          margin-right: $m-s-4;
        }
      }
      // 卡片级标题操作列筛选
      &-card--sub-action {
        height: auto;
      }
    }

    // 顶部右侧插槽
    &-right-slot {
      display: flex;
      align-items: center;
      margin-left: $m-s-12;
      > * {
        margin-left: $m-s-4;
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }

  // 筛选抽屉添加圆角
  &-drawer {
    border-top-left-radius: #{$m-radius-largest};
    border-top-right-radius: #{$m-radius-largest};
  }

  &-sticky {
    position: sticky;
    top: 0;
    z-index: $cn-filter-sticky-z-index;
  }

  // 顶部右侧用于展开全量筛选能力的按钮
  .cn-ui-m-filter-btn {
    &-divider {
      width: $m-s-1;
      height: $m-s-12;

      margin-right: $m-s-12;
      background: $m-color-bg;
      border-radius: $m-radius;
    }
    // 筛选阴影(仅滚动时显示)
    &-shadow {
      width: $m-s-1;
      height: $m-s-28;
      margin-right: $m-s-12;
      background-image: linear-gradient(to right, #fff, rgba(0, 0, 0, 0.08));
    }

    &-icon {
      color: $m-color-bg-darker1;
    }

    &-text {
      color: $m-color-text-title3;
      font-size: $m-font-size-body-1;
    }

    &-active {
      color: $m-color-primary;
    }
  }
}