.pinot-base-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width, 280px) 1fr;
  grid-template-rows: calc(var(--wa-font-size-3xl) + var(--wa-space-m) * 2) 1fr;
  grid-template-areas:
        "sidebar-top header"
        "sidebar main";
  height: 100vh;
  overflow: hidden;
  --lb-app-border-color: var(--wa-color-neutral-90);
  --lb-app-border-width: 2px;


  > header {
    grid-area: header;
    padding: var(--wa-space-m);
    display: flex;
    align-items: center;
    gap: var(--wa-space-m);
    border-block-end: var(--lb-app-border-width) solid var(--lb-app-border-color);
  }

  > main {
    grid-area: main;
    padding: var(--wa-space-m);
    overflow-y: auto;
  }

  > aside {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    border-inline-end: var(--lb-app-border-width) solid var(--lb-app-border-color);
    overflow: hidden;

    .content {
      flex-grow: 1;
      overflow-y: auto;
      padding: var(--wa-space-m);
    }

    .bottom {
      padding: var(--wa-space-m);
      flex-shrink: 0;
      border-block-start: var(--lb-app-border-width) solid var(--lb-app-border-color);
    }
  }
}


.pinot-base-nav-top {
  padding: var(--wa-space-m);
  flex-shrink: 0;
  border-block-end: var(--lb-app-border-width) solid var(--lb-app-border-color);
  border-inline-end: var(--lb-app-border-width) solid var(--lb-app-border-color);
  grid-area: sidebar-top;

  img {
    height: var(--wa-font-size-3xl);
  }
}


.pinot-base-nav-toggle {
  display: none;
}

.pinot-base-nav {
  --wa-color-text-quiet: var(--wa-color-neutral-60);

  h2 {
    text-transform: uppercase;
    font-size: var(--wa-font-size-xs);
    font-weight: var(--wa-font-weight-bold);
    line-height: var(--wa-line-height-condensed);
    color: var(--wa-color-text-quiet);
    margin-bottom: 0;
    margin-top: var(--wa-space-m);

    &:first-of-type {
      margin-top: 0;
    }
  }

  wa-button::part(base) {
    font-size: var(--wa-font-size-s);
    justify-content: flex-start;
  }
}

.pinot-base-header-user .wa-prose {
  display: none;
}

@media (max-width: 768px) {
  .pinot-base-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
            "header"
            "main";

    aside {
      display: none;
    }
  }

  .pinot-base-nav-top {
    display: none;
  }

  .pinot-base-nav-toggle {
    display: block;
  }
}