.hub-shell-navigation {
  border-right: 1px solid rgba(245, 164, 0, 0.34);
  background:
    linear-gradient(180deg, rgba(245, 164, 0, 0.08), transparent 34%),
    #050505;
}

.hub-shell-navigation .brand {
  border-bottom-color: rgba(245, 164, 0, 0.42);
}

.hub-shell-navigation .brand-logo {
  border: 1px solid rgba(245, 164, 0, 0.42);
  background: #090806;
}

.hub-nav-item {
  position: relative;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.hub-nav-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.hub-nav-item:hover,
.hub-nav-item.active,
.hub-nav-item[aria-current] {
  border-color: rgba(245, 164, 0, 0.52);
  background: rgba(245, 164, 0, 0.14);
  color: #ffffff;
  box-shadow: 0 0 24px rgba(245, 164, 0, 0.12);
}

.hub-nav-item:hover::before,
.hub-nav-item.active::before,
.hub-nav-item[aria-current]::before {
  background: var(--hub-shell-gold);
  box-shadow: 0 0 18px rgba(245, 164, 0, 0.5);
}

.hub-shell-navigation .icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-color: rgba(245, 164, 0, 0.62);
  background: rgba(245, 164, 0, 0.08);
  color: var(--hub-shell-gold-bright);
  box-shadow: 0 0 16px rgba(245, 164, 0, 0.08);
}

.hub-shell-navigation .icon svg {
  width: 82%;
  height: 82%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(245, 164, 0, 0.45));
}

.hub-shell-navigation .sidebar-customer-picker,
.hub-shell-navigation .runtime-status,
.hub-shell-navigation .sidebar-info {
  border-color: rgba(245, 164, 0, 0.34);
  background: rgba(10, 9, 7, 0.72);
}