/**
 * Frame
 *
 * Frame layout a.k.a Holy Grail Layout.
 * Frame allows you to create common design patterns like header, sidebars and footer.
 * https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
 *
 * 1. Avoid the IE 10-11 `min-height` bug.
 * 2. Set `flex-shrink` to `0` to prevent some browsers from
 *    letting these items shrink to smaller than their content's default
 *    minimum size. See http://bit.ly/1Mn35US for details.
 * 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.

 */

/*
 * NOTE: This design pattern should be created with CSS Grid once our browsersupport drops IE11
 * https://alligator.io/css/css-grid-holy-grail-layout/
 */

.l-Frame {
  display: flex;
  flex-direction: column;
  height: 100%; /* 1, 3 */
}

.l-Frame__header,
.l-Frame__footer {
  flex: none; /* 2 */
}

.l-Frame__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.l-Frame__main {
  flex: 1;
  min-height: 100%;
  overflow-y: auto;
}

@media (--bp4) {
  .l-Frame__body {
    flex-direction: row;
  }

  .l-Frame__left {
    flex-basis: var(--frameLeftWidth);
    flex-grow: 0;
    width: var(--frameLeftWidth);
  }

  .l-Frame__right {
    flex-basis: var(--frameRightWidth);
    flex-grow: 0;
    width: var(--frameRightWidth);
  }
}
/**
 * Grid
 * Grid system, works together with Width utilities.
 */
.l-Container {
  max-width: var(--gridMaxWidth);
  margin-right: auto;
  margin-left: auto;
}

.l-Grid {
  display: flex;
  flex-flow: row wrap;
}

/**
 * Modifier: gutters
 */

.l-Grid--gutter {
  margin: 0 calc(var(--gridGutter) * -1);
}

.l-Grid--gutter > .l-Grid__item {
  padding: 0 var(--gridGutter);
}

/**
 * Modifier: allow cells to equal distribute width
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex
 *    http://git.io/vllC7
 *
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
 *    http://git.io/vllWx
 */

.l-Grid--fill > .l-Grid__item {
  flex: 1 1 0%; /* 1 */
}

/**
 * Modifier: allow children of cells to fill height
 */

.l-Grid--equalHeight > .l-Grid__item {
  display: flex;
}

/**
 * No explicit width by default. Rely on combining a cell with a dimension
 * utility or a component class that extends 'Grid'.
 *
 * 1. Set flex items to full width by default
 * 2. Fix issue where elements with overflow extend past the
 *    `.Grid > *` container - https://git.io/vw5oF
 */

.l-Grid__item {
  flex-basis: 100%; /* 1 */
  min-width: 0; /* 2 */
  min-height: 1px;
}
/*
    Layout: Media embed
    Responsive media embedding object, for use with iframes
*/

.l-MediaEmbed {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: var(--mediaEmbedRatio);
  margin-bottom: var(--mediaEmbedMarginBottom);
  overflow: hidden;
}

.l-MediaEmbed > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/**
 * Row
 * Creates a horizontal row with padding
 */
.l-Row {
  padding: var(--spacingBase) var(--spacingBase) 0;
}

@media (--bp3) {
  .l-Row {
    padding-right: var(--spacingLarge);
    padding-left: var(--spacingLarge);
  }
}
/**
 * ITP Table
 * Responsive tables and table layout helpers
 */
.l-Table > thead {
  display: none; /* hide header on mobile */
}

.l-Table > tbody > tr > th { /* stylelint-disable-line */
  display: block;
  width: 100%;
}

.l-Table > tbody > tr > td { /* stylelint-disable-line */
  display: block; /* stack cells */
}

.l-Table::before {
  content: attr(headers) ": "; /* move header title contents next to cell content */
}

@media (--bp2) {
  .l-Table > thead {
    display: table-header-group; /* default table layout */
  }

  /* stylelint-disable */
  .l-Table > tbody > tr > td,
  .l-Table > tbody > tr > th {
    /* stylelint-enable */
    display: table-cell; /* default table layout */
  }

  .l-Table > tbody > tr > th { /* stylelint-disable-line */
    width: initial; /* reset back to initial width */
  }

  .l-Table > tbody > tr > td::before { /* stylelint-disable-line */
    display: none; /* hide header title contents */
  }
}

/**
 * Equal-width table cells
 * `table-layout: fixed` forces all cells within a table to occupy the same
 * width as each other. This also has performance benefits: because the browser
 * does not need to (re)calculate cell dimensions based on content it discovers,
 * the table can be rendered very quickly. Further reading:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
 */
.l-Table--fixed {
  table-layout: fixed;
}
/**
 * Global
 * Combines all layout components
 */