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

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

.genSizeStyle(@suffix, @control-height, @font-size, @border-radius) {
  @merged-cls: ~'@{select-prefix-cls}@{suffix}';
  @select-height-without-border: @control-height - 2 * @line-width;
  @show-arrow-padding-inline-end: ceil(@font-size * 1.25);

  &.@{merged-cls} {
    height: @control-height;
    font-size: @font-size;

    // ========================= Selector =========================
    .@{select-prefix-cls}-selector {
      display: flex;
      flex: 1 1 auto;
      border-radius: @border-radius;

      .@{select-prefix-cls}-selection-wrap::after {
        line-height: @select-height-without-border;
      }

      .@{select-prefix-cls}-selection-search {
        position: absolute;
        width: 100%;
        inset: 0;

        &-input {
          width: 100%;
          appearance: textfield;
        }
      }

      .@{select-prefix-cls}-selection-item,
      .@{select-prefix-cls}-selection-placeholder {
        display: block;
        align-self: center;
        padding: 0;
        line-height: @select-height-without-border;
        transition:
          all 0.3s,
          visibility 0s;
      }

      .@{select-prefix-cls}-selection-placeholder {
        transition: none;
        pointer-events: none;
      }

      // For common baseline align
      &::after,
      /* For '' value baseline align */
    .@{select-prefix-cls}-selection-item::after,
      /* For undefined value baseline align */
    .@{select-prefix-cls}-selection-placeholder::after {
        display: inline-block;
        width: 0;
        visibility: hidden;
        content: '\a0';
      }
    }

    // With arrow should provides `padding-inline-end` to show the arrow
    &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
    &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search,
    &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
      padding-inline-end: @show-arrow-padding-inline-end;
    }

    // Opacity selection if open
    &.@{select-prefix-cls}-open .@{select-prefix-cls}-selection-item {
      color: @input-placeholder-color;
    }

    // ========================== Input ==========================
    // We only change the style of non-customize input which is only support by `combobox` mode.
    // Not customize
    &:not(.@{select-prefix-cls}-customize-input) {
      .@{select-prefix-cls}-selector {
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0 @input-padding-horizontal-base;

        .@{select-prefix-cls}-selection-search-input {
          height: @select-height-without-border;
          font-size: @font-size-base;
        }

        &::after {
          line-height: @select-height-without-border;
        }
      }
    }

    &.@{select-prefix-cls}-customize-input {
      .@{select-prefix-cls}-selector {
        &::after {
          display: none;
        }

        .@{select-prefix-cls}-selection-search {
          position: static;
          width: 100%;
        }

        .@{select-prefix-cls}-selection-placeholder {
          position: absolute;
          padding: 0 @input-padding-horizontal-base;
          inset-inline-start: 0;
          inset-inline-end: 0;

          &::after {
            display: none;
          }
        }
      }
    }
  }
}

.@{select-prefix-cls}-single {
  .genSizeStyle('', @input-height-base, @font-size-base, @border-radius-base);

  // ======================== Small ========================
  // Shared
  // stylelint-disable-next-line less/no-duplicate-variables
  .genSizeStyle('-sm', @input-height-sm, @font-size-base, @border-radius-sm);

  // Padding
  &.@{select-prefix-cls}-sm {
    &:not(.@{select-prefix-cls}-customize-input) {
      .@{select-prefix-cls}-selector {
        padding: 0 @input-padding-horizontal-sm;
      }

      // With arrow should provides `padding-inline-end` to show the arrow
      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
        padding-inline-end: @input-padding-horizontal-sm + @font-size-base * 1.5;
      }

      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
      &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
        padding-inline-end: @font-size-base * 1.5;
      }
    }
  }

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