.root {
  z-index: 1;
  pointer-events: none;

  &::before {
    @apply absolute w-full h-[200%] -translate-y-full;
    content: "";
    z-index: -1;

    @media screen(lg) {
      @apply hidden;
    }
  }

  & ~ .root {
    @apply !bg-transparent !border-0;
  }

  &.right {
    @apply flex-row-reverse;

    .sidebar {
      transform: translateX(100vw);
      right: 0;
      left: auto;

      @media screen(lg) {
        transform: none;
      }
    }
  }
}

.root ~ article {
  @apply mt-16;

  @media screen(lg) {
    @apply ml-16 mr-0 mt-0;
  }

  &:last-child {
    @media screen(lg) {
      @apply mr-16;
    }
  }
}

article ~ .root {
  @media screen(lg) {
    @apply ml-16;
  }
}

.toggle {
  opacity: 0;
  height: 0;
  pointer-events: auto;

  &:checked {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;

    & + .sidebar {
      transform: translateX(0);

      & + .backdrop {
        opacity: 1;

        @media screen(lg) {
          display: none;
        }
      }
    }
  }

  @media screen(lg) {
    display: none;
  }
}

.label {
  @apply absolute inline-flex cursor-pointer pointer-events-auto;

  & label {
    @apply inline-flex items-center p-4 text-xs cursor-pointer;

    & svg {
      @apply inline-block h-4 w-4 mr-1;
    }
  }

  @media screen(lg) {
    display: none;
  }
}

.sidebar {
  transform: translateX(-100vw);
  transition: transform 0.5s ease-in-out;
  justify-items: left;
  padding: 4rem 1rem 1rem 1rem;
  width: 100%;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;

  @media (prefers-reduced-motion) {
    view-transition-name: none;
  }

  position: fixed;
  max-width: min-content;
  top: 0;
  bottom: 0;
  min-height: 100%;
  box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.5);

  @media screen(lg) {
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: calc(100vh - 48px);
    margin-top: -1rem;
    height: auto;
    box-shadow: none;
    transform: none;
    padding-top: 1rem;
    padding-right: 2rem;
    @apply !bg-transparent dark:!bg-transparent;
  }

  & + .backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
  }

  & nav {
    display: flex;
    flex-direction: column;
    background: transparent;

    & a {
      white-space: normal;
      float: left;
      clear: left;
      margin-right: auto;

      &:first-child {
        margin-right: 0;
      }
    }
  }
}