//
// Utilities
//

.u-clearfix {
  @include clearfix;
}

.u-img-fluid {
  @include img-fluid;
}

.u-text-truncate {
  @include text-truncate;
}

.u-text-decoration-none\:hover:hover {
  // stylelint-disable-next-line declaration-no-important
  text-decoration: none !important;
}

.u-visually-hidden {
  @include visually-hidden();
}

.u-text-style-large-body {
  @include text-style('large-body');
}

.u-text-style-subtitle {
  @include text-style('subtitle');
}

//
// Utilities
//

$margin-utility-values: transform-spaces-map-to-utilty-values(
  map-merge(
    (
      'auto': auto,
      '0': 0,
    ),
    $g-gaps
  )
);
$padding-utility-values: transform-spaces-map-to-utilty-values($g-pads);

$g-utilities: (
  'float': (
    property: float,
    values: left right none,
  ),
  'border-radius': (
    property: border-radius,
    values: (
      '50' + quote(\%): 50%,
    ),
  ),
  'position': (
    property: position,
    values: static relative,
  ),
  'overflow': (
    property: overflow,
    values: hidden,
  ),
  'table-layout': (
    property: table-layout,
    values: fixed,
  ),
  'user-select': (
    property: user-select,
    values: none,
  ),
  'pointer-events': (
    property: pointer-events,
    values: none,
  ),
  'cursor': (
    property: cursor,
    values: pointer,
  ),
  'color': (
    property: color,
    values: (
      'muted': $g-text-muted-color,
      'primary': $color-primary,
      'secondary': $color-secondary,
      'success': $color-success,
      'danger': $color-danger,
      'warning': $color-warning,
      'primary-900': color-palette('primary', 900),
    ),
  ),
  'background-color': (
    property: background-color,
    values: (
      'primary': $color-primary,
      'success': $color-success,
      'danger': $color-danger,
      'warning': $color-warning,
    ),
  ),
  'display': (
    property: display,
    values: (
      value: block,
      responsive: true,
    )
    (
      value: none,
      responsive: true,
    )
    (
      value: flex,
      responsive: true,
    )
    inline inline-block table table-row table-cell inline-flex,
  ),
  'flex': (
    property: flex,
    values: 1 none,
  ),
  'flex-grow': (
    property: flex-grow,
    values: 1,
  ),
  'flex-shrink': (
    property: flex-shrink,
    values: 0,
  ),
  'flex-basis': (
    property: flex-basis,
    values: (
      '100' + quote(\%): 100%,
    ),
  ),
  'flex-direction': (
    property: flex-direction,
    values: row row-reverse column column-reverse,
  ),
  'flex-wrap': (
    property: flex-wrap,
    values: wrap nowrap wrap-reverse,
  ),
  'justify-content': (
    property: justify-content,
    values: flex-start flex-end center space-between space-around,
  ),
  'align-items': (
    property: align-items,
    values: flex-start flex-end center baseline stretch,
  ),
  'align-content': (
    property: align-content,
    values: flex-start flex-end center space-between space-around stretch,
  ),
  'align-self': (
    property: align-self,
    values: auto flex-start flex-end center stretch,
  ),
  'max-width': (
    property: max-width,
    values: (
      '100' + quote(\%): 100%,
    ),
  ),
  'min-width': (
    property: min-width,
    values: (
      '100' + quote(\%): 100%,
      '0': 0,
    ),
  ),
  'width': (
    property: width,
    values: (
      '100' + quote(\%):
        (
          value: 100%,
          responsive: true,
        ),
      'auto': (
        value: auto,
        responsive: true,
      ),
      '50' + quote(\%): 50%,
    ),
  ),
  'height': (
    property: height,
    values: (
      '100' + quote(\%): 100%,
      '100vh': 100vh,
    ),
  ),
  'font-size': (
    property: font-size,
    values: (
      '2xsmall': $g-font-size-2xsmall,
      'xsmall': $g-font-size-xsmall,
      'small': $g-font-size-small,
      'base': $g-font-size-base,
      'medium': $g-font-size-medium,
      'large': $g-font-size-large,
      'xlarge': $g-font-size-xlarge,
    ),
  ),
  'word-break': (
    property: word-break,
    values: break-all,
  ),
  'white-space': (
    property: white-space,
    values: nowrap,
  ),
  'text-decoration': (
    property: text-decoration,
    values: underline none,
  ),
  'text-align': (
    property: text-align,
    values: left right center justify,
  ),
  'text-transform': (
    property: text-transform,
    values: lowercase uppercase capitalize,
  ),
  'font-weight': (
    property: font-weight,
    values: 300 400 500 600 700,
  ),
  'vertical-align': (
    property: vertical-align,
    values: top bottom middle baseline text-bottom,
  ),
  'margin': (
    property: margin,
    values: $margin-utility-values,
  ),
  'margin-top': (
    property: margin-top,
    values: $margin-utility-values,
  ),
  'margin-bottom': (
    property: margin-bottom,
    values: $margin-utility-values,
  ),
  'margin-left': (
    property: margin-left,
    values: $margin-utility-values,
  ),
  'margin-right': (
    property: margin-right,
    values: $margin-utility-values,
  ),
  'margin-sides': (
    property: margin-left margin-right,
    values: $margin-utility-values,
  ),
  'margin-ends': (
    property: margin-top margin-bottom,
    values: $margin-utility-values,
  ),
  'padding': (
    property: padding,
    values: $padding-utility-values,
  ),
  'padding-top': (
    property: padding-top,
    values: $padding-utility-values,
  ),
  'padding-bottom': (
    property: padding-bottom,
    values: $padding-utility-values,
  ),
  'padding-left': (
    property: padding-left,
    values: $padding-utility-values,
  ),
  'padding-right': (
    property: padding-right,
    values: $padding-utility-values,
  ),
  'padding-sides': (
    property: padding-left padding-right,
    values: $padding-utility-values,
  ),
  'padding-ends': (
    property: padding-top padding-bottom,
    values: $padding-utility-values,
  ),
);

@each $key, $utility in $g-utilities {
  @include generate-utility($utility, $key);
}
