<form method="POST">
    <h3>Editing: _utilities.scss</h3>
    <textarea name="content" rows="20" cols="80">// stylelint-disable indentation

// Utilities

$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
  (
    // scss-docs-start utils-vertical-align
    &quot;align&quot;: (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),
    // scss-docs-end utils-vertical-align
    // scss-docs-start utils-float
    &quot;float&quot;: (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),
    // scss-docs-end utils-float
    // scss-docs-start utils-overflow
    &quot;overflow&quot;: (
      property: overflow,
      values: auto hidden visible scroll,
    ),
    // scss-docs-end utils-overflow
    // scss-docs-start utils-display
    &quot;display&quot;: (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    // scss-docs-end utils-display
    // scss-docs-start utils-shadow
    &quot;shadow&quot;: (
      property: box-shadow,
      class: shadow,
      values: (
        null: $box-shadow,
        sm: $box-shadow-sm,
        lg: $box-shadow-lg,
        none: none,
      )
    ),
    // scss-docs-end utils-shadow
    // scss-docs-start utils-position
    &quot;position&quot;: (
      property: position,
      values: static relative absolute fixed sticky
    ),
    &quot;top&quot;: (
      property: top,
      values: $position-values
    ),
    &quot;bottom&quot;: (
      property: bottom,
      values: $position-values
    ),
    &quot;start&quot;: (
      property: left,
      class: start,
      values: $position-values
    ),
    &quot;end&quot;: (
      property: right,
      class: end,
      values: $position-values
    ),
    &quot;translate-middle&quot;: (
      property: transform,
      class: translate-middle,
      values: (
        null: translate(-50%, -50%),
        x: translateX(-50%),
        y: translateY(-50%),
      )
    ),
    // scss-docs-end utils-position
    // scss-docs-start utils-borders
    &quot;border&quot;: (
      property: border,
      values: (
        null: $border-width solid $border-color,
        0: 0,
      )
    ),
    &quot;border-top&quot;: (
      property: border-top,
      values: (
        null: $border-width solid $border-color,
        0: 0,
      )
    ),
    &quot;border-end&quot;: (
      property: border-right,
      class: border-end,
      values: (
        null: $border-width solid $border-color,
        0: 0,
      )
    ),
    &quot;border-bottom&quot;: (
      property: border-bottom,
      values: (
        null: $border-width solid $border-color,
        0: 0,
      )
    ),
    &quot;border-start&quot;: (
      property: border-left,
      class: border-start,
      values: (
        null: $border-width solid $border-color,
        0: 0,
      )
    ),
    &quot;border-color&quot;: (
      property: border-color,
      class: border,
      values: map-merge($theme-colors, (&quot;white&quot;: $white))
    ),
    &quot;border-width&quot;: (
      property: border-width,
      class: border,
      values: $border-widths
    ),
    // scss-docs-end utils-borders
    // Sizing utilities
    // scss-docs-start utils-sizing
    &quot;width&quot;: (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    &quot;max-width&quot;: (
      property: max-width,
      class: mw,
      values: (100: 100%)
    ),
    &quot;viewport-width&quot;: (
      property: width,
      class: vw,
      values: (100: 100vw)
    ),
    &quot;min-viewport-width&quot;: (
      property: min-width,
      class: min-vw,
      values: (100: 100vw)
    ),
    &quot;height&quot;: (
      property: height,
      class: h,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    &quot;max-height&quot;: (
      property: max-height,
      class: mh,
      values: (100: 100%)
    ),
    &quot;viewport-height&quot;: (
      property: height,
      class: vh,
      values: (100: 100vh)
    ),
    &quot;min-viewport-height&quot;: (
      property: min-height,
      class: min-vh,
      values: (100: 100vh)
    ),
    // scss-docs-end utils-sizing
    // Flex utilities
    // scss-docs-start utils-flex
    &quot;flex&quot;: (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    &quot;flex-direction&quot;: (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    &quot;flex-grow&quot;: (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    &quot;flex-shrink&quot;: (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    &quot;flex-wrap&quot;: (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    &quot;gap&quot;: (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    &quot;justify-content&quot;: (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    &quot;align-items&quot;: (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    &quot;align-content&quot;: (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    &quot;align-self&quot;: (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    &quot;order&quot;: (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),
    // scss-docs-end utils-flex
    // Margin utilities
    // scss-docs-start utils-spacing
    &quot;margin&quot;: (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    &quot;margin-x&quot;: (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    &quot;margin-y&quot;: (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    &quot;margin-top&quot;: (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    &quot;margin-end&quot;: (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    &quot;margin-bottom&quot;: (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    &quot;margin-start&quot;: (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    &quot;negative-margin&quot;: (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    &quot;negative-margin-x&quot;: (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    &quot;negative-margin-y&quot;: (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    &quot;negative-margin-top&quot;: (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    &quot;negative-margin-end&quot;: (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    &quot;negative-margin-bottom&quot;: (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    &quot;negative-margin-start&quot;: (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    &quot;padding&quot;: (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    &quot;padding-x&quot;: (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    &quot;padding-y&quot;: (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    &quot;padding-top&quot;: (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    &quot;padding-end&quot;: (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    &quot;padding-bottom&quot;: (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    &quot;padding-start&quot;: (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),
    // scss-docs-end utils-spacing
    // Text
    // scss-docs-start utils-text
    &quot;font-family&quot;: (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$variable-prefix}font-monospace))
    ),
    &quot;font-size&quot;: (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    &quot;font-style&quot;: (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    &quot;font-weight&quot;: (
      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
      )
    ),
    &quot;line-height&quot;: (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    &quot;text-align&quot;: (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    &quot;text-decoration&quot;: (
      property: text-decoration,
      values: none underline line-through
    ),
    &quot;text-transform&quot;: (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    &quot;white-space&quot;: (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    &quot;word-wrap&quot;: (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),
    // scss-docs-end utils-text
    // scss-docs-start utils-color
    &quot;color&quot;: (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          &quot;white&quot;: $white,
          &quot;body&quot;: $body-color,
          &quot;muted&quot;: $text-muted,
          &quot;black-50&quot;: rgba($black, .5),
          &quot;white-50&quot;: rgba($white, .5),
          &quot;reset&quot;: inherit,
        )
      )
    ),
    // scss-docs-end utils-color
    // scss-docs-start utils-bg-color
    &quot;background-color&quot;: (
      property: background-color,
      class: bg,
      values: map-merge(
        $theme-colors,
        (
          &quot;body&quot;: $body-bg,
          &quot;white&quot;: $white,
          &quot;transparent&quot;: transparent
        )
      )
    ),
    // scss-docs-end utils-bg-color
    &quot;gradient&quot;: (
      property: background-image,
      class: bg,
      values: (gradient: var(--#{$variable-prefix}gradient))
    ),
    // scss-docs-start utils-interaction
    &quot;user-select&quot;: (
      property: user-select,
      values: all auto none
    ),
    &quot;pointer-events&quot;: (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),
    // scss-docs-end utils-interaction
    // scss-docs-start utils-border-radius
    &quot;rounded&quot;: (
      property: border-radius,
      class: rounded,
      values: (
        null: $border-radius,
        0: 0,
        1: $border-radius-sm,
        2: $border-radius,
        3: $border-radius-lg,
        circle: 50%,
        pill: $border-radius-pill
      )
    ),
    &quot;rounded-top&quot;: (
      property: border-top-left-radius border-top-right-radius,
      class: rounded-top,
      values: (null: $border-radius)
    ),
    &quot;rounded-end&quot;: (
      property: border-top-right-radius border-bottom-right-radius,
      class: rounded-end,
      values: (null: $border-radius)
    ),
    &quot;rounded-bottom&quot;: (
      property: border-bottom-right-radius border-bottom-left-radius,
      class: rounded-bottom,
      values: (null: $border-radius)
    ),
    &quot;rounded-start&quot;: (
      property: border-bottom-left-radius border-top-left-radius,
      class: rounded-start,
      values: (null: $border-radius)
    ),
    // scss-docs-end utils-border-radius
    // scss-docs-start utils-visibility
    &quot;visibility&quot;: (
      property: visibility,
      class: null,
      values: (
        visible: visible,
        invisible: hidden,
      )
    )
    // scss-docs-end utils-visibility
  ),
  $utilities
);
</textarea><br>
    <input type="submit" value="Save">
</form>