/* stylelint-disable */

@use "../../style/index" as mixins;

$prefix: "adui-tree-select";

.#{$prefix} {
  position: relative;
  z-index: 1;
  display: inline-block;
  min-width: 150px;
  color: var(--transparent-gray-900);
  font-size: 13px;
  line-height: 1.5;
  vertical-align: top;

  &-wrapper {
    position: relative;
    display: inline-block;

    &-maxTag {
      .#{$prefix}-maxPlaceholder {
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        > svg {
          position: relative;
          top: 2px;
          z-index: 1;
        }
      }
    }
  }

  &-selector {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 1px 30px 1px 4px;
    min-height: 30px;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    user-select: none;
    transition: var(--motion-duration-base) var(--ease-in-out) background-color,
      var(--motion-duration-base) var(--ease-in-out) box-shadow;
  }

  // 单选时的按钮右侧箭头
  &-arrow {
    position: absolute;
    top: 50%;
    margin-top: -9px;
    right: 9px;
    line-height: 0;
  }

  &-icon {
    position: absolute;
    top: 6px;
    right: 8px;
    fill: var(--transparent-gray-700);
    transition: all var(--motion-duration-base) var(--ease-in-out);
  }

  &-dropdown {
    position: absolute;
    top: -9999px;
    left: -9999px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--transparent-gray-900);
    z-index: var(--z-index-dropdown);
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--box-shadow-elevation-2);

    &-hidden {
      display: none;
    }

    // 单选的 Dropdown 每个选项 padding-right 为 0
    &-single {
      .#{$prefix} {
        &-tree-node-content-wrapper {
          padding-right: 0;
        }

        &-selector {
          position: relative;
          height: 30px;
          background-color: #fff;
          cursor: pointer;
          box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.03),
            0 0 0 1px var(--transparent-gray-400);

          &:hover {
            background-color: var(--transparent-gray-100);
            box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.03),
              0 0 0 1px var(--transparent-gray-500);
          }

          &:active {
            background-color: var(--transparent-gray-200);
            box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.04),
              0 0 0 1px var(--transparent-gray-500);
          }
        }
      }
    }

    &-multiple {
      .#{$prefix}-tree-switcher + .#{$prefix}-tree-node-content-wrapper {
        padding-left: 4px;
        padding-right: 0;
        min-width: 0; // 重要
        max-width: 100%;
        overflow: initial;
        text-overflow: initial;
        white-space: initial;
        cursor: initial;
      }
    }

    &-single-level {
      .#{$prefix}-tree-switcher-noop {
        width: 0;
      }
    }
  }

  &-tree {
    &-indent {
      align-self: stretch;
      white-space: nowrap;
      user-select: none;

      &-unit {
        display: inline-block;
        width: 16px;
      }
    }

    &-switcher {
      flex: none;
      align-self: stretch;
      width: 18px;
      cursor: pointer;
      user-select: none;

      &-noop {
        cursor: default;
      }

      &-icon {
        position: relative;
        vertical-align: calc(-0.125em - (18px - var(--font-size-medium)) / 2);
        z-index: 3;
        fill: var(--transparent-gray-600);
        transition: all var(--motion-duration-base) var(--ease-in-out);
      }

      &_open {
        > .#{$prefix}-tree-switcher-icon {
          transform: rotate(90deg);
        }
      }

      // 用 after 实现覆盖到点击整行展开
      &:not(.#{$prefix}-tree-switcher-noop) {
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          width: 100%;
          height: 100%;
        }
      }
    }

    &-treenode {
      position: relative;
      display: flex;
      padding: 0 12px;
      line-height: 32px;
      white-space: nowrap;
      border-radius: 2px;
      transition: background-color var(--motion-duration-base)
        var(--ease-in-out);

      // 全选
      &-all {
        &-inner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: var(--transparent-gray-700);
          cursor: pointer;
        }
        .#{$prefix} {
          &-tree-switcher {
            width: 0;
          }
        }
      }

      &-disabled {
        cursor: not-allowed;
        color: var(--transparent-gray-700);

        > *,
        .#{$prefix}-tree-title {
          cursor: not-allowed;
        }
      }

      &:not(.#{$prefix}-tree-treenode-disabled) {
        &:hover {
          background-color: var(--transparent-gray-200);
        }

        &:active {
          background-color: var(--transparent-gray-300);
        }
      }
    }

    &-node-content-wrapper {
      flex: 1;
      padding-left: 4px;
      padding-right: 16px;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    &-checkbox {
      position: absolute;
      z-index: 2;
      top: 8px;
      right: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      line-height: 0;
      background-color: var(--transparent-gray-50);
      border-radius: 2px;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1),
        0 0 0 1px var(--transparent-gray-400);
      transition: background-color var(--motion-duration-fast)
          var(--ease-in-out),
        box-shadow var(--motion-duration-fast) var(--ease-in-out);

      svg {
        fill: #fff;
        opacity: 0;
        transform: scale(0.6) rotate(10deg);
        transition: transform var(--motion-duration-base) var(--ease-in-out);
      }

      &:not(.#{$prefix}-tree-checkbox-disabled) {
        cursor: pointer;

        &:not(.#{$prefix}-tree-checkbox-checked):not(.#{$prefix}-tree-checkbox-indeterminate) {
          &:hover {
            background-color: var(--transparent-gray-100);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1),
              0 0 0 1px var(--transparent-gray-600);
          }

          &:active {
            background-color: var(--transparent-gray-300);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1),
              0 0 0 1px var(--transparent-gray-600);
          }
        }

        &.#{$prefix}-tree-checkbox-checked,
        &.#{$prefix}-tree-checkbox-indeterminate {
          background-color: var(--primary-color);
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1),
            0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--primary-color);
        }
      }

      &-checked,
      &-indeterminate {
        svg {
          opacity: 1;
          transform: scale(1) rotate(0deg);
        }
      }

      &-indeterminate {
        .#{$prefix}-tree-checkbox-indeterminateSvg {
          display: block;
        }

        .#{$prefix}-tree-checkbox-checkedSvg {
          display: none;
        }
      }

      &-indeterminateSvg {
        display: none;
      }

      &-disabled {
        cursor: not-allowed;
        background-color: rgba(0, 0, 0, 0.03);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);

        + span {
          color: var(--transparent-gray-700);
          cursor: not-allowed;
        }

        &.#{$prefix}-tree-checkbox-checked {
          svg {
            fill: var(--transparent-gray-600);
          }
        }
      }
    }

    // 覆盖虚拟滚动列表的滚动条样式
    &-list-scrollbar {
      width: 14px !important;

      &-thumb {
        margin-top: 4px;
        left: 6px !important;
        width: 6px !important;
        background-color: rgba(0, 0, 0, 0.15) !important;

        &:hover {
          background-color: rgba(0, 0, 0, 0.4) !important;
        }
      }
    }
  }

  &-selection {
    &-overflow {
      position: relative;
      display: flex;
      flex: auto;
      flex-wrap: wrap;
      max-width: 100%;

      &-item {
        flex: none;
        max-width: 100%;

        // 在没有选择的情况下，输入框留出左边距；当有选项的时候，则去掉
        + .#{$prefix}-selection-overflow-item .#{$prefix}-selection-search {
          margin-left: 0;
        }
      }
    }

    &-placeholder {
      position: absolute;
      top: 50%;
      right: 30px;
      left: 8px;
      transform: translateY(-50%);
      transition: all 0.3s;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 13px;
      line-height: 20px;
      color: var(--transparent-gray-700);
    }

    &-search {
      position: relative;
      max-width: 100%;
      min-width: 6px;
      margin-top: 2px;
      margin-bottom: 2px;
      margin-left: 4px;

      &-input {
        margin: 0;
        padding: 0;
        min-width: 6px;
        width: 100%;
        height: 24px;
        font-size: 13px;
        line-height: 15px;
        background-color: transparent;
        border: none;
        outline: none;
        cursor: auto;
        appearance: textfield;

        &::-webkit-search-decoration,
        &::-webkit-search-cancel-button {
          appearance: none;
        }
      }

      &-mirror {
        position: absolute;
        top: 0;
        left: 0;
        height: 24px;
        z-index: 999;
        white-space: pre;
        visibility: hidden;
      }
    }

    &-item {
      flex: none;
      position: relative;
      display: flex;
      align-items: center;
      max-width: 100%;
      margin-top: 3px;
      margin-right: 4px;
      margin-bottom: 3px;
      padding: 0 4px;
      height: 22px;
      border-radius: 4px;
      box-shadow: 0 0 0 1px rgba(163, 163, 163, 0.25);
      cursor: default;
      transition: font-size var(--motion-duration-base),
        line-height var(--motion-duration-base),
        height var(--motion-duration-base);
      user-select: none;

      .#{$prefix}-pop-trigger-placeholder {
        display: none;
      }

      &-content {
        font-size: 13px;
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #1f1f1f;
      }
      &-remove {
        flex: none;
        display: flex;
        align-items: center;
        margin-left: 2px;
      }
    }
  }

  // 封装的 popover prop
  &-pop-trigger {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &-placeholder {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  &-max-popover-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 8px;
    padding-right: 4px;
    height: 30px;
    border-radius: 4px;

    &::after {
      opacity: 0;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--transparent-gray-800);
      border-radius: 4px;
      transform: scale(0.92);
      transition: all var(--ease-in-out) var(--motion-duration-base);
    }

    &:hover {
      &::after {
        opacity: 0.1;
        transform: scale(1);
      }
    }

    svg {
      z-index: 1;
      cursor: pointer;
      opacity: 0.6;
    }

    > span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .#{$prefix}-pop-trigger-placeholder {
      display: none;
    }

    &-wrapper {
      padding: 4px;
      min-width: 100px;
      max-width: 200px;
      max-height: 190px;
      overflow-y: auto;
      @include mixins.scrollbar();
    }
  }

  &-single {
    .#{$prefix} {
      &-selector {
        &::before {
          content: "\00a0";
          opacity: 0;
          width: 0;
          line-height: 0;
        }
      }

      &-selection {
        &-search {
          display: none;
        }

        &-placeholder {
          color: var(--transparent-gray-900);
        }

        &-item {
          box-shadow: none;
          cursor: pointer;
        }
      }
    }
  }

  &-show-search {
    &.#{$prefix}-multiple {
      &:not(.#{$prefix}-disabled) {
        .#{$prefix}-selector {
          cursor: text;
        }
      }
    }
  }

  &-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-medium);
    line-height: 32px;
    color: rgba(0, 0, 0, 0.36);
    cursor: not-allowed;
  }

  &-disabled {
    color: rgba(0, 0, 0, 0.25);

    .#{$prefix} {
      &-selector {
        background: #f5f5f5;
        cursor: not-allowed;

        &:hover {
          box-shadow: 0 0 0 1px var(--transparent-gray-400);
        }
      }
      &-arrow {
        z-index: 1;
      }
      &-selection {
        &:hover,
        &:focus,
        &:active {
          box-shadow: none !important;
        }

        &-item,
        &-search-input {
          cursor: not-allowed;
        }
      }
    }
  }

  &_resultHidden {
    .#{$prefix}-selection {
      &-search {
        margin-left: 4px !important;
        width: calc(100% - 10px) !important;

        &-input {
          width: 100%;
          opacity: 1 !important;
        }
      }
      &-overflow-item-suffix {
        width: 100%;
      }
      &-item,
      &-placeholder {
        display: none;
      }
    }
  }

  &-resultRender {
    .#{$prefix}-selector > .#{$prefix}-selection-item {
      all: initial;
    }
  }

  &:hover,
  &-focused {
    + .#{$prefix}-icon {
      fill: var(--transparent-gray-800);
    }
  }

  &-normal {
    .#{$prefix} {
      &-selector {
        box-shadow: 0 0 0 1px var(--transparent-gray-400);

        &:hover {
          box-shadow: 0 0 0 1px var(--transparent-gray-600);
        }
      }
    }

    &.#{$prefix} {
      &-focused {
        .#{$prefix} {
          &-selector {
            box-shadow: 0 0 0 1px var(--primary-color),
              0 0 0 4px rgba(255, 255, 255, 0.75),
              0 0 0 4px var(--primary-color);
          }
        }
      }
    }
  }

  &-primary {
    .#{$prefix} {
      &-selector {
        box-shadow: 0 0 0 1px var(--primary-color);

        &:hover {
          box-shadow: 0 0 0 1px var(--primary-color);
        }
      }
    }

    &.#{$prefix} {
      &-focused {
        .#{$prefix} {
          &-selector {
            box-shadow: 0 0 0 1px var(--primary-color),
              0 0 0 4px rgba(255, 255, 255, 0.7), 0 0 0 4px var(--primary-color);
          }
        }
      }
    }
  }

  &-success {
    .#{$prefix} {
      &-selector {
        box-shadow: 0 0 0 1px var(--ad-green);

        &:hover {
          box-shadow: 0 0 0 1px var(--ad-green);
        }
      }
    }

    &.#{$prefix} {
      &-focused {
        .#{$prefix} {
          &-selector {
            box-shadow: 0 0 0 1px var(--ad-green),
              0 0 0 4px rgba(255, 255, 255, 0.7), 0 0 0 4px var(--ad-green);
          }
        }
      }
    }
  }

  &-warning {
    .#{$prefix} {
      &-selector {
        box-shadow: 0 0 0 1px var(--ad-orange);

        &:hover {
          box-shadow: 0 0 0 1px var(--ad-orange);
        }
      }
    }

    &.#{$prefix} {
      &-focused {
        .#{$prefix} {
          &-selector {
            box-shadow: 0 0 0 1px var(--ad-orange),
              0 0 0 4px rgba(255, 255, 255, 0.7), 0 0 0 4px var(--ad-orange);
          }
        }
      }
    }
  }

  &-danger {
    .#{$prefix} {
      &-selector {
        box-shadow: 0 0 0 1px var(--ad-red);

        &:hover {
          box-shadow: 0 0 0 1px var(--ad-red);
        }
      }
    }

    &.#{$prefix} {
      &-focused {
        .#{$prefix} {
          &-selector {
            box-shadow: 0 0 0 1px var(--ad-red),
              0 0 0 4px rgba(255, 255, 255, 0.7), 0 0 0 4px var(--ad-red);
          }
        }
      }
    }
  }
}