/*
  Application shell: body, the staff sidebar/content split (the sidebar expands
  on hover and the content margin follows), and the page main areas.
  Breakpoints match Tailwind: sm 40rem, md 48rem, lg 64rem.
*/

@layer components {
  .app-body {
    background-color: var(--color-slate-50);
    color: var(--color-slate-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .app-shell {
    min-height: 100vh;
    background-color: var(--color-slate-50);
  }

  .app-content {
    flex: 1;
    transition: all 0.3s var(--default-transition-timing-function);
  }

  .app-main {
    min-height: 100vh;
    padding: 1.5rem 1rem 7rem;
  }

  .guest-main {
    min-height: 100vh;
    padding: 1.5rem 1rem 3rem;
  }

  @media (min-width: 40rem) {
    .guest-main {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  @media (min-width: 48rem) {
    .app-shell {
      display: flex;
    }

    .app-content {
      margin-left: 4rem;
    }

    .app-sidebar:hover ~ .app-content {
      margin-left: 16rem;
    }

    .app-main {
      padding-bottom: 2.5rem;
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }

  @media (min-width: 64rem) {
    .app-main {
      padding-left: 3rem;
      padding-right: 3rem;
    }

    .guest-main {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }
}