/* provide flex utilities in lieu of float based layouts */

:root {
  --gap-1: 0.5rem;
}

.flex,
:local(.flex) {
  display: flex;
}

.inline-flex,
:local(.inline-flex) {
  display: inline-flex;
}

.flex-auto,
:local(.flex-auto) {
  flex: auto;
}

.flex-full,
:local(.flex-full) {
  flex: 1 0 auto;
}

.flex-half,
:local(.flex-half) {
  flex: 0.5;
}

.flex-3-quarters,
:local(.flex-3-quarters) {
  flex: 0.75;
}

.flex-1-quarter,
:local(.flex-1-quarter) {
  flex: 0.25;
}

.flex-no-shrink,
:local(.flex-no-shrink) {
  flex-shrink: 0;
}

/* The behavior of how `flex: <flex-grow>` sets flex-basis is inconsistent across
 * browsers. Specifically:
 * - On Chrome and FF it's set to `flex-basis: 0%`. That behaves equally as `height: 0%`.
 *   It means that if the containing block has no explicit height, then `height: 0%` is computed as `height: auto`,
 *   and element grows as its content grows. That is the most common scenario in Metabase codebase.
 * - On older IEs it's set to `flex-basis: 0` which means that the initial main size of flex item is zero.
 *   It is also notable that `flex-basis: 0%` doesn't work correctly on IE.
 *
 *  As a solution, `flex-basis-auto` should always be used in conjunction with `flex-full` when it is
 *  a desired behavior that the element grows with its contents.
*/
.flex-basis-auto {
  flex-basis: auto;
}

.flex-basis-none {
  flex-basis: 0;
}

.shrink-below-content-size {
  /* W3C spec says:
     * By default, flex items won’t shrink below their minimum content size (the length of the longest word or
     * fixed-size element). To change this, set the min-width or min-height property.
     */
  min-width: 0;
  min-height: 0;
}

.align-center,
:local(.align-center) {
  align-items: center;
}

.align-baseline,
:local(.align-baseline) {
  align-items: baseline;
}

.justify-center,
:local(.justify-center) {
  justify-content: center;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-stretch {
  align-items: stretch;
}

.align-self-end,
:local(.align-self-end) {
  align-self: flex-end;
}

.align-self-start,
:local(.align-self-start) {
  align-self: flex-start;
}

.align-self-center {
  align-self: center;
}

.align-self-stretch {
  align-self: stretch;
}

.flex-align-right,
:local(.flex-align-right) {
  margin-left: auto;
}

@media screen and (--breakpoint-min-sm) {
  .sm-flex-align-right {
    margin-left: auto;
  }
}

@media screen and (--breakpoint-min-md) {
  .md-flex-align-right {
    margin-left: auto;
  }
}

@media screen and (--breakpoint-min-lg) {
  .lg-flex-align-right {
    margin-left: auto;
  }
}

.layout-centered,
:local(.layout-centered) {
  align-items: center;
  justify-content: center;
}

@media screen and (--breakpoint-min-sm) {
  .sm-layout-centered {
    align-items: center;
    justify-content: center;
  }
}

@media screen and (--breakpoint-min-md) {
  .md-layout-centered {
    align-items: center;
    justify-content: center;
  }
}

@media screen and (--breakpoint-min-lg) {
  .lg-layout-centered {
    align-items: center;
    justify-content: center;
  }
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

@media screen and (--breakpoint-min-sm) {
  .sm-flex-column {
    flex-direction: column;
  }
}

@media screen and (--breakpoint-min-md) {
  .md-flex-column {
    flex-direction: column;
  }
}

.flex-row,
:local(.flex-row) {
  flex-direction: row;
}

@media screen and (--breakpoint-min-sm) {
  .sm-flex-row {
    flex-direction: row;
  }
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-reverse {
  flex-direction: row-reverse;
}

@media screen and (--breakpoint-min-sm) {
  .sm-flex-reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (--breakpoint-min-md) {
  .md-flex-reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (--breakpoint-min-lg) {
  .lg-flex-reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (--breakpoint-min-xl) {
  .xl-flex-reverse {
    flex-direction: row-reverse;
  }
}

.no-flex {
  flex: 0 1 0%;
}

@media screen and (--breakpoint-min-md) {
  .md-no-flex {
    flex: 0 !important;
  }
}

/* Contents of elements inside flex items might not be wrapped correctly on IE11,
   set max-width manually to enforce wrapping
*/
.ie-wrap-content-fix {
  max-width: 100%;
}

.row-gap-1,
:local(.row-gap-1) {
  row-gap: var(--gap-1);
}