@layer pages {
  .layout {
    width: 100%;
    height: 100%;
    display: flex;
    padding-block-start: calc(var(--spacing));
    padding-block-end: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing) * 3);
    header {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      height: calc(var(--spacing) * 6);
      z-index: 10;
      &.mac_titlebar {
        padding-left: calc(var(--spacing) * 14);
      }
      h1 {
        line-height: 1em;
        font-style: italic;
      }
    }
    section {
      min-height: 0;
      min-width: 0;
      overflow: hidden;
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: calc(var(--spacing) * 3);
      menu {
        flex: 1;
        padding: calc(var(--spacing) * 4) 0;
        max-width: calc(var(--spacing) * 12);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: calc(var(--spacing) * 4);
      }
      .main_content {
        flex: 1;
        border-radius: calc(var(--border-radius) * 2);
      }
    }
  }
  .window_move_handler {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--spacing) * 8);
    z-index: 300;
  }
  .route_link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing));
    div {
      text-align: center;
      &.filled {
        color: var(--color-on-surface);
        background-color: transparent;
        border-radius: calc(var(--border-radius) * 2);
        padding-block: calc(var(--spacing));
      }
    }
    &.inactive {
      color: var(--color-on-surface-variant);
    }
    &.active {
      color: var(--color-on-surface);
      div.filled {
        color: var(--color-on-secondary-container);
        background-color: var(--color-secondary-container);
      }
    }
  }
}