/**
 * Define the size, shape, and content flow of your markup.
 *
 * @section Layout
 */

/**
 * Assembly uses a 12-column flexible grid with optional gutters.
 *
 * @section Grid
 * @memberof Layout
 */

/**
 * Grids require at minimum two elements: A parent with the class `grid` and a child with the class `col`. To define the width of `col` in a grid, add a width class, `col--auto`, or both. The `grid` class includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * To avoid unexpected side-effects, do not add margin left or right to `grid` and do not add padding left or right to `col`.
 *
 * @group
 * @memberof Grid
 * @example
 * <div class='grid'>
 *   <div class='col w-1/3 border border--darken10'>one</div>
 *   <div class='col w-1/3 border border--darken10'>two</div>
 *   <div class='col w-1/3 border border--darken10'>three</div>
 * </div>
 */
.grid {
  display: flex !important;
  flex-wrap: wrap !important;
}
.col {
  display: block;
  max-width: 100%;
  flex-shrink: 1;
}
/** @endgroup */

/**
 * Apply to a `col` element to override a`col--{size}` rule and take on default `col`, occupying equal space with other `col` siblings.
 * This class is designed to be used with `*-mm`, `*-ml`, and `*-mxl` variations
 * to target screen sizes.
 *
 * @memberof Grid
 * @example
 * <div class='grid'>
 *   <div class='col w-1/4 col--auto-ml border border--darken10'>w-1/4 col--auto-ml</div>
 *   <div class='col w-3/4 col--auto-ml border border--darken10'>w-3/4 col--auto-ml</div>
 * </div>
 */
.col--auto {
  width: auto !important;
  flex: auto;
  flex-basis: 0;
}

/**
 * Control the display style of elements.
 *
 * @section Display
 * @memberof Layout
 */

/**
 * Set an element's `display` property value. Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * @memberof Display
 * @group
 * @example
 * <div class="inline bg-darken10">inline</div>
 * <div class="block bg-darken10">block</div>
 * <div class="inline-block bg-darken10">inline-block</div>
 * <div class="none bg-darken10">none</div>
 */
.inline {
  display: inline !important;
}
.block {
  display: block !important;
}
.inline-block {
  display: inline-block !important;
}
.none {
  display: none !important;
}
/** @endgroup */

/**
 * Classes for basic positioning. For flexbox positioning rules, see the documentation for [flexbox](#Flexbox) utilities.
 *
 * @section Positioning
 * @memberof Layout
 */

/**
 * Set an element's `position` property value. Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * @group
 * @memberof Positioning
 * @example
 * <div class="relative">
 *   <div class="absolute bg-darken10 right">absolute</div>
 *   <div class="relative bg-darken10">relative</div>
 *   <div class="static bg-darken10">static</div>
 *   <div class="sticky bg-darken10">static</div>
 *   <!--
 *    Fixed positioning would interfere with page
 *    <div class="fixed bg-darken10">fixed</div>
 *   -->
 * </div>
 */
.fixed {
  position: fixed !important;
}
.absolute {
  position: absolute !important;
}
.relative {
  position: relative !important;
}
.static {
  position: static !important;
}
.sticky {
  position: sticky !important;
}
/** @endgroup */

/**
 * Pin a positioned element against a side of its container. Positioning classes can be combined to stretch elements across the top, bottom, left, or right sides of their container. Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * @group
 * @memberof Positioning
 * @example
  * <div class="relative h60">
 *   <div class="absolute bg-darken10 right">right</div>
 *   <div class="absolute bg-darken10 bottom">bottom</div>
 *   <div class="absolute bg-darken10 left">left</div>
 *   <div class="absolute bg-darken10 top left right align-center">top left right</div>
 * </div>
 */
.top {
  top: 0 !important;
}
.right {
  right: 0 !important;
}
.left {
  left: 0 !important;
}
.bottom {
  bottom: 0 !important;
}
/** @endgroup */

/**
 * Override default stacking order by setting an element's `z-index` property value. Whenever possible, rely on
 * built-in stacking order and avoid using these classes. Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * @group
 * @memberof Positioning
 * @example
 * <div class="relative h60">
 *   <div class="absolute z5 bg-pink py6 px6">z5</div>
 *   <div class="absolute z1 bg-blue px6 py6 mt12 ml24">z1</div>
 *   <div class="absolute z1-neg1 bg-blue px6 py6 mt24 ml60">z-neg1</div>
 * </div>
 */
.z-neg1 {
  z-index: -1 !important;
}
.z0 {
  z-index: 0 !important;
}
.z1 {
  z-index: 1 !important;
}
.z2 {
  z-index: 2 !important;
}
.z3 {
  z-index: 3 !important;
}
.z4 {
  z-index: 4 !important;
}
.z5 {
  z-index: 5 !important;
}
/** @endgroup */

/**
 * Note: scale layout is autogenerated by build-layout-scales.js
 */

/**
 * All margin classes fit the following pattern: `m<side><size>`.
 * And all margin class sets include `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * @section Margins
 * @memberof Layout
 */

/**
 * Set `auto` margins on left and right. This pattern is useful for horizontally centering block elements
 * or aligning block elements to the start or end of their container.
 *
 * @example
 * <div class='mx-auto w60 bg-darken10'>mx-auto</div>
 * <div class='ml-auto w60 bg-darken10'>ml-auto</div>
 * <div class='mr-auto w60 bg-darken10'>mr-auto</div>
 * @memberof Margins
 */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.ml-auto {
  margin-left: auto !important;
}
.mr-auto {
  margin-right: auto !important;
}

/**
 * All padding classes fit the following pattern: `m<side><size>`.
 * And all padding class sets include `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * @section Padding
 * @memberof Layout
 */

/**
 * All sizing classes fit the following pattern: `<w|h><min|max><size>` or `<w|h><min|max>-full` for `100%`.
 * And all sizing class sets include `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * @section Sizing
 * @memberof Layout
 */

/**
 * Flexbox utilities. All class sets include `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * Usage must fit the following pattern:
 * - `flex` or `inline-flex` must be on a parent container in order to use `flex--*` modifiers, while `flex-child-*` rules control children of a `flex` or `inline-flex` element.
 * - By default, the `main` axis is horizontal and the `cross` axis is vertical. The axes can be inverted with the use of `flex--column`.
 * - To learn about how the flexbox system works, check out ["A Complete Guide to Flexbox"](https://css-tricks.com/snippets/css/a-guide-to-flexbox).
 *
 * @section Flexbox
 * @memberof Layout
 */

/**
 * Establish an element as a flex parent.
 * These classes allow the use of `flex--*` modifiers, and `flex-child-*` classes on children.
 *
 * @group
 * @memberof Flexbox
 * @example
 * <div class='bg-darken10 flex'>flex</div>
 * <div class='bg-darken10 inline-flex'>inline-flex</div>
 */
.flex {
  display: flex !important;
}
.inline-flex {
  display: inline-flex !important;
}
/** @endgroup */

/**
 * Set the direction of the main axis to top-to-bottom (default is left-to-right).
 *
 * @memberof Flexbox
 * @example
 * <div class='bg-darken10 flex flex--column'>
 *  <span>1</span>
 *  <span>2</span>
 *  <span>3</span>
 * </div>
 */
.flex--column {
  flex-direction: column !important;
}

/**
 * Set the direction of the main axis to bottom-to-top (default is left-to-right).
 *
 * @memberof Flexbox
 * @example
 * <div class='bg-darken10 flex flex--column-reverse'>
 *  <span>1</span>
 *  <span>2</span>
 *  <span>3</span>
 * </div>
 */
.flex--column-reverse {
  flex-direction: column-reverse !important;
}

/**
 * Set the direction of the main axis to left-to-right (the default value of `flex`).
 *
 * @memberof Flexbox
 * @example
 * <div class='bg-darken10 flex flex--row'>
 *  <span>1</span>
 *  <span>2</span>
 *  <span>3</span>
 * </div>
 */
.flex--row {
  flex-direction: row !important;
}

/**
 * Set the direction of the main axis to right-to-left (default is left-to-right).
 *
 * @memberof Flexbox
 * @example
 * <div class='bg-darken10 flex flex--row-reverse'>
 *  <span>1</span>
 *  <span>2</span>
 *  <span>3</span>
 * </div>
 */
.flex--row-reverse {
  flex-direction: row-reverse !important;
}

/**
 * Center an element's children on the main axis.
 *
 * @memberof Flexbox
 * @example
 * <div class='flex flex--center-main bg-darken10'>
 *  <div class='bg-darken10'>child</div>
 * </div>
 */
.flex--center-main {
  justify-content: center !important;
}

/**
 * Center an element's children on the cross axis.
 *
 * @memberof Flexbox
 * @example
 * <div class='flex flex--center-cross bg-darken10 h120'>
 *  <div class='bg-darken10'>child</div>
 * </div>
 */
.flex--center-cross {
  align-items: center !important;
}

/**
 * Align an element's children to the start of the cross axis.
 *
 * @memberof Flexbox
 * @example
 * <div class='flex flex--start-cross h120 bg-darken10'>
 *  <div class='bg-darken10 h42'>child</div>
 *  <div class='bg-darken10'>child</div>
 * </div>
 */
.flex--start-cross {
  align-items: flex-start !important;
}

/**
 * Align an element's children to the start of the main axis.
 *
 * @memberof Flexbox
 * @example
 * <div class='flex flex--start-main bg-darken10'>
 *  <div class='bg-darken10'>child</div>
 * </div>
 */
.flex--start-main {
  justify-content: flex-start !important;
}

/**
 * Align an element's children to the end of the cross axis.
 *
 * @memberof Flexbox
 * @example
 * <div class='flex flex--end-cross h120 bg-darken10'>
 *  <div class='bg-darken10 h42'>child</div>
 *  <div class='bg-darken10'>child</div>
 * </div>
 */
.flex--end-cross {
  align-items: flex-end !important;
}

/**
 * Align an element's children to the end of the main axis.
 *
 * @memberof Flexbox
 * @example
 * <div class='flex flex--end-main bg-darken10'>
 *  <div class='bg-darken10'>child</div>
 * </div>
 */
.flex--end-main {
  justify-content: flex-end !important;
}

/**
 * Allow children to wrap. By default, they are all forced onto one line.
 *
 * @memberof Flexbox
 * @example
 * <div class='flex flex--wrap bg-darken10 overflow-hidden'>
 *  <div class='bg-darken10 w600'>child</div>
 *  <div class='bg-darken10 w600'>child</div>
 * </div>
 */
.flex--wrap {
  flex-wrap: wrap !important;
}

/**
 * Stretch children to fill the parent container along the cross axis.
 *
 * @memberof Flexbox
 * @example
 * <div class='flex flex--stretch-cross bg-darken10 h120'>
 *  <div class='bg-darken10'>child</div>
 * </div>
 */
.flex--stretch-cross {
  align-items: stretch !important;
}

/**
 * Evenly distribute children across the line, so first child is at the start
 * and last child is at the end.
 *
 * @memberof Flexbox
 * @example
 * <div class='flex flex--space-between-main bg-darken10 h120'>
 *  <div class='bg-darken10'>child</div>
 *  <div class='bg-darken10'>child</div>
 * </div>
 */
.flex--space-between-main {
  justify-content: space-between !important;
}

/**
 * Make a child to grow to fill whatever space is available in the main axis of the parent container.
 * This is useful when you have one or more elements of
 * fixed width, and another element that should take up the remaining space in the row.
 *
 * Typically, you will also want to apply the `flex-child-no-shrink` class to the element in the row with a fixed width.
 *
 * @memberof Flexbox
 * @example
 * <div class='flex bg-darken10'>
 *  <div class='flex-child-no-shrink border w240'>child</div>
 *  <div class='flex-child-grow border'>child</div>
 * </div>
 */
.flex-child-grow {
  flex-grow: 1 !important;
  min-width: 0;
}

/**
 * Prevent a child from shrinking below its width value.
 *
 * By default, flex children (even with specified widths) will shrink as needed to accommodate sibling elements.
 * This class prevents that default shrinkage, forcing siblings to accommodate the parent's width.
 *
 * @memberof Flexbox
 * @example
 * <div class='flex bg-darken10 w240'>
 *  <div class='flex-child-no-shrink border w120'>child</div>
 *  <div class='border w120'>child</div>
 *  <div class='border w120'>child</div>
 * </div>
 */
.flex-child-no-shrink {
  flex-shrink: 0 !important;
}

/* end flex */

/**
 * Extra layout utilities.
 *
 * @memberof Layout
 * @section Layout utils
 */

/**
 * Bleed utilities. Bleed classes allow an element inside a centered container to escape the container and meet the edge of the screen.
 * When using the bleed classes, consider adding the `.overflow-hidden` class on a parent element to prevent horizontal overflow.
 *
 * *Warning*: Bleeding elements will never bleed out to more than 50% of the viewport width.
 * So you should not make an element bleed to one side unless it's already on that half of
 * the screen.
 *
 * *Warning*: In Firefox, children with negative margins have different layout effects than in other browsers.
 * The bleed classes should only be used if the parent's width is stable, either because it is set or because other children determine it.
 *
 * Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 * These screen-size variants are best suited to *adding* the bleed, not *removing* it.
 * Be aware of the effects of the `unbleed` class: it resets `margin-left`, `margin-right`,
 * and `flex-child-grow`.
 *
 * @group
 * @example
 * <div class='bg-darken10 flex flex--center-main overflow-hidden'>
 *   <div class='w240 px12 py12 bg-darken10'>
 *     <div class='bg-darken10 bleed-r'>Right bleed</div>
 *   </div>
 * </div>
 *
 * @memberof Layout utils
 */
.bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bleed-r {
  flex-grow: 1;
  margin-right: calc(50% - 50vw);
}
.bleed-l {
  flex-grow: 1;
  margin-left: calc(50% - 50vw);
}
.unbleed {
  flex-grow: 0;
  margin-left: 0;
  margin-right: 0;
}
/* @endgroup */

/**
 * Float utilities. Class set (except `clearfix`) includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * @group
 * @memberof Layout utils
 * @example
 * <div class='clearfix'>
 *   <div class='fl bg-darken10'>left</div>
 * </div>
 * <div> with .clearfix </div>
 * <div class='fr bg-darken10'>right</div>
 * <div class='bg-darken10'> without .clearfix </div>
 * <div class='fl unfloat'>unfloat</div>
 */
.fl {
  float: left !important;
}
.fr {
  float: right !important;
}
.unfloat {
  float: none !important;
}
.clearfix::after {
  content: '' !important;
  display: block !important;
  clear: both !important;
}
/** @endgroup */