src/layout/layout.scss

// Layout component

.Layout {
  display: grid;

  --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
  --Layout-gutter: 16px;

  @media (max-width: calc(#{$width-sm} - 0.02px)) {
    @include flow-as-row;
  }

  &.Layout--flowRow-until-md {
    @media (max-width: calc(#{$width-md} - 0.02px)) {
      @include flow-as-row;
    }
  }

  &.Layout--flowRow-until-lg {
    @media (max-width: calc(#{$width-lg} - 0.02px)) {
      @include flow-as-row;
    }
  }

  // Flow as column

  grid-auto-flow: column;
  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); // sidebar column, separator, main column
  grid-gap: var(--Layout-gutter);

  .Layout-sidebar {
    grid-column: 1;
  }

  .Layout-divider {
    display: none;
  }

  .Layout-main {
    grid-column: 2 / span 2;
  }

  // Gutter spacing

  @include breakpoint(lg) {
    --Layout-gutter: 24px;
  }

  &.Layout--gutter-none {
    // stylelint-disable-next-line length-zero-no-unit
    --Layout-gutter: 0px;
  }

  &.Layout--gutter-condensed {
    --Layout-gutter: 16px;
  }

  &.Layout--gutter-spacious {
    @include breakpoint(lg) {
      --Layout-gutter: 32px;
    }

    @include breakpoint(xl) {
      --Layout-gutter: 40px;
    }
  }

  // Sidebar width

  @each $breakpoint in map-keys($sidebar-width) {
    @include breakpoint($breakpoint) {
      --Layout-sidebar-width: #{map-get($sidebar-width, $breakpoint)};
    }
  }

  &.Layout--sidebar-narrow {
    @each $breakpoint in map-keys($sidebar-narrow-width) {
      @include breakpoint($breakpoint) {
        --Layout-sidebar-width: #{map-get($sidebar-narrow-width, $breakpoint)};
      }
    }
  }

  &.Layout--sidebar-wide {
    @each $breakpoint in map-keys($sidebar-wide-width) {
      @include breakpoint($breakpoint) {
        --Layout-sidebar-width: #{map-get($sidebar-wide-width, $breakpoint)};
      }
    }
  }

  // Sidebar position

  &.Layout--sidebarPosition-start {
    .Layout-sidebar {
      grid-column: 1;
    }

    .Layout-main {
      grid-column: 2 / span 2;
    }
  }

  &.Layout--sidebarPosition-end {
    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;

    .Layout-main {
      grid-column: 1;
    }

    .Layout-sidebar {
      grid-column: 2 / span 2;
    }
  }

  // Sidebar divider

  &.Layout--divided {
    .Layout-divider {
      display: block;
      grid-column: 2;
      width: 1px;
      // stylelint-disable-next-line primer/spacing
      margin-right: -1px;
      background: var(--color-border-default);
    }

    .Layout-main {
      grid-column: 3 / span 1;
    }

    &.Layout--sidebarPosition-end {
      .Layout-sidebar {
        grid-column: 3 / span 1;
      }

      .Layout-main {
        grid-column: 1;
      }
    }
  }
}

.Layout-divider {
  display: none;
  width: 1px;
}

.Layout-sidebar {
  width: var(--Layout-sidebar-width);
}

.Layout-main {
  min-width: 0;

  // Centered main column
  // FIXME: right-aligned sidebar
  .Layout-main-centered-md,
  .Layout-main-centered-lg,
  .Layout-main-centered-xl {
    margin-right: auto;
    margin-left: auto;

    > .container-md,
    > .container-lg,
    > .container-xl {
      margin-left: 0;
    }
  }

  .Layout-main-centered-md {
    max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
  }

  .Layout-main-centered-lg {
    max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
  }

  .Layout-main-centered-xl {
    max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
  }
}