.#{$ns}Quick-launch {
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    &-title {
      font-size: 16px;
      color: var(--saas-Title-Text);
    }
  }
  &-body {
    border-top: 1px solid var(--saas-Border-Dividers);
    padding: 12px 24px;
    &-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: 12px;
      gap: 8px 0;
      &-item {
        text-align: center;
        width: 80px;
        height: 76px;
        padding: 6px;
        position: relative;
        cursor: pointer;
        &-icon {
          &-box {
            display: inline-block;
            i {
              font-size: 22px;
              width: 42px;
              height: 22px;
              border-radius: 8px;
              // background-color: rgb(101, 153, 239);
              // color: rgb(101, 153, 239);
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .saas-icon-box {
              width: 42px;
              height: 22px;
              border-radius: 8px;
              // background-color: rgb(101, 153, 239);
              // color: rgb(101, 153, 239);
              display: flex;
              justify-content: center;
              align-items: center;
              svg {
                width: 26px;
                height: 26px;
                // color: #fff;
                top: 0;
              }
            }
          }
        }
        &-name {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          line-clamp: 2;
          overflow: hidden;
          margin-top: 5px;
        }
        &-close {
          position: absolute;
          right: 4px;
          top: 4px;
          color: #ff4255;
          border-radius: 8px;

        }
        &:hover {
          color: #000;
          background-color: #e6f7ff;
          .#{$ns}Quick-launch-body-wrapper-item-name {
            color: rgba(0,0,0,.9);
          }
        }
        &.add-item {
          background-color: inherit;
          line-height: 60px;

          &:hover {
            background-color: inherit;
          }
          .#{$ns}Quick-launch-body-wrapper-item-icon {
            background-color: inherit;
            .icon {
              padding: 6px;
              border: 1px solid var(--saas-Border-Dividers);
              border-radius: 5px;
              color: #a7a7a7;
              background-color: inherit;
            }
          }
        }
        &.placeholder-item {
          padding: 0;
        }
      }
    }
  }
}
.quick-launch-modal {
  .ant-modal-close {
    color: var(--saas-Title-Text);
  }
  .quick-launch-modal-body-search-list {
    display: flex;
    justify-content: flex-start;
    column-gap: 8px;
    flex-wrap: wrap;
    @include media-breakpoint-down(sm) {
      column-gap: 0;
    }
  }
  .ant-modal-header {
    .ant-modal-title {
      font-size: 14px;
      font-weight: 700;
    }
  }
  .ant-modal-body {
    padding: 0;
    background-color: var(--saas-Background-Header);
    color: var(--saas-Title-Text);
  }
  .site-tree-search-value {
    color: #f50;
  }
  &-body {
    display: flex;
    height: calc(70vh - 54px);
    font-size: 14px;
    &-left {
      width: 200px;
      border-right: 1px solid var(--saas-Border-Dividers);
      padding: 12px;
      display: flex;
      flex-direction: column;
      &-title {
        font-weight: 700;
      }
      &-search {
        border: none;
        outline: none;
        margin: 8px 0;
        .ant-input {
          background-color: var(--saas-Background-Header);
          font-size: 13px;
          border: none;
          letter-spacing: 1px;
          &:focus {
            outline: none;
            border: none;
            box-shadow: none;
          }
          &::placeholder {
            color: #c1c2c5;
          }
        }
      }
      &-tree {
        flex: 1;
        overflow-y: auto;
        font-size: 13px;
        .ant-tree {
          background-color: var(--saas-main-bg);
          font-size: 13px;
          color: var(--saas-Title-Text);
          .ant-tree-node-content-wrapper.ant-tree-node-selected {
            background-color: var(--saasTabsBodyHoverBackgroundColor);
          }
          .ant-tree-node-content-wrapper:hover {
            background-color: var(--saasTabsBodyHoverBackgroundColor);
          }
          .ant-tree-iconEle {
            font-size: 24px;
            .icon {
              top: 0;
            }
          }

          .ant-tree-switcher-noop {
            width: 18px;
          }

          .ant-tree-indent {
            width: 0px;
          }
        }
      }
    }
    &-right {
      width: 580px;
      padding: 12px 24px;
      overflow-y: auto;
    }
  }
  .ant-modal-footer {
    background-color: var(--saas-Background-Header);
    .quick-launch-modal-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-left {
        flex: 1;
        @include ellipsis();
        text-align: left;
        margin-right: 150px;
        color: var(--saas-Title-Text);
      }
      &-right {
        button {
          margin-left: 10px;
        }
      }
    }
  }
  .quick-launch-modal-body-group {
    margin-top: 42px;
    // &:first-child {
    //   margin-top: 0;
    // }
    &-title {
      font-weight: 700;
    }
    &-body {
      margin-top: 18px;

      &-container {
        display: flex;
        justify-content: flex-start;
        gap: 20px 8px;
        flex-wrap: wrap;
        @include media-breakpoint-down(sm) {
          column-gap: 0;
        }
      }
    }
  }
  .quick-launch-modal-body-group-item {
    text-align: center;
    font-size: 12px;
    width: 80px;
    height: 76px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    text-align: center;
    @include media-breakpoint-down(sm) {
      width: 33.333333%;
    }
    &-name {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: hidden;
      padding-top: 5px;
    }
    &-icon-box {
      display: flex;
      justify-content: center;
    }
    &-icon {
      svg {
        font-size: 18px;
        width: 42px;
        height: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        // color: rgb(101, 153, 239);
        // background-color: rgb(101, 153, 239);
      }
    }
    &-sel {
      position: absolute;
      top: 0;
      right: 0;
      color: var(--saas-Primary-Color);
    }
    &-unsel {
      position: absolute;
      top: 0;
      right: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid var(--saas-Border-Dividers);
    }
  }
}
@include media-breakpoint-down(sm) {
  .#{$ns}Quick-launch {
    &-header {
      background-color: var(--saas-Background-Header);
      &-title {
        height: 36px;
        line-height: 36px;
      }
    }
    &-body {
      border-radius: 8px;
      padding: 12px;
    }
  }
  .quick-launch-modal {
    .ant-drawer-header {
      display: none; 
    }
    .ant-drawer-body {
      padding: 0;
    }
    .quick-launch-drawer {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: 100%;
      overflow: hidden;
      background-color: var(--saas-main-bg);
      &-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 8px 0;
        padding-right: 46px;
        &-title {
          text-align: center;
          flex: 1;
          font-size: 16px;
        }
        &-close {
          padding: 0 15px;
          .icon-title-left {
            vertical-align: sub;
          }
        }
      }
      &-body {
        flex: 1;
        padding: 0 0 16px 0;
        height: calc(100% - 48px);
        &-top {
          padding: 0 16px;
          border-top: 1px solid var(--saas-border-color);
          height: 58px;
          line-height: 58px;
          .#{$ns}Form-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 0;
            font-size: 15px;
            .#{$ns}Form-label {
              width: 112px;
              margin-bottom: 0;
              font-size: 15px;
              padding: 0 4px;
              color: var(--saas-Placeholder-Text);
            }
            .#{$ns}SelectControl {
              .#{$ns}ResultBox {
                font-size: 15px !important;
              }
            }
          }
        }
        .quick-launch-drawer-body-top-block {
          height: 8px;
          background-color: var(--saas-Background-Header);
        }
        .quick-launch-drawer-header-search {
          border: none;
          outline: none;
          padding: 8px 16px;
          .ant-input {
            background-color: #eee;
            font-size: 14px;
            border: none;
            letter-spacing: 1px;
            border-radius: 4px;
            &:focus {
              outline: none;
              border: none;
              box-shadow: none;
            }
            &::placeholder {
              color: #c1c2c5;
            }
          }
        }
        &-bot {
          height: calc(100% - 59px - 8px - 46px - 48px);
          overflow: hidden;
          display: flex;
          justify-content: space-between;
        }
        &-left {
          width: 100px;
          background-color: var(--saas-Background-Header);
          overflow-y: auto;
          border-radius: 0 8px 8px 0;
          &-list {
            &-item {
              height: 48px;
              font-size: 15px;
              padding: 0 8px;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
              &.active-item {
                color: var(--saas-Primary-Color);
                background-color: var(--saas-main-bg);
              }
            }
          }
        }
        &-right {
          height: 100%;
          width: calc(100% - 100px);
          display: flex;
          flex-direction: column;
          &-content {
            flex: 1;
            overflow-y: auto;
            margin-top: 16px;
            padding: 0 12px;
            .quick-launch-modal-body-group-item {
              .quick-launch-modal-body-group-item-icon {
                svg {
                  height: 28px;
                  font-size: 24px;
                }
              }
            }
          }
        }
        &-footer {
          height: 48px;
          line-height: 48px;
          padding: 0 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 1px solid var(--saas-border-color);
          .ant-btn   {
            background-color: var(--saas-Primary-Color);
          }
        }
      }
    }
  }
}