.#{$ns}Quick-launch {
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    &-title {
      font-size: 14px;
      font-weight: 700;
    }
  }
  &-body {
    border-top: 1px solid var(--saas-Border-Dividers);
    padding: 16px;
    &-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: 12px;
      gap: 8px;
      &-item {
        text-align: center;
        width: 70px;
        padding: 10px;
        position: relative;
        cursor: pointer;
        &-icon {
          &-box {
            display: inline-block;
            i {
              font-size: 22px;
              width: 42px;
              height: 42px;
              border-radius: 8px;
              background-color: rgb(101, 153, 239);
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .saas-icon-box {
              width: 42px;
              height: 42px;
              border-radius: 8px;
              background-color: rgb(101, 153, 239);
              color: #fff;
              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;
          &: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: 70vh;
    font-size: 14px;
    &-left {
      width: 300px;
      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: #f7f9fc;
          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-Background-Header);
          font-size: 13px;
          color: var(--saas-Title-Text);
          .ant-tree-node-content-wrapper.ant-tree-node-selected {
            color: var(--saas-Primary-Color);
            background-color: #fff;
          }
        }
      }
    }
    &-right {
      width: calc(100% - 300px);
      padding: 12px;
      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 {
        
      }
    }
  }
  .quick-launch-modal-body-group {
    margin-top: 16px;
    &:first-child {
      margin-top: 0;
    }
    &-title {
      font-weight: 700;
    }
    &-body {
      &-container {
        display: flex;
        justify-content: flex-start;
        gap: 24px;
        flex-wrap: wrap;
        @include media-breakpoint-down(sm) {
          column-gap: 0;
        }
      }
    }
  }
  .quick-launch-modal-body-group-item {
    text-align: center;
    font-size: 12px;
    width: 90px;
    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 {
      i {
        font-size: 18px;
        width: 42px;
        height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        color: #fff;
        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: #f7f8fa;
    }
    &-body {
      border-radius: 8px;
    }
  }
  .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;
      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        &-close {
          padding: 0 15px;
          .icon-title-left {
            vertical-align: sub;
          }
        }
        &-search {
          flex: 1;
          border: none;
          outline: none;
          .ant-input {
            background-color: #eee;
            font-size: 14px;
            border: none;
            letter-spacing: 1px;
            &:focus {
              outline: none;
              border: none;
              box-shadow: none;
            }
            &::placeholder {
              color: #c1c2c5;
            }
          }
        }
      }
      &-body {
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding: 0 0 16px 0;
        height: calc(100% - 48px);
        &-left {
          width: 100px;
          background-color: #f7f8fa;
          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);
              }
            }
          }
        }
        &-right {
          height: 100%;
          width: calc(100% - 100px);
          display: flex;
          flex-direction: column;
          &-fields {
            color: #727374;
            font-size: 13px;
            padding: 0 12px;
            &-content {
              padding: 8px;
              border-radius: 8px;
              @include ellipsis();
              background-color: #f7f8fa;
            }
          }
          &-content {
            flex: 1;
            overflow-y: auto;
            margin-top: 16px;
            padding: 0 12px;
          }
        }
      }
    }
  }
}