@charset "UTF-8";

/**
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
 */
.flex {
    --columns : 12;

    --align-items:normal;
    --display:flex;
    --flex-direction:row;
    --flex-wrap:nowrap;
    --justify-content:normal;

    align-items:var(--align-items);
    display:var(--display);
    flex-direction:var(--flex-direction);
    flex-wrap:var(--flex-wrap);
    justify-content:var(--justify-content);

    --column-gap:calc(var(--gap) * var(--column-gap-level, var(--level0)) * var(--gap-scale, var(--normal)));
    --row-gap:calc(var(--gap) * var(--row-gap-level, var(--level0)) * var(--gap-scale, var(--normal)));

    column-gap:var(--column-gap);
    row-gap:var(--row-gap);

    min-width:0em;
}

.flex.inline { --display:inline-flex; }

/**
 * MORE
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 */
.flex.ai-normal     { --align-items:normal; }
.flex.ai-baseline   { --align-items:baseline; }
.flex.ai-center     { --align-items:center; }
.flex.ai-end        { --align-items:end; }
.flex.ai-flex-end   { --align-items:flex-end; }
.flex.ai-flex-start { --align-items:flex-start; }
.flex.ai-start      { --align-items:start; }
.flex.ai-stretch    { --align-items:stretch; }
.flex.ai-self-end   { --align-items:self-end; }
.flex.ai-self-start { --align-items:self-start; }

/**
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
 */
.flex.fd-row            { --flex-direction:row; }
.flex.fd-row-reverse    { --flex-direction:row-reverse; }
.flex.fd-column         { --flex-direction:column; }
.flex.fd-column-reverse { --flex-direction:column-reverse; }

/**
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
 */
.flex.fw-nowrap         { --flex-wrap:nowrap; }
.flex.fw-wrap           { --flex-wrap:wrap; }
.flex.fw-wrap-reverse   { --flex-wrap:wrap-reverse; }

/**
 * MORE
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 */
.flex.jc-center { --justify-content:center; }
.flex.jc-start { --justify-content:start; }
.flex.jc-end { --justify-content:end; }
.flex.jc-end-f { --justify-content:flex-end; }
.flex.jc-start-f { --justify-content:flex-start; }
.flex.jc-left { --justify-content:left; }
.flex.jc-right { --justify-content:right; }
.flex.jc-normal { --justify-content:normal; }
.flex.jc-between { --justify-content:space-between; }
.flex.jc-around { --justify-content:space-around; }
.flex.jc-evenly { --justify-content:space-evenly; }
.flex.jc-stretch { --justify-content:stretch; }

/**
 * MORE
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
 */
.flex > .as-auto { --align-self:auto; }
.flex > .as-normal { --align-self:normal; }
.flex > .as-start { --align-self:start; }
.flex > .as-end { --align-self:end; }
.flex > .as-end-s { --align-self:end-self; }
.flex > .as-start-s { --align-self:start-self; }
.flex > .as-start-f { --align-self:start-flex; }
.flex > .as-end-f { --align-self:end-flex; }
.flex > .as-center { --align-self:center; }
.flex > .as-stretch { --align-self:stretch; }

.flex > * {
    /* DEFAULT */
    --flex-grow:0; --flex-shrink:0; --flex-basis:auto;
    /*   SCALE          REDUCE             BASIS */

    flex-grow:var(--flex-grow);
    flex-shrink:var(--flex-shrink);
    flex-basis:var(--flex-basis);
    /* overflow:auto; */

    --align-self:auto;

    align-self:var(--align-self);

    /* max-width:100%; */
}

.flex[class*="gap(X1)"], .flex[class*="gap(1)"] { --column-gap-level:var(--level1); }
.flex[class*="gap(Y1)"], .flex[class*="gap(1)"] { --row-gap-level:var(--level1); }

.flex[class*="gap(X2)"], .flex[class*="gap(2)"] { --column-gap-level:var(--level2); }
.flex[class*="gap(Y2)"], .flex[class*="gap(2)"] { --row-gap-level:var(--level2); }

.flex[class*="gap(X3)"], .flex[class*="gap(3)"] { --column-gap-level:var(--level3); }
.flex[class*="gap(Y3)"], .flex[class*="gap(3)"] { --row-gap-level:var(--level3); }

.flex[class*="gap(X4)"], .flex[class*="gap(4)"] { --column-gap-level:var(--level4); }
.flex[class*="gap(Y4)"], .flex[class*="gap(4)"] { --row-gap-level:var(--level4); }


[class*="mini::gap("]       { --gap-scale:var(--mini); }
[class*="tiny::gap("]       { --gap-scale:var(--tiny); }
[class*="small::gap("]      { --gap-scale:var(--small); }
[class*="medium::gap("]     { --gap-scale:var(--medium); }
[class*="normal::gap("]     { --gap-scale:var(--normal); }
[class*="large::gap("]      { --gap-scale:var(--large); }
[class*="big::gap("]        { --gap-scale:var(--big); }
[class*="huge::gap("]       { --gap-scale:var(--huge); }
[class*="massive::gap("]    { --gap-scale:var(--massive); }

.flex[class*="col-("] > *, .flex > [class*="col("] {
    --column:1;
    --flex-grow:0;
    --flex-basis:calc((((100% + var(--column-gap)) / var(--columns)) * var(--column)) - var(--column-gap));
}

.flex.col- > :not([class*="col("]), .flex > .col { --flex-grow:0; --column:0; }
.flex.col-\(full\) > :not([class*="col("]), .flex > .col\(full\) { --flex-grow:1; --flex-shrink:1; --column:0; }

.flex.col-\(1\)  > :not([class*="col("]), .flex > .col\(1\)  { --column:1; }
.flex.col-\(2\)  > :not([class*="col("]), .flex > .col\(2\)  { --column:2; }
.flex.col-\(3\)  > :not([class*="col("]), .flex > .col\(3\)  { --column:3; }
.flex.col-\(4\)  > :not([class*="col("]), .flex > .col\(4\)  { --column:4; }
.flex.col-\(5\)  > :not([class*="col("]), .flex > .col\(5\)  { --column:5; }
.flex.col-\(6\)  > :not([class*="col("]), .flex > .col\(6\)  { --column:6; }
.flex.col-\(7\)  > :not([class*="col("]), .flex > .col\(7\)  { --column:7; }
.flex.col-\(8\)  > :not([class*="col("]), .flex > .col\(8\)  { --column:8; }
.flex.col-\(9\)  > :not([class*="col("]), .flex > .col\(9\)  { --column:9; }
.flex.col-\(10\) > :not([class*="col("]), .flex > .col\(10\) { --column:10; }
.flex.col-\(11\) > :not([class*="col("]), .flex > .col\(11\) { --column:11; }
.flex.col-\(12\) > :not([class*="col("]), .flex > .col\(12\) { --column:12; }