@use 'variables' as *;

// All these CSS classes will not be generated if the $use-layout-classes is set to false.
@if $use-layout-classes {
  #{$css-scope} {
    // Layout classes.
    // ----------------------------------------------
    .show {display: block;}
    .hide {display: none;}
    .spacer {flex-grow: 1;}

    .grow {flex-grow: 1;flex-basis: auto;}
    .no-grow {flex-grow: 0;}
    .shrink {flex-shrink: 1;}
    .no-shrink {flex-shrink: 0;}
    .fill-width {width: 100%;}
    .fill-height {height: 100%;}
    .h-auto {height: auto;}
    .h-screen {height: 100vh;}
    .basis-zero {flex-basis: 0;}
    .wrap {flex-wrap: wrap;}
    .no-wrap {flex-wrap: nowrap;}

    .align-start {align-items: flex-start;}
    .align-center {align-items: center;}
    .align-end {align-items: flex-end;}
    .align-self-start {align-self: flex-start;}
    .align-self-center {align-self: center;}
    .align-self-end {align-self: flex-end;}
    .align-self-stretch {align-self: stretch;}
    .justify-start {justify-content: flex-start;}
    .justify-center {justify-content: center;}
    .justify-end {justify-content: flex-end;}
    // There is no justify-self in Flexbox.
    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
    .justify-space-between {justify-content: space-between;}
    .justify-space-around {justify-content: space-around;}
    .justify-space-evenly {justify-content: space-evenly;}

    .text-left {text-align: left;}
    .text-center {text-align: center;}
    .text-right {text-align: right;}
    .text-nowrap {white-space: nowrap;}

    .lh0 {line-height: 1;}
    .lh1 {line-height: 1.2;}
    .lh2 {line-height: 1.4;}
    .lh3 {line-height: 1.6;}
    .lh4 {line-height: 1.8;}
    .lh5 {line-height: 2;}

    .d-flex {display: flex;}
    .d-iflex {display: inline-flex;}
    .d-block {display: block;}
    .d-iblock {display: inline-block;}

    .ovh {overflow: hidden;}
    .ovv {overflow: visible;}
    .ova {overflow: auto;}

    .relative {position: relative;}
    .absolute {position: absolute;}
    .fixed {position: fixed;}
    .sticky {position: sticky;}

    .op05 {opacity: 0.05;}
    @for $i from 0 through 9 {
      .op#{$i} {opacity: $i * 0.1;}
    }
    // ----------------------------------------------

    // Borders (from 0 to 6), radii (from 0 to 6 + `m` for max).
    // ----------------------------------------------
    @for $i from 1 through 6 {
      .bd#{$i} {border: #{$i}px solid var(--w-border-color);}
    }
    .bdx1 {border-left: var(--w-border);border-right: var(--w-border);}
    .bdy1 {border-top: var(--w-border);border-bottom: var(--w-border);}
    .bdl1 {border-left: var(--w-border);}
    .bdr1 {border-right: var(--w-border);}
    .bdt1 {border-top: var(--w-border);}
    .bdb1 {border-bottom: var(--w-border);}
    .bd0 {border: none;}

    @for $i from 1 through 6 {
      .bdrs#{$i} {border-radius: calc(#{$i} * var(--w-base-increment));}
    }
    .bdrsr {border-radius: 999em;}
    .bdrsm {border-radius: 100%;}
    .bdrs0 {border-radius: 0;}
    // ----------------------------------------------

    // Shadows (from -6 to 6).
    // ----------------------------------------------
    @for $i from -6 through -1 {
      .sh#{$i} {
        box-shadow: var(--w-shadow-n#{-1 * $i});
      }
    }
    @for $i from 1 through 6 {
      .sh#{$i} {
        box-shadow: var(--w-shadow-#{$i});
      }
    }
    .sh0 {box-shadow: var(--w-shadow-0);}
    // ----------------------------------------------

    // Spaces.
    // ----------------------------------------------
    // Margin.
    @for $i from 0 through 12 {
      .ma#{$i} {margin: calc(#{$i} * var(--w-base-increment));}
      @if ($i > 0) {.ma-#{$i} {margin: calc(-#{$i} * var(--w-base-increment));}}
    }
    .maa {margin: auto;}
    .ma0 {margin: 0;}

    @for $i from 0 through 12 {
      .mx#{$i} {margin-left: calc(#{$i} * var(--w-base-increment));margin-right: calc(#{$i} * var(--w-base-increment));}
      .my#{$i} {margin-top: calc(#{$i} * var(--w-base-increment));margin-bottom: calc(#{$i} * var(--w-base-increment));}
      @if ($i > 0) {
        .mx-#{$i} {margin-left: calc(-#{$i} * var(--w-base-increment));margin-right: calc(-#{$i} * var(--w-base-increment));}
        .my-#{$i} {margin-top: calc(-#{$i} * var(--w-base-increment));margin-bottom: calc(-#{$i} * var(--w-base-increment));}
      }
    }
    .mxa {margin-left: auto;margin-right: auto;}
    .mya {margin-top: auto;margin-bottom: auto;}
    .mx0 {margin-left: 0;margin-right: 0;}
    .my0 {margin-top: 0;margin-bottom: 0;}

    @for $i from 0 through 12 {
      .mt#{$i} {margin-top: calc(#{$i} * var(--w-base-increment));}
      .mr#{$i} {margin-right: calc(#{$i} * var(--w-base-increment));}
      .mb#{$i} {margin-bottom: calc(#{$i} * var(--w-base-increment));}
      .ml#{$i} {margin-left: calc(#{$i} * var(--w-base-increment));}
      @if ($i > 0) {
        .mt-#{$i} {margin-top: calc(-#{$i} * var(--w-base-increment));}
        .mr-#{$i} {margin-right: calc(-#{$i} * var(--w-base-increment));}
        .mb-#{$i} {margin-bottom: calc(-#{$i} * var(--w-base-increment));}
        .ml-#{$i} {margin-left: calc(-#{$i} * var(--w-base-increment));}
      }
    }
    .mta {margin-top: auto;}
    .mra {margin-right: auto;}
    .mba {margin-bottom: auto;}
    .mla {margin-left: auto;}
    .mt0 {margin-top: 0;}
    .mr0 {margin-right: 0;}
    .mb0 {margin-bottom: 0;}
    .ml0 {margin-left: 0;}

    // Padding.
    @for $i from 1 through 12 {
      .pa#{$i} {padding: calc(#{$i} * var(--w-base-increment));}
    }
    .pa0 {padding: 0;}

    @for $i from 0 through 12 {
      .px#{$i} {padding-left: calc(#{$i} * var(--w-base-increment));padding-right: calc(#{$i} * var(--w-base-increment));}
      .py#{$i} {padding-top: calc(#{$i} * var(--w-base-increment));padding-bottom: calc(#{$i} * var(--w-base-increment));}
    }
    .px0 {padding-left: 0;padding-right: 0;}
    .py0 {padding-top: 0;padding-bottom: 0;}

    @for $i from 0 through 12 {
      .pt#{$i} {padding-top: calc(#{$i} * var(--w-base-increment));}
      .pr#{$i} {padding-right: calc(#{$i} * var(--w-base-increment));}
      .pb#{$i} {padding-bottom: calc(#{$i} * var(--w-base-increment));}
      .pl#{$i} {padding-left: calc(#{$i} * var(--w-base-increment));}
    }
    .pt0 {padding-top: 0;}
    .pr0 {padding-right: 0;}
    .pb0 {padding-bottom: 0;}
    .pl0 {padding-left: 0;}
    // ----------------------------------------------

    // Sizes.
    // ----------------------------------------------
    // In all the sizes below, round(nearest, …, 1px) matches former Sass rounding for px base sizes.
    // Different heights with a mix of odd and even numbers will misalign
    // when vertically centering (vertical-align or align-items center).
    .size--xs {font-size: round(nearest, calc(0.8 * var(--w-base-font-size)), 1px);}
    .size--sm {font-size: round(nearest, calc(0.9 * var(--w-base-font-size)), 1px);}
    .size--md {font-size: round(nearest, calc(1 * var(--w-base-font-size)), 1px);}
    .size--lg {font-size: round(nearest, calc(1.2 * var(--w-base-font-size)), 1px);}
    .size--xl {font-size: round(nearest, calc(1.4 * var(--w-base-font-size)), 1px);}
    // ----------------------------------------------

    // Grid system.
    // ----------------------------------------------
    // CSS variables are not supported in media queries definition yet
    // (https://www.w3.org/TR/css-variables-1/#using-variables),
    // the grid system is done dynamically in dynamic-css.js.

    // @media screen and (min-width: var(--w-breakpoint-xs)) {
    //   @for $i from 0 through $grid-base {
    //     .sm#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
    //   }
    // }

    // @media screen and (min-width: var(--w-breakpoint-sm)) {
    //   @for $i from 0 through $grid-base {
    //     .md#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
    //   }
    // }

    // @media screen and (min-width: var(--w-breakpoint-md)) {
    //   @for $i from 0 through $grid-base {
    //     .lg#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
    //   }
    // }

    // @media screen and (min-width: var(--w-breakpoint-lg)) {
    //   @for $i from 0 through $grid-base {
    //     .xl#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
    //   }
    // }
    // ----------------------------------------------
  }
}

@for $i from 1 through 12 {
  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: calc(#{$i} * var(--w-base-increment));}
}
.w-flex.gap0, .w-grid.gap0 {gap: 0;}