// Layout mixins

@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 {
  @include 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;
    }
  }
}

}

@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-bg-canvas-inset);
    border-color: var(--color-border-primary);
    border-style: solid;
    border-width: $border-width 0;
  }
}

}