/*
  @file Utility classes to drop into templates.
*/

/*
  Position the main canvas relative so anything further down the page that
  might use absolute will not cover the admin toolbar.
*/
.dialog-off-canvas-main-canvas {
  position: relative;
}

/*
  The main container class that defines how wide our content area is
*/
.lgd-container {
  max-width: var(--width-container);
  margin-right: auto;
  margin-left: auto;
}
.lgd-container--mega {
  max-width: var(--width-mega);
}
.lgd-container--extra-large {
  max-width: var(--width-extra-large);
}
.lgd-container--large {
  max-width: var(--width-large);
}
.lgd-container--medium {
  max-width: var(--width-medium);
}
.lgd-container--small {
  max-width: var(--width-small);
}

.padding-horizontal {
  padding-right: var(--spacing-padding-horizontal);
  padding-left: var(--spacing-padding-horizontal);
}

.lgd-icon svg {
  display: block;
  width: var(--spacing);
  height: auto;
}
.lgd-icon--large svg {
  width: var(--spacing-large);
}
.lgd-icon--larger svg {
  width: var(--spacing-larger);
}
.lgd-icon--largest svg {
  width: var(--spacing-largest);
}
.lgd-icon--small svg {
  width: var(--spacing-small);
}
.lgd-icon--smaller svg {
  width: var(--spacing-smaller);
}
.lgd-icon--smallest svg {
  width: var(--spacing-smallest);
}

.layout__region > * {
  margin-bottom: var(--vertical-rhythm-spacing);
}