.app-layout {
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-columns: var(--sidebar-width) 1fr var(--userlist-width);
  height: 100vh;
  background: var(--color-background);

  & > .header {
    grid-column: 1 / -1;
  }

  & > .sidebar {
    grid-row: 2;
    overflow-y: auto;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
  }

  & > .main {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
  }

  & > .userlist {
    grid-row: 2;
    overflow-y: auto;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
  }

  &.-no-userlist {
    grid-template-columns: var(--sidebar-width) 1fr;
  }

  @media (max-width: 1023px) {
    &, &.-no-userlist {
      grid-template-columns: 1fr;
    }

    & > .sidebar {
      position: fixed;
      top: var(--header-height);
      left: 0;
      bottom: 0;
      width: var(--sidebar-width);
      transform: translateX(-100%);
      transition: transform 0.2s ease;
      z-index: 100;
    }

    & > .sidebar.-open {
      transform: translateX(0);
    }

    & > .userlist {
      position: fixed;
      top: var(--header-height);
      right: 0;
      bottom: 0;
      width: 240px;
      transform: translateX(100%);
      transition: transform 0.2s ease;
      z-index: 200;
    }

    & > .userlist.-open {
      transform: translateX(0);
    }
  }

  @media (max-width: 767px) {
    & > .sidebar {
      width: 100%;
    }

    & > .userlist {
      width: 100%;
    }
  }
}