.top__menu__item {
  position: relative;
}

.top__sub-menu__list {
  :hover > &,
  :focus-within > & {
    display: block;
  }
  position: absolute;
  left: calc(var(--2) * -1);
  min-width: calc(100%);
  background: var(--color-header-bg);
  color: var(--color-header-fg);
  z-index: 1;
  text-align: left;
  padding: var(--1) var(--2);
  margin: var(--1) 0 0;
  box-shadow: 0px 0px 3px 0px
    color-mix(in hsl, var(--color-header-fg), transparent 75%);
  &::before {
    content: '';
    display: block;
    inset: auto 0 100% 0;
    position: absolute;
    height: var(--1);
    padding-top: 4px;
  }
  border-radius: var(--curvynes);
  :last-child > & {
    left: auto;
    right: calc(var(--2) * -1);
  }
}

.top__sub-menu__item {
  display: block;
}

.top__sub-menu__link {
  text-decoration: none;
  display: block;
  padding: 0.35rem 0;
  white-space: nowrap;
}

.top__link,
.top__sub-menu__link {
  transition: opacity 0.25s 0.1s;
  &:focus {
    color: inherit;
  }
  &:focus-visible {
    outline: 2px solid var(--color-accent-bg);
    outline-offset: 0.5rem;
  }
}
.top__link--faded,
.top__sub-menu__link--faded {
  opacity: 0.5;
}

.top__sub-menu__link--active {
  text-decoration: underline;
  text-underline-offset: 0.5em;
}