@select-height: @height-base;
@select-item-height: 24px;
@select-icon-size: 24px;
@select-border-radius: @border-radius;
@select-border-color: @border-color;
@select-hover-border-color: @purple-main;
@select-focus-border-color: @purple-dark;

.igloo-attached-select-containter {
  position: relative;
  height: @select-height;

  .ant-select {
    width: 100%;
    height: 100%;

    .ant-select-selection-item {
      background-color: #fff;
      border: none;
    }
  }

  .ant-select-dropdown {
    width: 100% !important;
    min-width: unset !important;
    padding: 0px;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.16);
    top: calc(@select-height - 1px) !important;
    bottom: auto !important;
    border-radius: 0px 0px @select-border-radius @select-border-radius;
    border-top: 1px solid @divider-color;
    border-right: 1px solid @select-focus-border-color;
    border-bottom: 1px solid @select-focus-border-color;
    border-left: 1px solid @select-focus-border-color;

    .igloo-attached-select-multiple-dropdown {
      .igloo-attached-select-multiple-dropdown-buttons {
        display: flex;
        justify-content: space-between;
        padding: 12px 16px;
      }
    }

    .ant-select-item-option {
      padding: 12px 16px;

      &:not(.ant-select-item-option-disabled) {
        color: @text-color;
      }

      .ant-select-item-option-content {
        line-height: @select-item-height;
      }

      .ant-select-item-option-state {
        display: none;
      }
    }

    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
      font-weight: normal;
      background: #f9f9f9;
    }
  }

  .igloo-attached-select-open-status {
    .ant-select-selector {
      border-radius: @select-border-radius @select-border-radius 0px 0px !important;
      border-color: @select-focus-border-color !important;
    }
  }

  .ant-select-disabled {
    .ant-select-selection-item {
      background-color: #f9f9f9;
    }
  }

  .igloo-attached-select {
    .ant-select-selector {
      padding: 0 40px 0 16px !important;
      border-color: @select-border-color;
      height: 100%;
      border-radius: @select-border-radius;

      .ant-select-selection-search-input {
        height: 100%;
      }

      .ant-select-selection-placeholder {
        line-height: @select-height;
      }
    }

    .ant-select-item-option-content {
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 24px;
    }
  }
}

.igloo-hour-select {
  position: relative;

  &:hover {
    .igloo-icon {
      color: @select-hover-border-color;
    }

    .ant-input[disabled] + .igloo-icon {
      color: #bdbdbd;
    }
  }

  .igloo-hour-select-input-active {
    border-color: @select-focus-border-color;
  }

  & > .igloo-icon {
    position: absolute;
    top: 12px;
    right: 16px;
    color: @icon-color;
    font-size: 24px;
  }

  .igloo-hour-select-active {
    color: @select-focus-border-color;
  }

  .igloo-drop-down-container {
    top: 54px !important;
    min-width: inherit !important;

    // antd 下拉列表配置
    .ant-dropdown-menu {
      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.24);
      padding: 0;

      .ant-dropdown-menu-item {
        padding: 0px;
      }

      .ant-dropdown-menu-item:hover,
      .ant-dropdown-menu-submenu-title:hover {
        background-color: white;
        cursor: auto;
      }
    }

    // igloo 时间选择样式配置
    .igloo-drop-down-content {
      display: flex;
      align-items: center;
      // 用 Menu.Item的内容撑开 完全阻止时间冒泡
      padding: 8px 16px;

      .igloo-hour-select-meridiem-disable {
        cursor: not-allowed !important;
        color: #bdbdbd !important;
      }

      div:last-child {
        margin-left: 24px;
      }

      div {
        width: 40px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        span {
          width: 40px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .igloo-icon {
          font-size: 24px;
          color: @icon-color;
          cursor: pointer;

          &:hover {
            color: @select-hover-border-color;
          }

          &:active {
            color: @select-focus-border-color;
          }
        }

        input {
          width: 40px;
          height: 40px;
          padding: 8px 10px;
          border-color: @disabled-text-color;
        }
      }

      span {
        margin: 0px 12px;
      }
    }
  }
}

.igloo-select-default {
  .ant-select-dropdown {
    padding: 0;
    margin-top: 8px;
    filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.16));
    border-radius: 0px 0px @select-border-radius @select-border-radius;

    .ant-select-item {
      padding: 12px 16px;
      &:not(.ant-select-item-option-disabled) {
        color: @text-color;
      }
    }
  }
}

.igloo-select {
  height: @select-height;

  .ant-select-selector {
    padding: 0 40px 0 16px;
    border-color: @select-border-color;
    height: 100%;
    border-radius: @select-border-radius;

    .ant-select-selection-search-input {
      height: 100%;
    }

    .ant-select-selection-placeholder {
      line-height: @select-height;
    }

    .ant-select-selection-item {
      padding-inline: 0;
    }
  }

  .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
    border-color: @select-hover-border-color;
  }

  .ant-select-focused:not(.ant-select-disabled).ant-select:not(
      .ant-select-customize-input
    )
    .ant-select-selector {
    border-color: @select-focus-border-color;
  }

  .ant-select-disabled.ant-select:not(.ant-select-customize-input)
    .ant-select-selector {
    background: #f9f9f9 !important;
    border-color: @disabled-border-color;
    color: @disabled-text-color;
  }

  .ant-select-disabled.ant-select:not(.ant-select-customize-input)
    .ant-select-arrow {
    .igloo-icon {
      color: @disabled-text-color !important;
    }
  }

  .ant-form-item-has-error {
    .igloo-hour-select {
      .igloo-icon {
        color: @icon-color;
      }
    }

    .igloo-attached-select-containter {
      .igloo-icon {
        border-color: @error-color;
      }

      .ant-select-dropdown {
        border-color: @divider-color @error-color @error-color @error-color;
      }
    }
  }

  .ant-select-arrow {
    width: @select-icon-size;
    height: @select-icon-size;
    top: 50%;
    margin-top: -12px !important;

    .igloo-select-arrow {
      font-size: @select-icon-size;
      color: @icon-color;
      transition: all 0.3s ease;
      position: absolute;
      top: 0;
      right: 0;
      margin-inline-end: 0 !important;
    }

    .igloo-select-arrow-active {
      color: @select-focus-border-color;
    }
  }

  .ant-select-multiple .ant-select-selection-placeholder {
    left: 16px;
    right: 40px;
  }

  .ant-select-multiple .ant-select-selection-overflow-item-suffix {
    display: none;
  }

  .ant-select-multiple .ant-select-selection-item {
    padding: 0;
  }

  .ant-select-multiple
    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    font-weight: normal;
    background-color: #fff;

    &:hover {
      background-color: #f9f9f9;
    }
  }

  .ant-select-single.ant-select-show-arrow .ant-select-selection-search {
    left: 16px;
    right: 40px;
  }

  .ant-select-single.ant-select-show-arrow .ant-select-selection-item,
  .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
    padding: 0;
  }

  .ant-select-selection-placeholder {
    color: @disabled-text-color;
  }

  .ant-select-single.ant-select-open .ant-select-selection-item {
    color: @text-color;
  }

  .ant-select-show-search.ant-select-single.ant-select-open
    .ant-select-selection-item {
    color: @disabled-text-color;
  }

  .ant-select-single.ant-select-sm:not(
      .ant-select-customize-input
    ).ant-select-show-arrow
    .ant-select-selection-item,
  .ant-select-single.ant-select-sm:not(
      .ant-select-customize-input
    ).ant-select-show-arrow
    .ant-select-selection-placeholder {
    padding-right: 0;
  }
}