@import '@/style/color.less';
.custom-nav {
  position: relative;
  .custom-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    pointer-events: none;
    user-select: none;
  }
  .custom-header {
    height: 64px;
    border-bottom: 1px solid #eaeaea;
    padding: 0 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-left {
      display: flex;
      align-items: center;
      .custom-systole-tab-icon {
        cursor: pointer;
      }
      .custom-web-logo {
        margin-left: 12px;
      }
    }
    .header-right {
      display: flex;
      align-items: center;
      & > * {
        margin: 0 12px;
      }
    }
  }
}
.custom-tabs {
  display: flex;
  height: calc(100vh - 64px);
  box-sizing: border-box;
  .custom-tab-nav {
    width: 240px;
    padding: 12px 0;
    border-right: 1px solid #eaeaea;
    transition: all 0.3s;
    box-sizing: border-box;
    .nav-item {
      height: 48px;
      display: flex;
      align-items: center;
      cursor: pointer;
      white-space: nowrap;
      .default-line,
      .line {
        width: 4px;
        height: 100%;
      }
      .line {
        background: #544fa1;
      }
      .nav-icon {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        transition: all 0.3s;
        svg {
          fill: #a5a5a5;
          margin: 0 6px;
        }
        .nav-text {
          color: #a5a5a5;
          font-weight: 400;
          font-size: 14px;
        }
      }
      .nav-icon-active {
        background: #f9f9f9;
        transition: all 0.3s;
        svg {
          fill: #544fa1;
        }
        .nav-text {
          color: #000000;
        }
      }
    }
    .disable {
      cursor: not-allowed;
    }
  }
  .custom-close-nav {
    width: 40px;
    transition: all 0.3s;
  }
  .custom-content {
    flex: 1;
    overflow-y: auto;
    z-index: 1000;
  }
}
@media (max-device-width: @max-device-width-1) {
  .custom-tabs {
    position: relative;
    .custom-tab-nav {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: 2000;
      user-select: none;
      padding: 0;
      border: none;
      .nav-item-fa {
        width: 50%;
        height: 100%;
        background: #ffffff;
      }
    }
    .mobile-nav-mask {
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2000;
    }
    .custom-close-nav {
      width: 0;
    }
  }
  .header-right {
    .custom-select-language {
      width: auto;
      padding: 0 12px;
      .active-text {
        padding-left: 6px;
      }
    }
  }
}
