// $activeColor: rgba(255, 255, 255, 0.12);
$activeColor: var(--el-color-primary);
#topBar {
  width: 100%;
  background-color: #1d2b3a;
  color: #adb0b8;
  height: 56px;
  line-height: 56px;
  border-bottom: none;
  z-index: 200;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
    .logo {
      cursor: pointer;
      display: flex;
      align-items: center;
      margin-left: 20px;
      margin-right: 20px;
    }
  }

  .menus {
    background-color: transparent;
    border: none;
    height: 32px;
    align-items: center;
    display: inline-flex;
    gap: 4px;

    .el-menu-item {
      border: none;
      font-size: 12px;
      padding: 6px 12px;
      color: rgba(255, 255, 255, 0.8);
      &:hover {
        color: #fff;
        border-radius: 4px;
        background-color: transparent;
      }

      .expand-ico {
        margin-left: 5px;
        font-size: 18px;
        transition: 0.7s all;
      }

      .expand-ico-rotate {
        transform: rotate(180deg);
      }
    }

    .is-active {
      color: #fff;
      border-radius: 4px;
      background: $activeColor;
      &:hover {
        background: $activeColor;
      }
    }

    .el-sub-menu {
      font-size: 12px;
      height: 32px;
      border-radius: 4px;
      // position: relative;
      // top: 1px;
      .el-sub-menu__title {
        border: none;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        &:hover {
          color: #fff!important;
          border-radius: 4px;
          background-color: transparent!important;
        }
      }
    }
    
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;

    .searchBar {
      width: 164px;
      height: 32px;
      position: relative;
      .el-input {
        position: absolute;
        top: 0;
        input::-webkit-input-placeholder {
          font-size: 12px;
        }
      }
      .el-input__wrapper {
        background: rgba(255, 255, 255, 0.06) !important;
        border: none !important;
        box-shadow: none !important;

        .el-input__inner {
          border: none !important;
          color: #fff;
        }
      }
    }

    .tools {
      margin-right: 37px;
      display: flex;
      gap: 24px;

      &-item {
        display: flex;
        align-items: center;
        svg {
          font-size: 26px;
          cursor: pointer;
          padding: 5px;
          border-radius: 4px;
          &:hover {
            background: $activeColor;
          }
        }
      }
    }

    .line {
      margin: 0 20px;
    }

    .bell {
      margin-left: 35px;
      font-size: 16px;
    }

    .user {
      cursor: pointer;
      color: rgba(255, 255, 255, 0.8);
      font-size: 12px;
      margin-right: 21px;
      display: flex;
      align-items: center;
      .user-icon {
        height: 24px;
        width: 24px;
        // transform: scale(4.5);
        // position: relative;
        // top: 2px;
        // left: -5px;
      }

      // &:hover {
      //   color: #fff;
      //   background: rgba($color: #fff, $alpha: 0.1);
      // }
    }
  }
}

.user-menu {
  &-item {
    display: flex;
    padding: 10px 8px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 6px;
    &:hover {
      background: #f5f7fa;
    }
    .title {
      color: #324558;
      font-family: 'PingFang SC';
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px; /* 166.667% */
    }
  }
}
