
.navigation-container {
  overflow-x: auto; /* 水平方向上的滚动条 */
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-left: 2rem;
  white-space: nowrap; /* 防止菜单项换行 */
}

/* 调整滚动条大小 */
::-webkit-scrollbar {
  width: 8px; /* 调整滚动条的宽度 */
  height: 8px; /* 调整滚动条的高度 */
}

/* 调整滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

/* 调整滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

/* 当鼠标悬停在滑块上时，改变滑块的颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 调整菜单与滚动条的间距 */
.navigation-container ul {
  padding-right: 12px; /* 增加右侧内边距以增加间距 */
}

.dropdown-submenu {
  display: inline-block; /* 使菜单项在一行内显示 */
}

.scrollable-menu ul {
  padding-right: 20px; /* 右侧内边距，根据需要调整 */
}

[nz-button] {
  margin-right: 8px;
  margin-bottom: 12px;
}

.nz-button-group [nz-button] {
  margin-right: 0;
}

ul {
  display: inline-flex;
  width: max-content;
  margin-right: auto;
  margin-bottom: 10px;
  margin-bottom: 0;

  li {
    display: inline-flex;

    a {
      clear: both;
      display: block;
      width: 100%;
      min-width: 4rem;
      margin-right: 1rem;
      padding: 0.5rem 1.5rem;
      font-weight: 600;
      color: #74FAFB;
      text-align: inherit;
      white-space: nowrap;
      background-color: #054254;
      border: 0 solid red;
      border-color: #74FAFB;

      &:hover,
      &:active,
      &.active {
        color: #000;
        text-decoration: none;
        background-color: #fff;
      }
    }

    .dropdown-menu {
      color: #fff;
      background-color: #337AB7;
    }
  }

  >.dropdown-submenu {
    position: relative;

    .dropdown-menu {
      position: absolute;
      top: 2rem;
      margin-top: 0;
      margin-left: 0;
    }

    &:hover>.dropdown-menu {
      display: block;
    }

    .dropdown-submenu {
      position: relative;

      >a {
        display: block;

        &::after {
          content: "\f054";
          position: absolute;
          right: .5rem;
        }
      }

      >.dropdown-menu {
        top: 0;
        bottom: unset;
        left: 100%;
        margin-top: 0;
        margin-left: 0;
      }

      &:hover>.dropdown-menu {
        display: block;
      }
    }
  }

  &.dev-mode {
    a:hover,
    a:active,
    a.active {
      color: #fff;
      background-color: #DC3545;
    }
  }
}