body > main {
  @apply grid min-h-lvh bg-background text-text-primary;
  grid-template-areas:
  "logo header menu"
  "content content content";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  & > .logo {
    @apply text-text-secondary flex p-3 border-b-2 border-b-border gap-2.5 items-center;
    grid-area: logo;
    .icon {
      @apply h-6 w-auto;
    }
    .logotype {
      @apply h-3 w-auto;
    }
  }
  & > nav.top {
    @apply text-primary flex p-3 border-b-2 border-b-border;
    grid-area: header;
    ul {
      @apply flex gap-3 w-full mx-5;
      li {
        a {
          @apply text-text-secondary text-sm font-medium hover:bg-primary-light p-2.5 rounded-md;
        }
        &.active {
          a {
            @apply text-primary font-semibold;
          }
        }
        &.spacer {
          @apply flex-1;
        }
      }
    }
  }
  & > nav.user-menu {
    @apply text-primary flex p-3 border-b-2 border-b-border gap-3;
    grid-area: menu;
    .theme-selector {
      @apply border-none outline-none bg-transparent h-7 text-xs appearance-none;
    }
    .settings {
      @apply p-0.5 flex items-center justify-center rounded-md hover:bg-surface-hover;
      .icon {
        @apply text-text-secondary hover:bg-surface-hover;
      }
    }
  }

  & > nav.sidebar {
    grid-area: sidebar;
  }
  & > main {
    @apply overflow-scroll h-base max-h-base;
    grid-area: content;
  }
}