.portal-child-navigation{
  --portal-child-accent:#35bdff;
  width:100%;
  border-bottom:1px solid rgba(148,163,184,.12);
  background:rgba(5,15,24,.84);
}

.portal-child-navigation-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  width:100%;
  max-width:none;
  padding:.55rem clamp(12px,1.6vw,30px);
  box-sizing:border-box;
}

.portal-child-navigation-title{
  flex:0 0 auto;
  color:#dce8ef;
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.portal-child-navigation nav{
  display:flex;
  align-items:center;
  gap:.3rem;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:thin;
}

.portal-child-navigation a{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex:0 0 auto;
  min-height:34px;
  padding:.35rem .55rem;
  border:0;
  border-radius:7px;
  color:#aebdca;
  background:transparent;
  text-decoration:none;
  font-size:.72rem;
  font-weight:750;
  white-space:nowrap;
}

.portal-child-navigation a:hover,
.portal-child-navigation a.active{
  color:var(--portal-child-accent);
  background:color-mix(
    in srgb,
    var(--portal-child-accent) 9%,
    transparent
  );
}

.portal-child-navigation-icon{
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
}

.portal-child-navigation-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.portal-child-accent-blue{--portal-child-accent:#35bdff}
.portal-child-accent-green{--portal-child-accent:#38d39f}
.portal-child-accent-gold{--portal-child-accent:#e9b949}
.portal-child-accent-red{--portal-child-accent:#ff6b73}

@media(max-width:700px){
  .portal-child-navigation-inner{
    align-items:flex-start;
    flex-direction:column;
    gap:.35rem;
  }

  .portal-child-navigation nav{
    width:100%;
  }
}