#app > aside {
  h3:first-child {
    margin-top: 0;
  }
  h3.sidebar-title {
    margin-bottom: 0.25rem;
    font-size: var(--size-medium);
    font-weight: 400;
    color: var(--side-title);
    &:not(:first-child) {
      margin-top: 1.25rem;
    }
  }
  section {
    margin-bottom: 0.5rem;
    h3 {
      font-size: var(--size-small);
      margin-bottom: 0.25rem;
    }
  }
  .details .summary {
    color: var(--menu-head);
    transition: all var(--unit-transition);
    &:hover {
      color: var(--menu-head-hover);
    }
  }
  div.menu {
    border: 0;
    font-size: 0.9em;
    margin-bottom: 0;
    summary {
      margin-bottom: 0rem;
      color: var(--menu-head);
      &:hover {
        color: var(--menu-head-hover);
      }
    }
    /*
    &.toc {
      border-left: 2px solid var(--menu-active-back);
      border-top: none;
      background-color: var(--menu-toc-back);
      margin-bottom: 0.25em !important;
      .toc-section h4:first-child {
        margin-top: 0;
        padding-top: 0.5em;
      }
      .toc-section h4:last-child {
        margin-bottom: 0;
        padding-bottom: 0.5em;
      }
    }
    */
    .item {
      display: block;
      // font-size: 0.9em;
      line-height: 1.25;
      margin-bottom: 0.125em;
      padding: 0.25rem 0.5rem;
      color: var(--menu-item-text);
      background-color: var(--menu-item-back);
      text-decoration: none;
      border-radius: 0;
      border: none;
      cursor: pointer;
      transition: all var(--unit-transition);
      &:first-of-type {
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
      }
      &:last-of-type {
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
      }
      &:hover {
        color: var(--menu-hover-text);
        background-color: var(--menu-hover-back);
      }
      &.active {
        color: var(--menu-active-text);
        background-color: var(--menu-active-back);
      }
      &.code {
        font-family: var(--font-mono);
      }
    }
    & > div.menu {
      padding-left: 0.5rem;
      margin: 0.25rem 0;
      h4 {
        color: var(--submenu-head);
        font-size: 1.1em;
        font-weight: 500;
        margin: 0.5rem 0 0.125rem 0.25rem;
        transition: all var(--unit-transition);
        &:hover {
          cursor: pointer;
          color: var(--submenu-hover-head);
        }
        &:last-child {
          margin-bottom: 0.5rem;
        }
      }
      .item {
        color: var(--submenu-text);
        background-color: var(--submenu-back);
        padding-left: 0.75rem;
        &:hover {
          color: var(--submenu-hover-text);
          background-color: var(--submenu-hover-back);
          cursor: pointer;
        }
        &:active {
          color: var(--menu-active-text);
          background-color: var(--menu-active-back);
        }
      }
      .item * {
        color: var(--submenu-text);
      }
      .item:hover * {
        color: var(--submenu-hover-text);
      }
      .item:active * {
        color: var(--menu-active-text);
      }
    }
  }
}

#app > aside.gradients {
  div.menu .item {
    background: linear-gradient(
      160deg in hsl,
      var(--menu-item-back),
      var(--side-back)
    );
    &:hover {
      background: linear-gradient(
        160deg in hsl,
        var(--menu-hover-back),
        var(--side-back)
      );
    }
    &.active {
      background: linear-gradient(
        160deg in hsl,
        var(--menu-active-back),
        var(--side-back)
      );
    }
  }
}