@mixin body-secondary {
  @if variable-exists(body-secondary) {
    color: $body-secondary;
  } @else {
    color: theme-dim($body-color, 25%);
  }
}

// Grid Layouts

$grid-screen-inset-padding: 1.5em;
$grid-body-minsize: 500px;
$grid-body-minsize-slim: 450px;
$grid-body-maxsize-mid: calc(750px - #{2 * $grid-screen-inset-padding});
$grid-body-maxsize-float-wide: calc(800px - #{2 * $grid-screen-inset-padding});
$grid-body-maxsize-docked-wide: calc(
  1000px - #{2 * $grid-screen-inset-padding}
);
$grid-body-maxsize-plain-wide: calc(850px - #{2 * $grid-screen-inset-padding});
$grid-body-maxsize-listing: calc(1200px - #{2 * $grid-screen-inset-padding});

@mixin page-columns {
  display: grid;
  gap: 0;
}

@mixin column-spanning-element {
  table {
    background: $body-bg;
  }
}

@mixin grid-template-columns-narrow {
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
      0px,
      1fr
    )
    [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

// Floating Grid Definitions
@mixin page-columns-float-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start] minmax(25px, 50px)
    [page-start-inset] minmax(50px, 150px)
    [body-start-outset] minmax(25px, 50px)
    [body-start] 1.5em
    [body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-float-wide
    )
    [body-content-end] 1.5em
    [body-end] minmax(25px, 50px)
    [body-end-outset] minmax(50px, 150px)
    [page-end-inset] minmax(25px, 50px)
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-float-slimcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start] 50px
    [page-start-inset] minmax(50px, 150px)
    [body-start-outset] 50px
    [body-start] 1.5em
    [body-content-start] minmax($grid-body-minsize-slim, $grid-body-maxsize-mid)
    [body-content-end] 1.5em
    [body-end] 50px
    [body-end-outset] minmax(50px, 150px)
    [page-end-inset] 50px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-float-fullcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start] 50px
    [page-start-inset] minmax(50px, 150px)
    [body-start-outset] 50px
    [body-start] 1.5em
    [body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-float-wide
    )
    [body-content-end] 1.5em
    [body-end body-end-outset page-end-inset page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-float-listing-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start] minmax(25px, 50px)
    [page-start-inset] minmax(50px, 150px)
    [body-start-outset] minmax(25px, 50px)
    [body-start] 1.5em
    [body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-float-wide
    )
    [body-content-end] 1.5em
    [body-end] minmax(25px, 50px)
    [body-end-outset] minmax(50px, 150px)
    [page-end-inset] minmax(25px, 50px)
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

// medium 976 down
@mixin page-columns-float-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start page-start-inset body-start-outset body-start] 1em
    [body-content-start] minmax($grid-body-minsize, $grid-body-maxsize-mid)
    [body-content-end] 1.5em
    [body-end] 50px
    [body-end-outset] minmax(75px, 150px)
    [page-end-inset] 25px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-float-slimcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start page-start-inset body-start-outset body-start] 1em
    [body-content-start] minmax($grid-body-minsize, $grid-body-maxsize-mid)
    [body-content-end] 1.5em
    [body-end] 35px
    [body-end-outset] minmax(75px, 145px)
    [page-end-inset] 35px
    [page-end] 4fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-float-fullcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start page-start-inset body-start-outset body-start] 1em
    [body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-float-wide
    )
    [body-content-end] 1.5em
    [body-end body-end-outset page-end-inset page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-float-listing-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start page-start-inset body-start-outset body-start] 1em
    [body-content-start] minmax($grid-body-minsize, $grid-body-maxsize-mid)
    [body-content-end] 1.5em
    [body-end] 50px
    [body-end-outset] minmax(75px, 150px)
    [page-end-inset] 25px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

// Docked Grid Definitions
@mixin page-columns-docked-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start] minmax(50px, 100px)
    [page-start-inset] 50px
    [body-start-outset] 50px
    [body-start] 1.5em
    [body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-docked-wide
    )
    [body-content-end] 1.5em
    [body-end] 50px
    [body-end-outset] minmax(0px, 100px)
    [page-end-inset] 50px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-docked-slimcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start] minmax(50px, 100px)
    [page-start-inset] 50px
    [body-start-outset] 50px
    [body-start] 1.5em
    [body-content-start] minmax($grid-body-minsize-slim, $grid-body-maxsize-mid)
    [body-content-end] 1.5em
    [body-end] 50px
    [body-end-outset] minmax(0px, 200px)
    [page-end-inset] 50px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-docked-fullcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start] minmax(50px, 100px)
    [page-start-inset] 50px
    [body-start-outset] 50px
    [body-start] 1.5em
    [body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-docked-wide
    )
    [body-content-end] 1.5em
    [body-end body-end-outset page-end-inset page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-docked-listing-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start] minmax(50px, 100px)
    [page-start-inset] 50px
    [body-start-outset] 50px
    [body-start] 1.5em
    [body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-docked-wide
    )
    [body-content-end] 1.5em
    [body-end] 50px
    [body-end-outset] minmax(0px, 100px)
    [page-end-inset] 50px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-docked-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-mid
    )
    [body-content-end] 1.5em
    [body-end] 50px
    [body-end-outset] minmax(25px, 50px)
    [page-end-inset] 50px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-docked-slimcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-mid
    )
    [body-content-end] 1.5em
    [body-end] 35px
    [body-end-outset] minmax(75px, 145px)
    [page-end-inset] 35px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-docked-fullcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-docked-wide
    )
    [body-content-end] 1.5em
    [body-end body-end-outset page-end-inset page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-docked-listing-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-mid
    )
    [body-content-end] 1.5em
    [body-end] 50px
    [body-end-outset] minmax(25px, 50px)
    [page-end-inset] 50px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

// Plain Grid Definitions
@mixin page-columns-default-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start page-start-inset] 35px
    [body-start-outset] 35px
    [body-start] 1.5em
    [body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-plain-wide
    )
    [body-content-end] 1.5em
    [body-end] 35px
    [body-end-outset] minmax(75px, 145px)
    [page-end-inset] 35px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-default-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start page-start-inset body-start-outset] 5fr
    [body-start] 1.5em
    [body-content-start] minmax($grid-body-minsize, $grid-body-maxsize-mid)
    [body-content-end] 1.5em
    [body-end] 35px
    [body-end-outset] minmax(75px, 145px)
    [page-end-inset] 35px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

// Full content grid definitions
@mixin page-columns-fullcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start page-start-inset] 35px
    [body-start-outset] 35px
    [body-start] 1.5em
    [body-content-start] minmax(
      $grid-body-minsize,
      $grid-body-maxsize-plain-wide
    )
    [body-content-end] 1.5em
    [body-end] 35px
    [body-end-outset] 35px
    [page-end-inset page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-fullcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start page-start-inset body-start-outset] 5fr
    [body-start] 1.5em
    [body-content-start] minmax($grid-body-minsize, $grid-body-maxsize-mid)
    [body-content-end] 1.5em
    [body-end body-end-outset page-end-inset page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

// Listing content grid definitions
@mixin page-columns-listing-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start] minmax(50px, 100px)
    [page-start-inset] 50px
    [body-start-outset] 50px
    [body-start] 1.5em
    [body-content-start] minmax($grid-body-minsize, $grid-body-maxsize-listing)
    [body-content-end] 3em
    [body-end] 50px
    [body-end-outset] minmax(0px, 250px)
    [page-end-inset] 50px
    [page-end] 1fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-listing-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start page-start-inset body-start-outset] 5fr
    [body-start] 1.5em
    [body-content-start] minmax($grid-body-minsize, $grid-body-maxsize-listing)
    [body-content-end body-end body-end-outset page-end-inset page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

// Slim content grid definitions
@mixin page-columns-slimcontent-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start page-start-inset] 35px
    [body-start-outset] 35px
    [body-start] 1.5em
    [body-content-start] minmax($grid-body-minsize, $grid-body-maxsize-mid)
    [body-content-end] 1.5em
    [body-end] 50px
    [body-end-outset] minmax(0px, 200px)
    [page-end-inset] 50px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-slimcontent-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset page-start page-start-inset body-start-outset] 5fr
    [body-start] 1.5em
    [body-content-start] minmax($grid-body-minsize, $grid-body-maxsize-mid)
    [body-content-end] 1.5em
    [body-end] 35px
    [body-end-outset] minmax(75px, 145px)
    [page-end-inset] 35px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-tocleft-wide {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start] 35px
    [page-start-inset] minmax(0px, 175px)
    [body-start-outset] 35px
    [body-start] 1.5em
    [body-content-start] minmax($grid-body-minsize-slim, $grid-body-maxsize-mid)
    [body-content-end] 1.5em
    [body-end] 50px
    [body-end-outset] minmax(0px, 200px)
    [page-end-inset] 50px
    [page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}

@mixin page-columns-tocleft-mid {
  @include page-columns();
  grid-template-columns:
    [screen-start] $grid-screen-inset-padding
    [screen-start-inset] 5fr
    [page-start] 35px
    [page-start-inset] minmax(0px, 145px)
    [body-start-outset] 35px
    [body-start] 1.5em
    [body-content-start] minmax($grid-body-minsize-slim, $grid-body-maxsize-mid)
    [body-content-end] 1.5em
    [body-end body-end-outset page-end-inset page-end] 5fr
    [screen-end-inset] $grid-screen-inset-padding
    [screen-end];
}
