.#{$ns}Tabs {
  // Aug
  width: 100%;

  &-linksContainer {
    position: relative;

    &-arrow {
      height: 100%;
      display: flex;
      align-items: center;
      top: 0;
      cursor: pointer;
      position: absolute;

      .iconfont {
        font-size: var(--Remark-icon-fontSize);
      }

      &:hover {
        color: var(--icon-onHover-color);
      }
    }

    &-arrow--left {
      left: 4px;
    }

    &-arrow--right {
      right: 4px;
    }

    &-arrow--disabled {
      .iconfont {
        cursor: not-allowed;
        color: var(--Number-handler-onDisabled-color);
      }

      &:hover {
        color: var(--Number-handler-onDisabled-color);
      }
    }

    &-main {
      overflow-y: auto;
      scrollbar-width: none;
      width: 100%;

      &::-webkit-scrollbar {
        display: none;
      }

      >.#{$ns}Tabs-links {
        white-space: nowrap;
        min-width: 100%;
        display: inline-block;
      }
    }

    .Tabs-allItems {
      position: absolute;
      top: 6px;
      right: 15px;
      width: 24px;
      background-color: #fff;
      text-align: center;
      cursor: pointer;

      .emit-icon {
        width: 100%;
        height: 100%;
      }

      &:hover {
        color: #2468f2;
      }
    }
  }

  .#{$ns}Tabs-linksContainer--overflow {
    padding: 0 38px 0 16px !important;
  }

  &-links {
    margin: 0;
    padding: 0;
    border-bottom: var(--Tabs-borderWidth) solid var(--saas-Border-Dividers);
    list-style: none;
    user-select: none;
    @include clearfix();

    >.#{$ns}Tabs-link {
      margin-bottom: calc(var(--Tabs-borderWidth) * -1);
      display: inline-block;
      position: relative;

      >a:first-child {
        font-size: var(--Tabs-linkFontSize);
        outline: none;
        border: var(--Tabs-borderWidth) solid transparent;
        border-top-left-radius: var(--Tabs-borderRadius);
        border-top-right-radius: var(--Tabs-borderRadius);
        color: var(--Tabs-color);
        margin: var(--Tabs-linkMargin);
        padding: var(--Tabs-linkPadding);
        text-decoration: none;
        cursor: pointer;
        display: block;

        @media screen and (min-width:1280px) and (max-width:1440px) {
          font-size: .75rem;
        }

        @media screen and(min-width:1441px) and (max-width:1680px) {
          font-size: .8125rem;
        }
      }

      >.#{$ns}Combo-toolbarBtn {
        position: absolute;
        right: -10px;
        top: -10px;
        z-index: 10;
        display: none;
      }

      &:hover>.#{$ns}Combo-toolbarBtn {
        display: block;
      }

      &:hover>a:first-child,
      >a:first-child:focus {
        border-color: var(--Tabs-onHover-borderColor);
        text-decoration: none;
      }

      &.disabled,
      &.is-disabled {
        cursor: not-allowed;

        >a:first-child {
          color: var(--Tabs-onDisabled-color);
          background: transparent;
          border-color: transparent;
          pointer-events: none;
        }
      }

      &.active>a:first-child,
      &.is-active>a:first-child {
        color: var(--Tabs-onActive-color);
        background: var(--Tabs-onActive-bg);
        border-color: var(--saas-Border-Dividers);
        border-bottom-color: transparent;
      }
    }
  }

  &-content {
    background: var(--saas-main-bg);
    border-style: solid;
    border-width: 0 var(--Tabs-borderWidth) var(--Tabs-borderWidth);
    border-color: var(--saas-Border-Dividers);
  }

  &-pane {
    display: none;
    opacity: 0;
    transition: opacity var(--animation-duration) linear;

    &.is-active {
      display: block;
    }

    &.in {
      opacity: 1;
    }
  }

  &--line {
    //固定标题
    display: flex;
    flex-direction: column;
    overflow-y: hidden;

    >.#{$ns}Tabs-linksContainer>.#{$ns}Tabs-linksContainer-arrow {
      top: -4px;
    }

    >.#{$ns}Tabs-links,
    >.#{$ns}Tabs-linksContainer>.#{$ns}Tabs-linksContainer-main>.#{$ns}Tabs-links {
      border-bottom-color: var(--Tabs--line-borderColor);

      >li {
        >a:first-child {
          border-width: 0 0 var(--Tabs--line-borderWidth) 0;
          padding: var(--Tabs--line-linkPadding);
          margin: var(--Tabs--line-linkMargin);

          &:hover,
          &:focus {
            color: var(--primary);
            background: transparent;
            border-color: transparent;
          }
        }

        &:last-child {
          >a {
            margin: 0;
          }
        }

        &.is-active {

          >a:first-child,
          >a:first-child:hover,
          >a:first-child:focus {
            border-color: var(--Tabs--line-onHover-borderColor);
            color: var(--Tabs--line-onHover-color);
            background: transparent;
          }
        }
      }
    }

    >.#{$ns}Tabs-content {
      border-width: 0;
      padding: var(--Tabs--line-content-padding);
      background: var(--Tabs--line-content-bg);
      flex: 1;
      overflow-y: auto;
    }
  }

  &--card {
    >.#{$ns}Tabs-linksContainer {
      background: var(--Tabs--card-bg);
    }

    >.#{$ns}Tabs-links,
    >.#{$ns}Tabs-linksContainer>.#{$ns}Tabs-linksContainer-main>.#{$ns}Tabs-links {
      padding: var(--Tabs--card-padding);
      background: var(--Tabs--card-bg);
      border-top: px2rem(1px) solid var(--Tabs--card-borderTopColor);

      >li {
        &.is-active {

          >a:first-child,
          >a:first-child:hover,
          >a:first-child:focus {
            border-color: var(--Tabs--card-onActive-borderColor);
            color: var(--primary);
            border-bottom-color: var(--Tabs--card-onActive-bg);
            background: var(--Tabs--card-onActive-bg);
          }
        }

        >a:first-child {
          padding: var(--Tabs--card-linkPadding);
          margin: var(--Tabs--card-linkMargin);

          &:hover,
          &:focus {
            color: #666;
            background: var(--Tabs--card-onActive-bg);
            border-bottom-color: transparent;
          }
        }
      }
    }

    >.#{$ns}Tabs-content {
      border-width: 0;
    }
  }

  &--radio {
    >.#{$ns}Tabs-linksContainer>.#{$ns}Tabs-linksContainer-arrow {
      top: -4px;
    }

    >.#{$ns}Tabs-links,
    >.#{$ns}Tabs-linksContainer>.#{$ns}Tabs-linksContainer-main>.#{$ns}Tabs-links {
      border: 0;
      margin-bottom: px2rem(10px);

      >li {
        margin: 0;

        >a:first-child {
          border-width: px2rem(1px);
          border-color: var(--Tabs-borderColor);
          font-size: var(--fontSizeSm);
          text-align: center;
          margin: 0;
          padding: 0 px2rem(10px);
          min-width: 68px;
          height: px2rem(30px);
          line-height: px2rem(30px);
          border-radius: 0;
          background: var(--Tabs--radio-bg);

          &:hover,
          &:focus {
            color: var(--primary);
          }
        }

        &.is-active {

          >a:first-child,
          >a:first-child:hover,
          >a:first-child:focus {
            color: var(--Tabs--radio-bg);
            background: var(--primary);
            border-color: var(--primary);
            position: relative;
            z-index: 1;
          }
        }
      }

      >li+li {
        margin-left: -1px;
      }
    }

    >.#{$ns}Tabs-content {
      border-top: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
    }
  }

  // todo 第一个选中，有一像素的空隙待修复。
  // 不带眼镜应该看不出来。
  &--tiled {

    >.#{$ns}Tabs-links,
    >.#{$ns}Tabs-linksContainer>.#{$ns}Tabs-linksContainer-main>.#{$ns}Tabs-links {
      width: 100%;
      display: flex;
      flex-direction: row;
      padding-left: var(--Tabs-borderWidth);
      border-bottom: 0;

      >li {
        flex-grow: 1;
        text-align: center;
        margin: 0 0 0 calc(var(--Tabs-borderWidth) * -1);

        >a:first-child {
          margin: 0;
          border-radius: 0;
          border-style: solid;
          border-color: var(--Tabs-borderColor);
          border-width: var(--Tabs-borderWidth);

          &:hover,
          &:focus {
            position: relative;
            z-index: 1;
            border-color: var(--Tabs-onActive-borderColor);
            color: var(--primary);
          }
        }

        &.is-active {

          >a:first-child,
          >a:first-child:hover,
          >a:first-child:focus {
            cursor: default;
            color: var(--primary);
            border-color: var(--Tabs-borderColor);
            border-top-color: var(--primary);
            border-bottom-color: transparent;
          }
        }
      }
    }
  }

  &--vertical {
    display: flex;
    min-height: px2rem(200px);
    border: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
    border-radius: 0;
    height: 100%;
    position: relative;

    >.#{$ns}Tabs-line {
      width: 1px;
      position: relative;
      background-color: white;

      .collpase {
        position: absolute;
        z-index: 8;
        top: 0;
        bottom: 0;
        width: 10px;
        height: 100%;
        left: -5px;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        cursor: ew-resize;

        .left {
          cursor: pointer;
          position: absolute;
          top: 50%;
          right: 4px;
          padding: 1px;
          color: rgba(0, 0, 0, 0.4);
        }

        .right {
          cursor: pointer;
          position: absolute;
          top: 50%;
          left: 4px;
          padding: 1px;
          color: rgba(0, 0, 0, 0.4);
        }

        .left-hovered {
          border: 1px solid #3574EE;
          border-radius: 8px 0 0 8px;
          border-right: none;
          font-size: 13px;
        }

        .right-hovered {
          border: 1px solid #3574EE;
          border-radius: 0 8px 8px 0;
          border-left: none;
          font-size: 13px;
        }
      }
    }

    >.#{$ns}Tabs-links {
      width: 160px;
      background: var(--saas-main-bg);
      border: none;
      border-right: 1px solid var(--saas-Border-Dividers);
      overflow-y: scroll;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      transition: width .3s;

      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        background-color: #d2d2d3;
      }

      .#{$ns}Tabs-links-befote {
        width: 100%;
      }

      .tablinks-collpase {
        position: absolute;
        top: 200px;
        right: 0;
        width: 20px;
        border-radius: 7px 0px 0px 7px;
        background-color: #eee;
        z-index: 5;
        font-size: 12px;
        color: #666;
        text-align: center;
        letter-spacing: 3px;

        .anticon {
          margin-bottom: 4px;
        }

        padding: 4px;
        cursor: pointer;
        box-shadow: -2px 3px 4px 0 #aaa;
        white-space: normal;

        &.closed {
          left: 0;
          border-radius: 0 7px 7px 0;
          box-shadow: 2px 3px 4px 0 #aaa;
        }
      }

      .#{$ns}Tabs--slider {
        position: absolute;
        right: 0;
        top: 0;
        cursor: ew-resize;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 10px;
        font-weight: 600;
        width: 8px;
        height: 100%;
        border-radius: 2px;
        border: 0px;
        line-height: 1.4;
        text-align: center;
        user-select: none;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        // box-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
        z-index: 3;
        background-color: var(--saas-main-bg);

        svg {
          color: #000;
          font-size: 19px;
        }

        .#{$ns}Tabs--sliders {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background-color: var(--saas-main-bg);
        }
      }

      .#{$ns}Tabs--slider.slider-closed {
        background-color: #fff;
        cursor: default;

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

      >li {
        margin: 0 0 0 -1px;
        display: block;

        >a:first-child {
          border-color: transparent;
          border-radius: 0;
          border-width: var(--Tabs--vertical-onActive-borderWidth);
          margin: 0;

          &:hover,
          &:focus {
            color: var(--primary);
            border-color: transparent;
          }
        }

        &.is-active {

          >a:first-child,
          >a:first-child:hover,
          >a:first-child:focus {
            color: var(--Tabs--vertical-onActive-color);
            background: var(--Tabs--vertical-onActive-bg);
            border-color: var(--Tabs--vertical-onActive-border);
          }
        }
      }
    }

    >.#{$ns}Tabs-content {
      border: none;
      overflow-x: auto;
      flex: 1;

      >.#{$ns}Tabs-pane {
        height: 100%;
      }
    }
  }

  &--chrome {
    >.#{$ns}Tabs-links {
      background: var(--Tabs--chrome-bg);
      border-bottom: 0;
      padding: 0 px2rem(10px);
      padding-top: px2rem(8px);
      display: flex;

      >li {
        position: relative;
        margin-bottom: 0;
        white-space: nowrap;
        min-width: 0;
        max-width: px2rem(250px);
        padding: px2rem(7px) px2rem(20px) px2rem(6px);
        cursor: pointer;
        flex: 1;

        >a:first-child {
          background: none;
          border: none;
          position: relative;
          z-index: 5;
          overflow: hidden;
          padding: 0;
        }

        &.is-active {

          >a:first-child,
          >a:first-child:hover,
          >a:first-child:focus {
            background: none;
            border: none;
          }

          &:after {
            display: none;
          }
        }

        &:after {
          content: '';
          width: 1px;
          height: calc(100% - var(--Tabs--chrome-radius-size) * 2);
          position: absolute;
          right: -2px;
          background: var(--Tabs--chrome-right-boder-color);
          top: var(--Tabs--chrome-radius-size)
        }

        &:hover {
          .chrome-tab-background {
            z-index: 3;
            display: block;
            background-color: var(--Tabs--chrome-onHover-bg);
          }

          .chrome-tab-background>svg {
            fill: var(--Tabs--chrome-onHover-bg);
          }

          &:after {
            display: none;
          }
        }

        &.is-active {
          .chrome-tab-background {
            display: block;
            background-color: var(--Tabs-onActive-bg);
          }

          .chrome-tab-background>svg {
            fill: var(--Tabs-onActive-bg);
          }
        }
      }
    }

    .chrome-tab-background {
      display: none;
      position: absolute;
      z-index: 4;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      border-radius: var(--Tabs--chrome-radius-size) var(--Tabs--chrome-radius-size) 0 0;

      >svg {
        width: var(--Tabs--chrome-radius-size);
        height: var(--Tabs--chrome-radius-size);
        bottom: 0;
        position: absolute;
      }

      >.chrome-tab-background--right {
        right: calc(var(--Tabs--chrome-radius-size) * -1);
      }

      >.chrome-tab-background--left {
        left: calc(var(--Tabs--chrome-radius-size) * -1);
      }
    }
  }

  &-toolbar {
    display: inline-block;
    float: right;
    padding-top: var(--gap-xs);
  }
}

.#{$ns}Tabs.#{$ns}Tabs--content-tiled {
  .#{$ns}Tabs-pane {
    display: block;
    opacity: 1;
    border-bottom: 1px solid var(--saas-Border-Dividers);
    @include media-breakpoint-up(sm) {
      .#{$ns}Form--inline.antd-Form-rectangle {
        background-color: var(--saas-main-bg);
        padding-left: 0;
        border-bottom: 0;
      }
      .#{$ns}Table {
        padding: 0;
      }
    }
    .#{$ns}Tabs-pane-title {
      font-weight: bolder;
      font-size: 18px;
      height: 48px;
      line-height: 48px;
      padding-left: 8px;
    }
  }

  .#{$ns}Tabs-pane:last-child {
    border-bottom: none;
  }

  .#{$ns}Tabs-linksContainer,
  .#{$ns}Tabs-links {
    display: none;
  }
}

.#{$ns}Tabs.#{$ns}Tabs--line.#{$ns}Combination {
  width: auto;
  height: 100%;
  background: #f7f9fc;

  >.#{$ns}Tabs-linksContainer {
    padding: 0px;
    background-color: var(--saas-main-bg);
    border-bottom: 1px solid var(--saas-Border-Dividers);

    .#{$ns}Tabs-linksContainer-arrow--right,
    .#{$ns}Tabs-linksContainer-arrow--left {
      top: 0;
    }

    .#{$ns}Tabs-linksContainer-main {

      .#{$ns}Tabs-links {
        border: none;

        .#{$ns}Tabs-link {
          a {
            display: flex;
            align-items: center;
            margin: 0 20px;
            padding: 0;
            height: 32px;
            font-size: 13px;
          }

          &:hover {
            a {
              // color: #31373d;
              border-color: transparent;
            }
          }
        }

        .#{$ns}Tabs-link.is-active {
          a {
            // color: #31373d;
            border: none;
          }

          &::before {
            position: absolute;
            content: "";
            border-bottom: 2px;
            width: 20px;
            bottom: 0;
            height: 2px;
            background-color: var(--saas-Primary-Color);
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
  }

  .#{$ns}Tabs-content {
    background: var(--saas-main-bg);

    .#{$ns}Combination {
      margin: 0;
    }
  }

  .#{$ns}Grid--combination {
    margin: 0;
  }
}

.#{$ns}Tabs.#{$ns}Tabs--vertical.#{$ns}Combination {

  width: auto;
  background: var(--saas-Background-Header);
  border: none;

  >.#{$ns}Tabs-links {
    overflow-y: hidden;
    width: 160px;
    position: relative;

    &::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }

    .#{$ns}Tabs-links-input {
      padding: 0 8px;
      margin: 8px 0 6px;

      .ant-input-affix-wrapper {
        border-radius: 4px;
        background-color: #f7f9fc;
      }
    }

    .#{$ns}Tabs-link {
      overflow: hidden;
      padding: 4px 8px 4px 0;

      a {
        color: var(--saas-font-size-black);
        border: none;
        padding: 6px 0px 6px 16px;
        border-radius: 0;
        overflow: hidden;
        word-wrap: break-word;
        font-size: 13px;
        text-decoration: none;
      }

      &:hover {
        a {
          color: var(--saas-font-size-black);
          background-color: var(--Tree-item-onHover-bg);
        }
      }
    }

    .#{$ns}Tabs-link.is-active {
      a {
        color: var(--saas-font-size-black);
        background-color: var(--Tree-item-onHover-bg);
        list-style: none;

        &::before {
          content: "";
          position: absolute;
          height: 20px;
          border-right: 3px solid var(--saas-Primary-Color);
          transform: translateY(-50%);
          top: 50%;
          left: 8px;
        }
      }
    }

    .#{$ns}Tabs-links-befote {
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;

      &::-webkit-scrollbar {
        width: 2px;
        height: 2px;
      }

      .#{$ns}Tabs-link {
        position: relative;
        display: block;

        a {
          display: block;
        }
      }
    }
  }

  .#{$ns}Tabs-content {
    background: var(--saas-main-bg);

    >.#{$ns}Tabs-pane {
      >.#{$ns}Service {
        >.#{$ns}Service-body {
          >.#{$ns}Tabs--content-tiled {
            margin: 0;

            >.#{$ns}Tabs-content {
              background-color: var(--saas-main-bg) !important;
            }
          }
        }
      }
    }

    .#{$ns}Combination {
      margin: 0;
    }
  }

  .#{$ns}Grid--combination {
    margin: 0;
  }
}

.#{$ns}Tabs.#{$ns}Tabs--content-tiled.#{$ns}Combination {
  width: auto;
  border: none;

  >.#{$ns}Tabs-content {
    .#{$ns}Tabs-pane {
      margin-bottom: 8px;
      &:last-child {
        margin-bottom: 0;
      }
      &:first-child {
        margin-top: 8px;
      }
      .#{$ns}Tabs-pane-title {
        font-size: 14px;
        display: flex;
        align-items: center;
        line-height: normal;
        height: auto;
        padding-left: 0;

        >span {
          min-width: 8.75rem;
          padding: 4px 0px 4px 16px;
          position: relative;
          display: inline-block;
          background-color: var(--saas-tabs-title-color);
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;

          &::before {
            content: "";
            position: absolute;
            height: 20px;
            border-right: 3px solid var(--saas-Primary-Color);
            transform: translateY(-50%);
            top: 50%;
            left: 8px;
          }
        }

        .icon {
          margin-left: 4px;
          color: rgba(0, 0, 0, 0.45);
          cursor: pointer;
          &:hover {
            color: #3574ee;
          }
        }
      }

      .#{$ns}Service {
        padding: 0px 8px;

        .#{$ns}Table-horizontal {
          .#{$ns}Mobile-header-toolbar-wrapper {
            border: 0;
          }
        }
      }
    }

    .#{$ns}Combination {
      margin: 0;
    }
  }

  .#{$ns}Grid--combination {
    margin: 0;
  }
}

@include media-breakpoint-down(sm) {

  .#{$ns}Tabs.#{$ns}Tabs--line,
  .#{$ns}Tabs.#{$ns}Tabs--line.#{$ns}Combination {
    border-top: 8px solid var(--them-bg-color);

    .#{$ns}Tabs-linksContainer {
      border-bottom: 1px solid var(--saas-Border-Dividers);
      margin-bottom: 0;

      .#{$ns}Tabs-linksContainer-main {
        .#{$ns}Tabs-links {
          background-color: var(--saas-main-bg);

          .#{$ns}Tabs-link {
            a {
              font-size: 15px;
              font-weight: 500;
            }
          }

          .#{$ns}Tabs-link.is-active {
            a {
              color: var(--saas-Primary-Color);
            }
          }
        }
      }
    }

    .#{$ns}Tabs-content {
      padding: 0;

      .#{$ns}Tabs-pane {
        padding: 0;
      }

      .#{$ns}Tabs-pane.is-active {
        .#{$ns}Table.#{$ns}Table-horizontal {
          .#{$ns}Mobile-header-toolbar-wrapper {
            border-top: none;
          }
        }

        .#{$ns}Table.#{$ns}Table-vertical {
          .#{$ns}Mobile-header-toolbar-wrapper {
            margin-top: 0;
          }
        }
      }
    }
  }

  .#{$ns}Tabs.#{$ns}Tabs--line.#{$ns}Combination {
    margin: 0;
  }

  .#{$ns}Tabs.#{$ns}Tabs--vertical.#{$ns}Combination {
    margin: 0;
  }

  .#{$ns}Tabs.#{$ns}Tabs--content-tiled.#{$ns}Combination {
    margin: 0;
    height: 100%;
    overflow: auto;
  }

  .#{$ns}Tabs.#{$ns}Tabs--content-tiled {
    height: 100%;
    overflow-y: auto;

    .#{$ns}Tabs-content {
      .#{$ns}Table {
        .#{$ns}Table-contentWrap {
          .#{$ns}Table-content {
            overscroll-behavior: auto;
          }
        }
      }
    }
  }
}

/* Aug移动端样式 */
@include media-breakpoint-down(sm) {
  .#{$ns}Tabs {

    &-pane {
      height: 100%;
    }

    .tabs-reload-tools {
      position: fixed;
      right: 34px;
      top: -5px;
      background: #fff;
      height: 37px;
      line-height: 37px;
      color: #000;
      font-size: 16px;
    }

    .tabs-reload-tools-shottcut {
      right: 34px;
    }

    .#{$ns}Tabs-linksContainer {
      // position: fixed;
      // z-index: 1000;
      // top: 0;
      // left: 0;
      top: unset;
      width: 100%;
      background: var(--saas-main-bg);
      padding: 8px 0 0;
    }

    &-links {
      padding: 0 var(--Page-body-padding);
    }
  }

  .#{$ns}Tabs--line {
    &>.#{$ns}Tabs-content {
      overflow-y: hidden;

      .#{$ns}Tabs-pane {
        overflow-y: auto;
      }
    }
  }
}

.#{$ns}Modal-content {
  .#{$ns}Tabs {
    &--line {
      overflow-y: initial;

      >.#{$ns}Tabs-content {
        overflow-y: initial;
      }
    }
  }
}

.tabs-content-tiled-actions {
  .#{$ns}PopUp-inner {
    background: #f6f6f6;
  }

  .tabs-reload-tool {
    .toolbar-body {
      border-bottom: 1px solid #eee;

      .toolbar-item-row {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 12px;

        .toolbar-item {
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;

          .icon-bar {
            background-color: #fff;
            padding: 7px 10px;
            border-radius: 10px;

            .icon {
              font-size: 22px;
            }
          }

          .icon-title {
            font-size: 12px;
            color: #777;
            text-align: center;
            letter-spacing: 1px;
            margin-top: 3px;
            font-weight: bold;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
          }
        }

        &.toolbar-cancel {
          display: block;
          text-align: center;

          >div {
            color: #000;
            letter-spacing: 1px;
          }
        }
      }
    }
  }
}

.overlay-allItems {
  width: 300px;

  .ant-dropdown-menu.ant-dropdown-menu-root {
    padding: 0;
    min-height: 300px;
    max-height: 50vh;
    overflow-y: auto;
  }

  .ant-dropdown-menu-title-content {
    display: block;
    max-width: 280px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .filter-wrapper {
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  }
}