@import “variables”; @import “functions”;

$utilities: () !default;

$utilities: map-merge(

(
  "align": (
    property: vertical-align,
    class: align,
    values: baseline top middle bottom text-bottom text-top
  ),
  "float": (
    property: float,
    class: float,
    values: (
      start: left,
      end: right,
      none: none,
    )
  ),
  "overflow": (
    property: overflow,
    class: overflow,
    values: auto hidden visible scroll,
  ),
  "display": (
    property: display,
    class: d,
    values: inline inline-block block grid table table-row table-cell flex inline-flex none
  ),
  "flex": (
    property: flex,
    class: flex,
    values: 1 auto none
  ),
  "flex-grow": (
    property: flex-grow,
    class: flex,
    values: (
      grow-0: 0,
      grow-1: 1,
    )
  ),
  "flex-direction": (
    property: flex-direction,
    class: flex,
    values: row column row-reverse column-reverse
  ),
  "justify-content": (
    property: justify-content,
    class: justify-content,
    values: (
      start: flex-start,
      end: flex-end,
      center: center,
      between: space-between,
      around: space-around,
      evenly: space-evenly,
    )
  ),
  "align-items": (
    property: align-items,
    class: align-items,
    values: (
      start: flex-start,
      end: flex-end,
      center: center,
      baseline: baseline,
      stretch: stretch,
    )
  ),
  "align-content": (
    property: align-content,
    class: align-content,
    values: (
      start: flex-start,
      end: flex-end,
      center: center,
      between: space-between,
      around: space-around,
      stretch: stretch,
    )
  ),
  "align-self": (
    property: align-self,
    class: align-self,
    values: (
      auto: auto,
      start: flex-start,
      end: flex-end,
      center: center,
      baseline: baseline,
      stretch: stretch,
    )
  ),
  "font-weight": (
    property: font-weight,
    class: fw,
    values: (
      light: $font-weight-light,
      lighter: $font-weight-lighter,
      normal: $font-weight-normal,
      bold: $font-weight-bold,
      bolder: $font-weight-bolder
    )
  ),
  "text-align": (
    property: text-align,
    class: text,
    values: (
      start: left,
      end: right,
      center: center,
    )
  ),
  "text-decoration": (
    property: text-decoration,
    class: text-decoration,
    values: none underline line-through
  ),
  "user-select": (
    property: user-select,
    class: user-select,
    values: all auto none
  ),
  "margin": (
    property: margin,
    class: m,
    values: (auto: auto)
  ),
  "white-space": (
    property: white-space,
    class: white-space,
    values: normal nowrap pre pre-wrap pre-line break-spaces
  ),
  "cursor": (
    property: cursor,
    class: cursor,
    values: default pointer auto text crosshair move help wait
  ),
  "width": (
    property: width,
    class: w,
    values: (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%
    )
  ),
  "height": (
    property: height,
    class: h,
    values: (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%
    )
  ),
  "list-style-type": (
    property: list-style-type,
    class: list-style,
    values: none disc circle square decimal
  ),
  "position": (
    property: position,
    class: position,
    values: absolute fixed relative static sticky inherit initial
  ),
),
$utilities

);

// Build utilities @include media($utilities); @each $key in map-keys($grid-breakpoints) {

@if $key == 'xs' {
  @include media-xs() {
    @include media($utilities, -#{$key})
  }
}

@if $key == 'sm' {
  @include media-sm() {
    @include media($utilities, -#{$key})
  }
}

@if $key == 'md' {
  @include media-md() {
    @include media($utilities, -#{$key})
  }
}

}