// stylelint-disable max-nesting-depth
// stylelint-disable selector-max-specificity
// stylelint-disable no-duplicate-selectors

$Layout-divider-color: var(--borderColor-default, var(--color-border-default)) !default;
$Layout-responsive-variant-max-breakpoint: 'md' !default;

:root {
  --Layout-pane-width: #{map-get($sidebar-width, 'sm')};
  --Layout-content-width: 100%;
  --Layout-template-columns: 1fr var(--Layout-pane-width);
  --Layout-template-areas: 'content pane';
  --Layout-column-gap: var(--base-size-16);
  --Layout-row-gap: var(--base-size-16);

  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
  --Layout-outer-spacing-x: 0px; // wrapper margin x
  --Layout-outer-spacing-y: 0px; // wrapper margin y
  --Layout-inner-spacing-min: 0px; // default region padding
  --Layout-inner-spacing-max: 0px; // relaxed content horizontal padding
}

// Layout beta mixins

// responsive region dividers

@mixin Layout-line-divider {
  position: absolute;
  // stylelint-disable-next-line primer/spacing
  left: calc(var(--Layout-outer-spacing-x) * -1);
  display: block;
  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
  height: 1px;
  content: '';
  // stylelint-disable-next-line primer/colors
  background-color: $Layout-divider-color;
}

@mixin Layout-filled-divider {
  position: absolute;
  bottom: calc(var(--base-size-8) * -1);
  // stylelint-disable-next-line primer/spacing
  left: calc(var(--Layout-outer-spacing-x) * -1);
  display: block;
  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
  height: var(--base-size-8);
  content: '';
  background-color: var(--bgColor-inset, var(--color-canvas-inset));
  // stylelint-disable-next-line primer/box-shadow
  box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
}

.PageLayout {
  display: block;
  // stylelint-disable-next-line primer/spacing
  margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x);

  // multi-column desktop-friendly layout

  @include breakpoint($Layout-responsive-variant-max-breakpoint) {

    // Set a `content` region width, to work with loading states when
    // `pane` is not yet loaded. See https://github.com/primer/css/pull/1818
    $Layout-content-full-width: minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap)));

    &.PageLayout--panePos-start {
      --Layout-template-columns: var(--Layout-pane-width) #{$Layout-content-full-width};
      --Layout-template-areas: 'pane content';
    }

    &.PageLayout--panePos-end {
      --Layout-template-columns: #{$Layout-content-full-width} var(--Layout-pane-width);
      --Layout-template-areas: 'content pane';
    }

    // header divider

    .PageLayout-header--hasDivider {
      // stylelint-disable-next-line primer/spacing
      padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
      // stylelint-disable-next-line primer/borders, primer/colors
      border-bottom: $border-width solid $Layout-divider-color;
    }

    // footer divider

    .PageLayout-footer--hasDivider {
      // stylelint-disable-next-line primer/spacing
      padding-top: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
      // stylelint-disable-next-line primer/borders, primer/colors
      border-top: $border-width solid $Layout-divider-color;
    }

    // pane divider

    &.PageLayout--hasPaneDivider {
      &.PageLayout--panePos-start {
        .PageLayout-pane {
          // stylelint-disable-next-line primer/borders, primer/colors
          border-right: $border-width solid $Layout-divider-color;
        }

        &:not(.PageLayout--columnGap-none) {
          .PageLayout-pane {
            // stylelint-disable-next-line primer/spacing
            padding-right: calc(var(--Layout-column-gap) - #{$border-width});
            // stylelint-disable-next-line primer/spacing
            margin-right: calc(var(--Layout-column-gap) * -1);
          }

          .PageLayout-content {
            // stylelint-disable-next-line primer/spacing
            margin-left: var(--Layout-column-gap);
          }
        }
      }

      &.PageLayout--panePos-end {
        .PageLayout-pane {
          // stylelint-disable-next-line primer/borders, primer/colors
          border-left: $border-width solid $Layout-divider-color;
        }

        &:not(.PageLayout--columnGap-none) {
          .PageLayout-pane {
            // stylelint-disable-next-line primer/spacing
            padding-left: calc(var(--Layout-column-gap) - #{$border-width});
            // stylelint-disable-next-line primer/spacing
            margin-left: calc(var(--Layout-column-gap) * -1);
          }

          .PageLayout-content {
            // stylelint-disable-next-line primer/spacing
            margin-right: var(--Layout-column-gap);
          }
        }
      }
    }

    // sticky pane

    .PageLayout-pane--sticky {
      position: sticky;
      top: 0;
      max-height: 100vh;
      overflow: auto;
      scrollbar-width: thin;

      @supports (max-height: 100dvh) {
        max-height: 100dvh;
      }
    }

    // content width

    [class^='PageLayout-content-centered-'] {
      max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
      margin-right: auto;
      margin-left: auto;
    }

    &.PageLayout--hasPaneDivider {
      [class^='PageLayout-content-centered-'] {
        max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + (var(--Layout-column-gap) * 2));
      }
    }

    &.PageLayout--panePos-start {
      [class^='PageLayout-content-centered-'] > [class^='container-'] {
        margin-left: 0;
      }
    }

    &.PageLayout--panePos-end {
      [class^='PageLayout-content-centered-'] > [class^='container-'] {
        margin-right: 0;
      }
    }

    @each $breakpoint in map-keys($breakpoints) {
      .PageLayout-content-centered-#{$breakpoint} {
        --Layout-content-width: #{map-get($breakpoints, $breakpoint)};
      }
    }

    // pane width

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

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

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

  // responsive behaviors on narrow viewports

  @media (max-width: #{map-get($breakpoints, $Layout-responsive-variant-max-breakpoint) - 0.02px}) {

    // variant: stackRegions

    &.PageLayout--responsive-stackRegions {
      --Layout-template-columns: 1fr;

      // responsive-panePos: end (default)
      --Layout-template-areas: 'content' 'pane';

      // responsive-panePos: start
      &.PageLayout--responsive-panePos-start {
        --Layout-template-areas: 'pane' 'content';
      }
    }

    // variant: separateRegions

    &.PageLayout--responsive-separateRegions {
      --Layout-template-columns: 1fr;
      --Layout-template-areas: 'content';

      &.PageLayout--responsive-primary-content {
        --Layout-template-areas: 'content';

        .PageLayout-pane {
          display: none;
        }
      }

      &.PageLayout--responsive-primary-pane {
        --Layout-template-areas: 'pane';

        .PageLayout-content {
          display: none;
        }
      }
    }

    // region dividers on narrow viewports

    .PageLayout-region--dividerNarrow-line-before {
      position: relative;
      // stylelint-disable-next-line primer/spacing
      margin-top: var(--Layout-row-gap);

      &::before {
        @include Layout-line-divider;

        // stylelint-disable-next-line primer/spacing
        top: calc(#{$border-width * -1} - var(--Layout-row-gap));
      }
    }

    .PageLayout-region--dividerNarrow-line-after {
      position: relative;
      // stylelint-disable-next-line primer/spacing
      margin-bottom: var(--Layout-row-gap);

      &::after {
        @include Layout-line-divider;

        // stylelint-disable-next-line primer/spacing
        bottom: calc(#{$border-width * -1} - var(--Layout-row-gap));
      }
    }

    .PageLayout-region--dividerNarrow-filled-before {
      position: relative;
      // stylelint-disable-next-line primer/spacing
      margin-top: calc(var(--base-size-8) + var(--Layout-row-gap));

      &::after {
        @include Layout-filled-divider;

        // stylelint-disable-next-line primer/spacing
        top: calc(calc(var(--base-size-8) * -1) - var(--Layout-row-gap));
      }
    }

    .PageLayout-region--dividerNarrow-filled-after {
      position: relative;
      // stylelint-disable-next-line primer/spacing
      margin-bottom: calc(var(--base-size-8) + var(--Layout-row-gap));

      &::before {
        @include Layout-filled-divider;

        // stylelint-disable-next-line primer/spacing
        bottom: calc(calc(var(--base-size-8) * -1) - var(--Layout-row-gap));
      }
    }
  }
}

// PageLayout-wrapper bundles header, footer, pane, and content regions
.PageLayout-wrapper {
  display: grid;
  grid: auto-flow / 1fr;
  row-gap: var(--Layout-row-gap);
}

// PageLayout-columns wrap pane and content regions
// If layout has no pane, PageLayout-columns is not present
.PageLayout-columns {
  display: grid;
  column-gap: var(--Layout-column-gap);
  row-gap: var(--Layout-row-gap);
  grid-template-columns: var(--Layout-template-columns);
  grid-template-rows: 1fr;
  grid-template-areas: var(--Layout-template-areas);

  .PageLayout-content {
    // stylelint-disable-next-line primer/spacing
    padding-right: var(--Layout-inner-spacing-max);
    // stylelint-disable-next-line primer/spacing
    padding-left: var(--Layout-inner-spacing-max);
    grid-area: content;
  }

  .PageLayout-pane {
    grid-area: pane;
  }
}

// outer spacing

.PageLayout--outerSpacing-normal {
  --Layout-outer-spacing-x: var(--base-size-16);
  --Layout-outer-spacing-y: var(--base-size-16);

  @include breakpoint(lg) {
    --Layout-outer-spacing-x: var(--base-size-24);
    --Layout-outer-spacing-y: var(--base-size-24);
  }
}

.PageLayout--outerSpacing-condensed {
  --Layout-outer-spacing-x: var(--base-size-16);
  --Layout-outer-spacing-y: var(--base-size-16);
}

// inner spacing

.PageLayout--innerSpacing-normal {
  --Layout-inner-spacing-min: var(--base-size-16);
  --Layout-inner-spacing-max: var(--base-size-16);

  @include breakpoint(lg) {
    --Layout-inner-spacing-max: var(--base-size-24);
  }
}

.PageLayout--innerSpacing-condensed {
  --Layout-inner-spacing-min: var(--base-size-16);
  --Layout-inner-spacing-max: var(--base-size-16);
}

// column gap

.PageLayout--columnGap-normal {
  --Layout-column-gap: var(--base-size-16);

  @include breakpoint(lg) {
    --Layout-column-gap: var(--base-size-24);
  }
}

.PageLayout--columnGap-condensed {
  --Layout-column-gap: var(--base-size-16);
}

.PageLayout--columnGap-none {
  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
  --Layout-column-gap: 0px;
}

// row gap

.PageLayout--rowGap-normal {
  --Layout-row-gap: var(--base-size-16);

  @include breakpoint(lg) {
    --Layout-row-gap: var(--base-size-24);
  }
}

.PageLayout--rowGap-none {
  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
  --Layout-row-gap: 0px;
}

.PageLayout--rowGap-condensed {
  --Layout-row-gap: var(--base-size-16);
}

// regions

.PageLayout-header,
.PageLayout-content,
.PageLayout-pane,
.PageLayout-footer {
  // stylelint-disable-next-line primer/spacing
  padding: var(--Layout-inner-spacing-min);
}