nav {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  z-index: 100;
  gap: 1em;

  > :first-child {
    align-items: center;
  }

  > .content {
    display: flex;

    & a {
      color: inherit;
    }
  }

  > input[type=checkbox] {
    display: none;
  }
}

@media (max-width:900px) {
  nav {
    > .content {
      position: fixed;
      top: 0;
      left: 100%;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      transition: opacity .3s, top, left 0s .3s;
      flex-direction: column;
      background: var(--color-fg);
      color: var(--color-text);
      opacity: 0;
      z-index: 101;
      gap: inherit;
      padding: inherit;

      > button {
        + :is(button, hr) {
          margin-top: 1em !important;
        }
      }
      hr + button {
        margin-top: 1em !important;
      }
    }

    > .toggle {
      z-index: 102;
      padding: 12px;
      margin: -12px;
      -webkit-tap-highlight-color: transparent;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;
    }
    > .toggle > * {
      width: 18px;
      height: 2px;
      background: var(--color-text);
      transition: all 0.3s;
    }
    > .toggle > *:nth-child(1) {
      margin-bottom: 3px;
    }
    > .toggle > *:nth-child(2) {
      margin-bottom: 3px;
    }

    > input:checked {
      ~ .content {
        left: 0;
        opacity: 1;
        transition: opacity .3s;
      }
      ~ .toggle {

        > * {
          &:nth-child(1) {
            transform: translateY(5px) rotate(45deg);
          }
          &:nth-child(2) {
            transform: scale(0);
          }
          &:nth-child(3) {
            transform: translateY(-5px) rotate(-45deg);
          }
        }
      }
    }
  }
}

@media (min-width: 900px) {
  nav {
    > .toggle {
      display: none;
    }
    > .content {
      align-items: center;
      gap: 1em;
    }
  }

  nav.vertical {
    width: var(--drawer-width);
    height: 100vh;
    flex-direction: column;
    overflow-y: auto;
    float: left;
    position: sticky;
    top: 0;
    align-items: stretch;

    > .content {
      flex-direction: column;
      align-items: initial;
    }

    + * {
      overflow-y: auto;
      height: 100%;
    }
  }
}