.nav-component {
  margin: 0.35em 0;
}

.nav-link {
  text-decoration: none !important;

  & div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3em;

    & svg {
      color: hsl(var(--text));
    }
  }
}

.nav-item {
  display: block;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  padding: 0.4em;

  &:hover {
    background-color: hsl(var(--nav-hovered-bkg));
  }

  &.nav-current {
    color: hsl(var(--nav-selected-text));
    background-color: hsl(var(--nav-selected-bkg));

    &:hover {
      background-color: hsl(var(--nav-selected-hovered-bkg));
    }
  }
}

.nav-collapsible {
  overflow: hidden;

  & > summary {
    user-select: none;

    & > div {
      & > .nav-collapse-marker,
      a {
        transition: background-color 0.2s ease;
      }

      & > .nav-collapse-marker {
        border-radius: 0 6px 6px 0;
        padding: 0.4em 0.8em;
        display: flex;
      }

      & > a {
        border-radius: 6px 0 0 6px;
        padding: 0.4em;
        flex-grow: 1;
      }

      &:hover {
        & > .nav-collapse-marker,
        a {
          background-color: hsl(var(--nav-hovered-bkg));

          &:not(:hover) {
            background-color: hsl(var(--nav-hovered-weak-bkg));
          }
        }
      }

      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 0.1em;

      & svg {
        transition: transform 0.3s ease;
        font-size: 1.1em;
      }
    }
  }

  & .accordion-container > div {
    padding-left: 1.3em;

    & p:first-child {
      padding-top: 0;
      margin-top: 0;
    }

    & :last-child {
      margin-bottom: 0rem;
    }
  }
}

.nav-collapsible.nav-current {
  & > summary > div {
    & > a {
      color: hsl(var(--nav-selected-text));
    }

    & > .nav-collapse-marker,
    a {
      background-color: hsl(var(--nav-selected-bkg));
    }

    &:hover {
      & > .nav-collapse-marker,
      a {
        background-color: hsl(var(--nav-selected-hovered-bkg));

        &:not(:hover) {
          background-color: hsl(var(--nav-selected-bkg));
        }
      }
    }
  }
}

.nav-collapsible[open]:not(.closing) > summary > div svg {
  transform: rotate(180deg);
}