// Layout component

.Layout {

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

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

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

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

// Flow as column

grid-auto-flow: column;
grid-template-columns: auto 0 1fr; // sidebar column, separator, main column
// stylelint-disable-next-line primer/no-undefined-vars
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 {
  --Layout-gutter: 0;
}

&.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: 1fr 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;
    // stylelint-disable-next-line primer/colors
    background: var(--color-border-primary);
  }

  .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 {

// stylelint-disable-next-line primer/no-undefined-vars
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 {
  // stylelint-disable-next-line primer/no-undefined-vars
  max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
}

.Layout-main-centered-lg {
  // stylelint-disable-next-line primer/no-undefined-vars
  max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
}

.Layout-main-centered-xl {
  // stylelint-disable-next-line primer/no-undefined-vars
  max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
}

}