// @import '../../styles-new/mixins';
// @import '../../styles-new/default';
@import '../../theme/components/block-select.less';

@block-select-prefix-cls: im-block-select;

.@{block-select-prefix-cls} {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  // min-height: 44 * @hd;
  // padding: 0 10*@hd;
  opacity: 1;

  &&-disabled {
    opacity: 0.5;
  }

  &-item {
    color: @blockselect-color;
    font-size: @font-size-base-sm;
    font-weight: 400;
    line-height: 24 * @hd;
    height: 26 * @hd;
    position: relative;
    border: @blockselect-border-width solid @blockselect-border-color;
    background-color: @blockselect-fill-color;
    box-sizing: border-box;
    border-radius: @blockselect-radius;
    // margin-right: 10* @hd;
    // margin-top: 10px;
    // margin-bottom: 10 * @hd;
    margin: @blockselect-margin-vertical 0;
    // padding: 0 5px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: @blockselect-large-font-weight;
    cursor: pointer;

    // &-label {
    //   font-size: @font-size-base-sm;
    // }
    &-desc-icon {
      display: none;
    }

    &-s {
      font-size: @blockselect-small-font-size;
      // width: 50 * @hd;
      max-width: 200*@hd;
      line-height: @blockselect-small-height;
      height: @blockselect-small-height;
      // font-size: @font-size-extra;
      margin-right: 10 * @hd;
      padding: 0 @h-spacing-sm;
    }

    &-m {
      // width: calc((100% - 45px) / 4);
      max-width: 200*@hd;
      height: @blockselect-medium-height;
      font-size: @blockselect-medium-font-size;
      padding: 0 10px;
      margin-right: 10 * @hd;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

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

    &-l {
      // width: 100 * @hd;
      max-width: 200*@hd;
      height: @blockselect-large-height;
      line-height: @blockselect-large-height;
      font-size: @blockselect-large-font-size;
      margin-right: 10px;
    }

    &-xl {
      width: 100 * @hd;
      height: @blockselect-xlarge-height;
      font-size: @blockselect-xlarge-font-size;
      margin-right: 10px;
    }

    &-self {
      margin-right: 10 * @hd;
    }

    &-desc {
      height: auto;
      padding: 4 * @hd @h-spacing-md;
      line-height: 20 * @hd;

      &-text {
        // color: @blockselect-desc-color;
        font-size: @blockselect-large-tertiary-font-size;
        line-height: 17 * @hd;
        // color: @blockselect-large-tertiary-color;
      }
    }

    &-tintcolor {
      border-color: @brand-primary;
    }

    &-disabled {
      // border-color: @border-color-disabled;
      border: @blockselect-border-width solid @blockselect-border-color-disable;
      background-color: @blockselect-fill-color-disable;
      color: @blockselect-color-disable;
      cursor: no-drop;

    }


    // &-delete {
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;

    //   svg {
    //     margin-left: 10px;
    //     width: 20*@hd;
    //     height: 20*@hd;
    //   }
    // }

    // &:first-child {
    //   border-left-width: @border-width-md;
    //   border-radius: @radius-md 0 0 @radius-md;
    // }

    // &:last-child {
    //   border-radius: 0 @radius-md @radius-md 0;
    // }

    &-selected {
      background: @blockselect-fill-color-active;
      color: @blockselect-color-active;
      border-color: @blockselect-border-color-active;

      .@{block-select-prefix-cls}-item-desc-text {
        color: @blockselect-color-active;
      }

      // 选中禁用
      &.@{block-select-prefix-cls}-item-disabled {
        color: @blockselect-color-active-disable;
        background: @blockselect-fill-color-active-disable;
        border-color: @blockselect-border-color-active-disable;
      }
    }

    &-aliquot-3 {
      width: calc((100% - 30px)/ 3);
      margin-right: 15px;
      font-size: @blockselect-medium-font-size;
      // padding: 0;
    }

    &-aliquot-3:nth-child(3n) {
      margin-right: 0;
    }

    &-aliquot-4 {
      // width: 25%;
      width: calc((100% - 45px)/ 4);
      margin-right: 15px;
      font-size: @blockselect-medium-font-size;

    }

    &-aliquot-4:nth-child(4n) {
      margin-right: 0;
    }


    &-aliquot-5 {
      // width: 25%;
      width: calc((100% - 60px)/ 5);
      margin-right: 15px;
      font-size: @blockselect-small-font-size;
      // padding: 0 6px;
    }

    &-aliquot-5:nth-child(5n) {
      margin-right: 0;
    }

    &-aliquot-6 {
      // width: calc((100% - 75px)/ 6);
      width: 42px;
      margin-right: 15px;
      font-size: @blockselect-small-font-size;
      padding: 0;
    }

    &-aliquot-6:nth-child(6n) {
      margin-right: 0;
    }


    &-adaptiveWidth {
      width: auto;
      padding: 0 9*@hd;
      display: inline;
    }

    // size为l且aliquot为3  icon+desc/desc1时显示图标
    &-l {
      &.@{block-select-prefix-cls}-item-aliquot-3 {
        &.@{block-select-prefix-cls}-item-desc {
          &.@{block-select-prefix-cls}-item-icon {
            height: @blockselect-large-height;
            margin: @blockselect-margin-vertical-icon 0;
            font-weight: @blockselect-large-font-weight-icon;

            .@{block-select-prefix-cls}-item-icon-desc-text {
              display: flex;
              justify-content: center;
              align-content: center;
              gap: 6px;

              .@{block-select-prefix-cls}-item-desc-icon {
                display: block;

                img {
                  width: @blockselect-large-icon-size;
                  height: @blockselect-large-icon-size;
                  object-fit: contain;
                }
              }
            }
          }
        }
      }
    }
  }


}

.@{block-select-prefix-cls}.adaptiveWidth {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}