@charset "UTF-8";

[data-flex~="separate"][data-flex-spacing~="medium-1"] {
  font-size: 1rem;
}

[data-flex~="separate"][data-flex-spacing~="medium-2"] {
  font-size: 2rem;
}

[data-flex~="separate"][data-flex-spacing~="medium-3"] {
  font-size: 3rem;
}

[data-flex~="separate"][data-flex-spacing~="medium-4"] {
  font-size: 4rem;
}

[data-flex-item][data-flex-order~="medium-1"] {
  order: 1;
}

[data-flex-item][data-flex-order~="medium-2"] {
  order: 2;
}

[data-flex-item][data-flex-order~="medium-3"] {
  order: 3;
}



[data-flex][data-flex-align~="medium-flex-start"] {
  align-items: flex-start;
}

[data-flex][data-flex-align~="medium-center"] {
  align-items: center;
}

[data-flex][data-flex-align~="medium-stretch"] {
  align-items: stretch;
}

[data-flex][data-flex-align~="medium-flex-end"] {
  align-items: flex-end;
}



[data-flex-item][data-flex-align~="medium-flex-start"] {
  align-self: flex-start;
}

[data-flex-item][data-flex-align~="medium-center"] {
  align-self: center;
}

[data-flex-item][data-flex-align~="medium-stretch"] {
  align-self: stretch;
}

[data-flex-item][data-flex-align~="medium-flex-end"] {
  align-self: flex-end;
}



[data-flex][data-flex-justify~="medium-center"] {
  justify-content: center;
}

[data-flex][data-flex-justify~="medium-flex-start"] {
  justify-content: flex-start;
}

[data-flex][data-flex-justify~="medium-flex-end"] {
  justify-content: flex-end;
}

[data-flex][data-flex-justify~="medium-space-around"] {
  justify-content: space-around;
}



[data-flex][data-flex-wrap~="medium-nowrap"] {
  flex-wrap: nowrap;
}

[data-flex][data-flex-wrap~="medium-wrap"] {
  flex-wrap: wrap;
}



[data-flex] > [data-flex-item~="medium-show"] {
  display: block;
}

[data-flex] > [data-flex-item~="medium-hide"] {
  display: none;
}



/*
  Normal
*/
[data-flex] > [data-flex-item~="medium-10"] {
  flex-basis: 10%;
}

[data-flex] > [data-flex-item~="medium-20"] {
  flex-basis: 20%;
}

[data-flex] > [data-flex-item~="medium-25"] {
  flex-basis: 25%;
}

[data-flex] > [data-flex-item~="medium-30"] {
  flex-basis: 30%;
}

[data-flex] > [data-flex-item~="medium-33"] {
  flex-basis: calc(100% / 3);
}

[data-flex] > [data-flex-item~="medium-40"] {
  flex-basis: 40%;
}

[data-flex] > [data-flex-item~="medium-50"] {
  flex-basis: 50%;
}

[data-flex] > [data-flex-item~="medium-60"] {
  flex-basis: 60%;
}

[data-flex] > [data-flex-item~="medium-66"] {
  flex-basis: calc(100% / 3 * 2);
}

[data-flex] > [data-flex-item~="medium-70"] {
  flex-basis: 70%;
}

[data-flex] > [data-flex-item~="medium-75"] {
  flex-basis: 75%;
}

[data-flex] > [data-flex-item~="medium-80"] {
  flex-basis: 80%;
}

[data-flex] > [data-flex-item~="medium-90"] {
  flex-basis: 90%;
}

[data-flex] > [data-flex-item~="medium-100"] {
  flex-basis: 100%;
}



/*
  Separate
*/
[data-flex~="separate"] > [data-flex-item~="medium-10"] {
  flex-basis: calc(10% - 0.9em);
}

[data-flex~="separate"] > [data-flex-item~="medium-20"] {
  flex-basis: calc(20% - 0.8em);
}

[data-flex~="separate"] > [data-flex-item~="medium-25"] {
  flex-basis: calc(25% - 0.75em);
}

[data-flex~="separate"] > [data-flex-item~="medium-30"] {
  flex-basis: calc(30% - 0.7em);
}

[data-flex~="separate"] > [data-flex-item~="medium-33"] {
  flex-basis: calc( (100% / 3) - (2em / 3) );
}

[data-flex~="separate"] > [data-flex-item~="medium-40"] {
  flex-basis: calc(40% - 0.6em);
}

[data-flex~="separate"] > [data-flex-item~="medium-50"] {
  flex-basis: calc(50% - 0.5em);
}

[data-flex~="separate"] > [data-flex-item~="medium-60"] {
  flex-basis: calc(60% - 0.4em);
}

[data-flex~="separate"] > [data-flex-item~="medium-66"] {
  flex-basis: calc( (100% / 3 * 2) - (1em / 3) );
}

[data-flex~="separate"] > [data-flex-item~="medium-70"] {
  flex-basis: calc(70% - 0.3em);
}

[data-flex~="separate"] > [data-flex-item~="medium-75"] {
  flex-basis: calc(75% - 0.25em);
}

[data-flex~="separate"] > [data-flex-item~="medium-80"] {
  flex-basis: calc(80% - 0.2em);
}

[data-flex~="separate"] > [data-flex-item~="medium-90"] {
  flex-basis: calc(90% - 0.1em);
}

[data-flex~="separate"] > [data-flex-item~="medium-100"] {
  flex-basis: 100%;
}



/*
  Regular Intervals
*/
[data-flex~="reg-int"][data-flex-div~="medium-1"] > [data-flex-item] {
  flex-basis: 100%;
}

[data-flex~="reg-int"][data-flex-div~="medium-2"] > [data-flex-item] {
  flex-basis: calc(100% / 2);
}

[data-flex~="reg-int"][data-flex-div~="medium-3"] > [data-flex-item] {
  flex-basis: calc(100% / 3);
}

[data-flex~="reg-int"][data-flex-div~="medium-4"] > [data-flex-item] {
  flex-basis: calc(100% / 4);
}

[data-flex~="reg-int"][data-flex-div~="medium-5"] > [data-flex-item] {
  flex-basis: calc(100% / 5);
}

[data-flex~="reg-int"][data-flex-div~="medium-6"] > [data-flex-item] {
  flex-basis: calc(100% / 6);
}

[data-flex~="reg-int"][data-flex-div~="medium-7"] > [data-flex-item] {
  flex-basis: calc(100% / 7);
}

[data-flex~="reg-int"][data-flex-div~="medium-8"] > [data-flex-item] {
  flex-basis: calc(100% / 8);
}



/*
  Regular Intervals - Separate
*/
[data-flex~="reg-int"][data-flex~="separate"][data-flex-div~="medium-1"] > [data-flex-item] {
  flex-basis: calc(100% - 1em);
}

[data-flex~="reg-int"][data-flex~="separate"][data-flex-div~="medium-2"] > [data-flex-item] {
  flex-basis: calc(100% / 2 - 1em);
}

[data-flex~="reg-int"][data-flex~="separate"][data-flex-div~="medium-3"] > [data-flex-item] {
  flex-basis: calc(100% / 3 - 1em);
}

[data-flex~="reg-int"][data-flex~="separate"][data-flex-div~="medium-4"] > [data-flex-item] {
  flex-basis: calc(100% / 4 - 1em);
}

[data-flex~="reg-int"][data-flex~="separate"][data-flex-div~="medium-5"] > [data-flex-item] {
  flex-basis: calc(100% / 5 - 1em);
}

[data-flex~="reg-int"][data-flex~="separate"][data-flex-div~="medium-6"] > [data-flex-item] {
  flex-basis: calc(100% / 6 - 1em);
}

[data-flex~="reg-int"][data-flex~="separate"][data-flex-div~="medium-7"] > [data-flex-item] {
  flex-basis: calc(100% / 7 - 1em);
}

[data-flex~="reg-int"][data-flex~="separate"][data-flex-div~="medium-8"] > [data-flex-item] {
  flex-basis: calc(100% / 8 - 1em);
}



[data-flex~="medium-auto"] > [data-flex-item],
[data-flex] > [data-flex-item~="medium-auto"] {
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
}

[data-flex~="medium-auto-fill"] > [data-flex-item],
[data-flex] > [data-flex-item~="medium-auto-fill"] {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
}