
.navbar-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 64px;
  background: #001529;
  padding: 0 24px;

  .navbar-logo {
    margin-right: 24px;
    h1 {
      margin: 0;
      color: #fff;
      font-weight: 600;
      font-size: 14px;
    }

    a {
      display: flex;
      align-items: center;
      text-decoration: none;
    }
  }

  ::ng-deep .ant-menu-horizontal {
    flex: 1;
    border-bottom: none;
    background: transparent;
    line-height: 64px;

    .ant-menu-item, .ant-menu-submenu {
      color: rgba(255, 255, 255, 0.65);
      
      &:hover {
        color: #fff;
      }

      .anticon {
        margin-right: 8px;
      }
    }

    .ant-menu-item-selected {
      color: #fff;
    }
  }

  .navbar-right {
    display: flex;
    align-items: center;
    gap: 16px;

    .version-info {
      color: rgba(255, 255, 255, 0.65);
      font-size: 12px;
    }

    .ant-btn {
      height: 40px;

      &[nz-button] {
        color: rgba(255, 255, 255, 0.65);

        &:hover {
          color: #fff;
          background: rgba(255, 255, 255, 0.08);
        }
      }
    }

    .user-dropdown-trigger {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 0 4px;

      .anticon {
        margin-right: 8px;

        &:last-child {
          margin-right: 0;
          margin-left: 8px;
          font-size: 12px;
        }
      }
    }

    .ant-alert {
      margin: 0;
      padding: 4px 8px;
    }
  }
}