/*
Layout

Styles that allow re-usable layouts.

layout--a - Widest: two even columns
layout--b - Widest: one wide column & one narrow column
layout--c - Widest: one narrow column & one wide column
layout--d - Widest: three even columns
layout--e - (deprecated) Always: multiple even rows

Styleguide Tools.Mixins.Layout
*/
@import url("../tools/media-queries.css");



/* Column-Based */

/* A (two even columns) */

@define-mixin layout--a {
  display: grid;

  @media (--medium-and-below) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  @media (--medium-and-above) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* DEPRECATED */
.x-layout--a {
  @mixin layout--a;
}

/* B (one wide column & one narrow column) */

@define-mixin layout--b {
  display: grid;

  @media (--medium-and-below) {
    grid-template-columns: minmax(0,1fr);
  }
  @media (--medium-and-above) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}
/* DEPRECATED */
.x-layout--b {
  @mixin layout--b;
}

/* C (one narrow column & one wide column) */

@define-mixin layout--c {
  display: grid;

  @media (--medium-and-below) {
    grid-template-columns: minmax(0,1fr);
  }
  @media (--medium-and-above) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}
/* DEPRECATED */
.x-layout--c {
  @mixin layout--c;
}

/* D (three equal columns) */

@define-mixin layout--d {
  display: grid;

  @media (--x-narrow-and-below) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  @media (--narrow-to-medium), (--x-narrow-to-narrow) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (--medium-and-above) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* DEPRECATED */
.x-layout--d {
  @mixin layout--d;
}


/* Row-Based */

@define-mixin layout--e {
  display: flex;
  flex-direction: column;
}
/* DEPRECATED */
.x-layout--e {
  @mixin layout--e;
}