/* Layout */

@define-mixin flow-as-row {
  grid-auto-flow: row;
  grid-template-columns: 1fr !important;

  & .Layout-sidebar,
  & .Layout-divider,
  & .Layout-main {
    width: 100% !important;
    grid-column: 1 !important;
  }

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

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

  &.Layout--sidebarPosition-flowRow-end {
    & .Layout-sidebar {
      grid-row: 2 / span 2;
    }

    & .Layout-main {
      grid-row: 1;
    }
  }

  &.Layout--sidebarPosition-flowRow-none {
    & .Layout-sidebar {
      display: none;
    }
  }

  &.Layout--divided {
    @mixin flow-as-row-divider;

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

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

      & .Layout-main {
        grid-row: 1;
      }
    }
  }
}

@define-mixin flow-as-row-divider {
  --Layout-gutter: 0;

  & .Layout-divider {
    height: 1px;
    grid-row: 2;

    &.Layout-divider--flowRow-hidden {
      display: none;
    }

    &.Layout-divider--flowRow-shallow {
      height: 8px;
      margin-right: 0;
      background: var(--color-canvas-inset);
      border-color: var(--color-border-default);
      border-style: solid;
      border-width: var(--borderWidth-thin) 0;
    }
  }
}

.Layout {
  display: grid;

  --Layout-sidebar-width: 220px;
  --Layout-gutter: 16px;

  @media (max-width: calc(544px - 0.02px)) {
    @mixin flow-as-row;
  }

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

  &.Layout--flowRow-until-lg {
    @media (max-width: calc(1012px - 0.02px)) {
      @mixin 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 */

  @media (min-width: 1012px) {
    --Layout-gutter: 24px;
  }

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

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

  &.Layout--gutter-spacious {
    @media (min-width: 1012px) {
      --Layout-gutter: 32px;
    }

    @media (min-width: 1280px) {
      --Layout-gutter: 40px;
    }
  }

  /* Sidebar width */
  @media (min-width: 544px) {
    --Layout-sidebar-width: 220px;
  }

  @media (min-width: 768px) {
    --Layout-sidebar-width: 256px;
  }

  @media (min-width: 1012px) {
    --Layout-sidebar-width: 296px;
  }

  &.Layout--sidebar-narrow {
    @media (min-width: 768px) {
      --Layout-sidebar-width: 240px;
    }

    @media (min-width: 1012px) {
      --Layout-sidebar-width: 256px;
    }
  }

  &.Layout--sidebar-wide {
    @media (min-width: 1012px) {
      --Layout-sidebar-width: 320px;
    }

    @media (min-width: 1280px) {
      --Layout-sidebar-width: 336px;
    }
  }

  /* 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;
      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(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));
  }

  & .Layout-main-centered-lg {
    max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));
  }

  & .Layout-main-centered-xl {
    max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));
  }
}