@import (reference) '../../style/themes/index';

@select-prefix-cls: ~'@{ant-prefix}-select';

@select-overflow-prefix-cls: ~'@{select-prefix-cls}-selection-overflow';

// Multiple select specific variables
@select-internal-fixed-item-margin: calc(@padding-xss / 2);
@select-multiple-base-padding: max(calc(@padding-xss - @line-width), 0px);
@select-multiple-container-padding: max(calc(@select-multiple-base-padding - @select-internal-fixed-item-margin), 0px);
@select-item-dist: calc(calc(@select-height - @select-multiple-item-height) / 2 - @line-width);
@select-multiple-selector-bg-disabled: @input-disabled-bg;

/**
 * Get multiple selector needed style. The calculation:
 *
 * ContainerPadding = BasePadding - ItemMargin
 *
 * Border:                    ╔═══════════════════════════╗                 ┬
 * ContainerPadding:          ║                           ║                 │
 *                            ╟───────────────────────────╢     ┬           │
 * Item Margin:               ║                           ║     │           │
 *                            ║             ┌──────────┐  ║     │           │
 * Item(multipleItemHeight):  ║ BasePadding │   Item   │  ║  Overflow  Container(ControlHeight)
 *                            ║             └──────────┘  ║     │           │
 * Item Margin:               ║                           ║     │           │
 *                            ╟───────────────────────────╢     ┴           │
 * ContainerPadding:          ║                           ║                 │
 * Border:                    ╚═══════════════════════════╝                 ┴
 */

// Multiple selector utilities based on CSS-in-JS getMultipleSelectorUnit function
.getMultipleSelectorUnit(@item-height, @base-padding, @container-padding) {
  @result-item-height: @item-height;
  @result-item-line-height: calc(@item-height - @line-width * 2);
  @result-base-padding: @base-padding;
  @result-container-padding: @container-padding;
}

// Utility to calculate select item distance
.getSelectItemStyle(@select-height, @multiple-item-height) {
  @select-item-dist: calc(calc(@select-height - @multiple-item-height) / 2 - @line-width);
}

// Overflow styles
.genOverflowStyle() {
  // Overflow container
  .@{select-overflow-prefix-cls} {
    position: relative;
    display: flex;
    flex: auto;
    flex-wrap: wrap;
    max-width: 100%;

    &-item {
      display: inline-flex;
      flex: none;
      align-self: center;
      // https://github.com/ant-design/ant-design/issues/54179
      max-width: calc(100% - 4px);
    }
  }

  // Selection items
  .@{select-prefix-cls}-selection-item {
    display: flex;
    flex: none;
    align-self: center;
    box-sizing: border-box;
    max-width: 100%;
    background: @select-selection-item-bg;
    border: @line-width @border-style-base @select-selection-item-border-color;
    border-radius: @border-radius-sm;
    cursor: default;
    transition:
      font-size @animation-duration-slow,
      line-height @animation-duration-slow,
      height @animation-duration-slow;
    margin-block: @select-internal-fixed-item-margin;
    margin-inline-end: calc(@select-internal-fixed-item-margin * 2);
    padding-inline-start: @padding-xs;
    padding-inline-end: calc(@padding-xs / 2);

    .@{select-prefix-cls}-disabled& {
      color: @select-multiple-item-disabled-color;
      border-color: @select-multiple-item-disabled-border-color;
      cursor: not-allowed;
    }

    // Content
    &-content {
      display: inline-block;
      overflow: hidden;
      white-space: pre; // fix whitespace wrapping. custom tags display all whitespace within.
      text-overflow: ellipsis;
      margin-inline-end: calc(@padding-xs / 2);
    }

    &-remove {
      .iconfont-mixin();
      display: inline-flex;
      align-items: center;
      color: @text-color-secondary;
      font-weight: bold;
      font-size: 10px;
      line-height: inherit;
      cursor: pointer;

      > .@{iconfont-css-prefix} {
        vertical-align: -0.2em;
      }

      &:hover {
        color: @icon-color-hover;
      }
    }
  }
}

// Selection styles
.genSelectionStyle(@select-height, @multiple-item-height, @base-padding, @container-padding, @border-radius) {
  .getSelectItemStyle(@select-height, @multiple-item-height);
  .getMultipleSelectorUnit(@multiple-item-height, @base-padding, @container-padding);

  // Selector container
  .@{select-prefix-cls}-selector {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    // Multiple is little different that horizontal is follow the vertical
    padding-inline: @base-padding;
    padding-block: @container-padding;
    border-radius: @border-radius;

    .@{select-prefix-cls}-disabled& {
      background: @select-multiple-selector-bg-disabled;
      cursor: not-allowed;
    }

    &::after {
      display: inline-block;
      width: 0;
      margin: @select-internal-fixed-item-margin 0;
      line-height: @multiple-item-height;
      visibility: hidden;
      content: '\a0';
    }
  }

  // Selection items with calculated height
  .@{select-prefix-cls}-selection-item {
    height: @multiple-item-height;
    line-height: calc(@multiple-item-height - @line-width * 2);
  }

  // Selection wrap
  .@{select-prefix-cls}-selection-wrap {
    align-self: flex-start;

    &::after {
      line-height: @multiple-item-height;
      margin-block: @select-internal-fixed-item-margin;
    }
  }

  // Prefix adjustments
  .@{select-prefix-cls}-prefix {
    margin-inline-start: calc(@input-padding-horizontal-base - @base-padding);
  }

  // Overflow item spacing
  .@{select-overflow-prefix-cls}-item + .@{select-overflow-prefix-cls}-item,
  .@{select-prefix-cls}-prefix + .@{select-prefix-cls}-selection-wrap {
    .@{select-prefix-cls}-selection-search {
      margin-inline-start: 0;
    }
    .@{select-prefix-cls}-selection-placeholder {
      inset-inline-start: 0;
    }
  }

  // https://github.com/ant-design/ant-design/issues/44754
  // Same as `wrap:after`
  .@{select-overflow-prefix-cls}-item-suffix {
    min-height: @multiple-item-height;
    margin-block: @select-internal-fixed-item-margin;
  }

  // Search input
  .@{select-prefix-cls}-selection-search {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    margin-inline-start: calc(@input-padding-horizontal-base - @select-item-dist);

    &-input,
    &-mirror {
      height: @multiple-item-height;
      font-family: @font-family;
      line-height: @multiple-item-height;
      transition: all @animation-duration-slow;
    }

    &-input {
      width: 100%;
      min-width: 4.1px; // fix search cursor missing
    }

    &-mirror {
      position: absolute;
      top: 0;
      z-index: 999;
      white-space: pre; // fix whitespace wrapping caused width calculation bug
      visibility: hidden;
      inset-inline-start: 0;
      inset-inline-end: auto;
    }
  }

  // Placeholder
  .@{select-prefix-cls}-selection-placeholder {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(@input-padding-horizontal-base - @base-padding);
    inset-inline-end: @input-padding-horizontal-base;
    transform: translateY(-50%);
    transition: all @animation-duration-slow;
  }
}

// ============================================================
// ==                          Size                          ==
// ============================================================
.genSizeStyle(@suffix, @multiple-item-height, @border-radius, @border-radius-sm, @select-height, @font-size: @font-size-base) {
  @merged-cls: ~'@{select-prefix-cls}@{suffix}';

  // Calculate padding values
  @base-padding: max(calc(@padding-xss - @line-width), 0px);
  @container-padding: max(calc(@base-padding - @select-internal-fixed-item-margin), 0px);

  .@{select-prefix-cls}-multiple.@{merged-cls} {
    font-size: @font-size;

    // Include overflow styles
    .genOverflowStyle();

    // Include selection styles with calculated values
    .genSelectionStyle(@select-height, @multiple-item-height, @base-padding, @container-padding, @border-radius);

    // Selector specific styles
    .@{select-prefix-cls}-selector {
      .@{select-prefix-cls}-show-search& {
        cursor: text;
      }
    }

    // Show arrow and allow clear states
    &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
    &.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
      padding-inline-end: calc(@font-size-icon + @control-padding-horizontal);
    }
  }
}

// Main multiple style generation - equivalent to genMultipleStyle function
.genMultipleStyle() {
  // ======================== Default ========================
  .genSizeStyle('', @select-multiple-item-height, @border-radius-base, @border-radius-sm, @select-height);

  // ======================== Small ========================
  // stylelint-disable-next-line less/no-duplicate-variables
  .genSizeStyle('-sm', @select-multiple-item-height-sm, @border-radius-sm, @border-radius-sm, @input-height-sm);

  // Size small need additional set padding
  .@{select-prefix-cls}-multiple.@{select-prefix-cls}-sm {
    .@{select-prefix-cls}-selection-placeholder {
      inset-inline: calc(@control-padding-horizontal-sm - @line-width);
    }

    // https://github.com/ant-design/ant-design/issues/29559
    .@{select-prefix-cls}-selection-search {
      margin-inline-start: 2px; // magic number
    }
  }

  // ======================== Large ========================
  // stylelint-disable-next-line less/no-duplicate-variables
  .genSizeStyle('-lg', @select-multiple-item-height-lg, @border-radius-lg, @border-radius-base, @input-height-lg, @font-size-lg);
}

.genMultipleStyle();