////////////////////////////////////////////////////////////////////////////////////
// Generator. //////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
//
// This file is meant to create all the utility classes we need. Some of them are
// also being generated with responsiveness in mind.
// Read more about its parameters in config/import.scss

@import 'import';

@include initialize-generator(
  $breakpoints,
  (
    'color',
    'color',
    ('transparent': transparent, 'current': currentColor),
    $colors,
    false
  ),
  (
    'bg',
    'background-color',
    ('transparent': transparent, 'current': currentColor),
    $colors,
    false
  ),
  (
    'border',
    'border-color',
    ('transparent': transparent, 'current': currentColor),
    $colors,
    false
  ),
  (
    'opacity',
    'opacity',
    // Explicitly set opacity-0 to 0.00001 to ensure accessibility on ChromeVox. See https://github.com/forem/forem/issues/12939
    ('100': 1, '75': 0.75, '50': 0.5, '25': 0.25, '5': 0.05, '0': 0.00001),
    (),
    false
  ),
  (
    'box',
    'box-sizing',
    ('content': content-box, 'border': border-box),
    (),
    false
  ),
  (
    'cursor',
    'cursor',
    (
      'auto': auto,
      'default': default,
      'pointer': pointer,
      'wait': wait,
      'text': text,
      'move': move,
      'not-allowed': not-allowed,
      'help': help
    ),
    (),
    false
  ),
  ('pointer-events', 'pointer-events', ('auto': auto, 'none': none), (), false),
  (
    'radius',
    'border-radius',
    ('default': var(--radius), '0': 0, 'full': 9999px),
    (),
    false
  ),
  ('flex', 'flex-direction', ('row': row, 'col': column), (), true),
  ('flex', 'flex-wrap', ('wrap': wrap, 'nowrap': nowrap), (), true),
  (
    'items',
    'align-items',
    (
      'stretch': stretch,
      'start': flex-start,
      'center': center,
      'end': flex-end
    ),
    (),
    true
  ),
  (
    'basis',
    'flex-basis',
    (
      '1-5': 20%,
      '2-5': 40%,
      '3-5': 60%,
      '4-5': 80%,
      '1-4': 25%,
      '1-3': 33.333333%,
      '1-2': 50%,
      '2-3': 66.666667%,
      '3-4': 75%
    ),
    (),
    true
  ),
  (
    'content',
    'align-content',
    (
      'start': flex-start,
      'center': center,
      'end': flex-end,
      'between': space-between,
      'around': space-around
    ),
    (),
    true
  ),
  (
    'self',
    'align-self',
    (
      'auto': auto,
      'start': flex-start,
      'center': center,
      'end': flex-end,
      'stretch': stretch
    ),
    (),
    true
  ),
  (
    'justify',
    'justify-content',
    (
      'start': flex-start,
      'center': center,
      'end': flex-end,
      'between': space-between,
      'around': space-around,
      'stretch': stretch
    ),
    (),
    true
  ),
  (
    'flex',
    'flex',
    ('initial': 0 auto, '1': 1 1 0%, 'auto': 1 1 auto, 'none': none),
    (),
    true
  ),
  ('grow', 'flex-grow', ('0': 0, '1': 1), (), false),
  ('shrink', 'flex-shrink', ('0': 0, '1': 1), (), false),
  ('order', 'order', ('first': -9999, 'last': 9999, '0': 0), (), true),
  ('gap', 'gap', ('0': 0, 'px': 1px), $spacing-units, true),
  (
    'grid-cols',
    'grid-template-columns',
    (
      '1': repeat(1, minmax(0, 1fr)),
      '2': repeat(2, minmax(0, 1fr)),
      '3': repeat(3, minmax(0, 1fr)),
      '4': repeat(4, minmax(0, 1fr)),
      '5': repeat(5, minmax(0, 1fr)),
      '6': repeat(6, minmax(0, 1fr)),
      '7': repeat(7, minmax(0, 1fr)),
      '8': repeat(8, minmax(0, 1fr)),
      '9': repeat(9, minmax(0, 1fr)),
      '10': repeat(10, minmax(0, 1fr)),
      '11': repeat(11, minmax(0, 1fr)),
      '12': repeat(12, minmax(0, 1fr))
    ),
    (),
    true
  ),
  (
    'grid-rows',
    'grid-template-rows',
    (
      'none': none,
      '1': repeat(1, minmax(0, 1fr)),
      '2': repeat(2, minmax(0, 1fr)),
      '3': repeat(3, minmax(0, 1fr))
    ),
    (),
    true
  ),
  ('grid-flow', 'grid-auto-flow', ('row': row, 'col': column), (), true),
  (
    'float',
    'float',
    ('left': left, 'right': right, 'none': none, 'unset': unset),
    (),
    false
  ),
  ('border', 'border-style', ('solid': solid, 'none': none), (), false),
  ('border', 'border-width', ('0': 0, '1': 1px, '2': 2px), (), false),
  ('border', 'border-top-width', ('t-0': 0, 't-1': 1px, 't-2': 2px), (), false),
  (
    'border',
    'border-bottom-width',
    ('b-0': 0, 'b-1': 1px, 'b-2': 2px),
    (),
    false
  ),
  (
    'border',
    'border-left-width',
    ('l-0': 0, 'l-1': 1px, 'l-2': 2px),
    (),
    false
  ),
  (
    'border',
    'border-right-width',
    ('r-0': 0, 'r-1': 1px, 'r-2': 2px),
    (),
    false
  ),
  (
    'inset',
    ('top', 'left', 'right', 'bottom'),
    ('px': 1px, 'unset': unset, '0': 0),
    (),
    false
  ),
  (
    'top',
    'top',
    ('auto': auto, 'unset': unset, '0': 0, '100': 100%),
    $spacing-units,
    true
  ),
  ('-top', 'top', ('100': -100%), $negative-spacing-units, true),
  (
    'bottom',
    'bottom',
    ('auto': auto, 'unset': unset, '0': 0, '100': 100%),
    $spacing-units,
    true
  ),
  ('-bottom', 'bottom', ('100': -100%), $negative-spacing-units, true),
  (
    'left',
    'left',
    ('auto': auto, 'unset': unset, '0': 0, '100': 100%),
    $spacing-units,
    true
  ),
  ('-left', 'left', ('100': -100%), $negative-spacing-units, true),
  (
    'right',
    'right',
    ('auto': auto, 'unset': unset, '0': 0, '100': 100%),
    $spacing-units,
    true
  ),
  ('-right', 'right', ('100': -100%), $negative-spacing-units, true),
  ('z', 'z-index', $z-indexes, (), false),
  (
    'overflow',
    'overflow',
    ('auto': auto, 'visible': visible, 'hidden': hidden),
    (),
    true
  ),
  ('overflow-x', 'overflow-x', ('auto': auto, 'hidden': hidden), (), false),
  ('overflow-y', 'overflow-y', ('auto': auto, 'hidden': hidden), (), false),
  (
    'w',
    'width',
    (
      '0': 0,
      '10': 10%,
      '15': 15%,
      '25': 25%,
      '50': 50%,
      '60': 60%,
      '70': 70%,
      '75': 75%,
      '80': 80%,
      '100': 100%,
      'auto': auto,
      'full': 100vw,
      'max': max-content,
      'fit': fit-content
    ),
    (),
    true
  ),
  ('min-w', 'min-width', ('0': 0, '100': 100%, 'unset': unset), (), false),
  (
    'h',
    'height',
    (
      '0': 0,
      '25': 25%,
      '50': 50%,
      '75': 75%,
      '100': 100%,
      'auto': auto,
      'full': 100vh,
      'unset': unset
    ),
    (),
    false
  ),
  (
    'min-h',
    'min-height',
    ('0': 0, '100': 100%, 'full': 100vh, 'unset': unset),
    (),
    false
  ),
  (
    'max-w',
    'max-width',
    ('0': 0, '25': 25%, '50': 50%, '75': 75%, '100': 100%, 'unset': unset),
    (),
    true
  ),
  ('m', 'margin', ('auto': auto, 'unset': unset, '0': 0), $spacing-units, true),
  ('-m', 'margin', $negative-spacing-units, (), true),
  (
    'my',
    ('margin-top', 'margin-bottom'),
    ('auto': auto, 'unset': unset, '0': 0),
    $spacing-units,
    true
  ),
  ('-my', ('margin-top', 'margin-bottom'), $negative-spacing-units, (), true),
  (
    'mx',
    ('margin-left', 'margin-right'),
    ('auto': auto, 'unset': unset, '0': 0),
    $spacing-units,
    true
  ),
  ('-mx', ('margin-left', 'margin-right'), $negative-spacing-units, (), true),
  (
    'mt',
    'margin-top',
    ('auto': auto, 'unset': unset, '0': 0),
    $spacing-units,
    true
  ),
  ('-mt', 'margin-top', $negative-spacing-units, (), true),
  (
    'mb',
    'margin-bottom',
    ('auto': auto, 'unset': unset, '0': 0),
    $spacing-units,
    true
  ),
  ('-mb', 'margin-bottom', $negative-spacing-units, (), true),
  (
    'ml',
    'margin-left',
    ('auto': auto, 'unset': unset, '0': 0),
    $spacing-units,
    true
  ),
  ('-ml', 'margin-left', $negative-spacing-units, (), true),
  (
    'mr',
    'margin-right',
    ('auto': auto, 'unset': unset, '0': 0),
    $spacing-units,
    true
  ),
  ('-mr', 'margin-right', $negative-spacing-units, (), true),
  ('p', 'padding', ('0': 0, 'unset': unset), $spacing-units, true),
  (
    'py',
    ('padding-top', 'padding-bottom'),
    ('0': 0, 'unset': unset),
    $spacing-units,
    true
  ),
  (
    'px',
    ('padding-left', 'padding-right'),
    ('0': 0, 'unset': unset),
    $spacing-units,
    true
  ),
  ('pt', 'padding-top', ('0': 0, 'unset': unset), $spacing-units, true),
  ('pb', 'padding-bottom', ('0': 0, 'unset': unset), $spacing-units, true),
  ('pl', 'padding-left', ('0': 0, 'unset': unset), $spacing-units, true),
  ('pr', 'padding-right', ('0': 0, 'unset': unset), $spacing-units, true),
  ('ff', 'font-family', ('monospace': var(--ff-monospace)), (), false),
  (
    'fs',
    'font-size',
    (
      '2xs': var(--fs-2xs),
      'xs': var(--fs-xs),
      's': var(--fs-s),
      'base': var(--fs-base),
      'l': var(--fs-l),
      'xl': var(--fs-xl),
      '2xl': var(--fs-2xl),
      '3xl': var(--fs-3xl),
      '4xl': var(--fs-4xl),
      '5xl': var(--fs-5xl)
    ),
    (),
    true
  ),
  (
    'lh',
    'line-height',
    ('tight': var(--lh-tight), 'base': var(--lh-base)),
    (),
    false
  ),
  (
    'fw',
    'font-weight',
    (
      'normal': var(--fw-normal),
      'medium': var(--fw-medium),
      'bold': var(--fw-bold),
      'heavy': var(--fw-heavy)
    ),
    (),
    true
  ),
  (
    'list',
    'list-style-type',
    ('none': none, 'disc': disc, 'decimal': decimal),
    (),
    false
  ),
  (
    'text',
    'text-decoration',
    ('underline': underline, 'none': none),
    (),
    false
  ),
  ('fs', 'font-style', ('italic': italic), (), false),
  ('text', 'text-transform', ('uppercase': uppercase), (), false),
  (
    'align',
    'text-align',
    ('left': left, 'center': center, 'right': right),
    (),
    true
  ),
  (
    'align',
    'vertical-align',
    (
      'top': top,
      'middle': middle,
      'text-top': text-top,
      'text-bottom': text-bottom
    ),
    (),
    false
  ),
  ('whitespace', 'white-space', ('nowrap': nowrap), (), false),
  (
    null,
    'display',
    (
      'hidden': none,
      'block': block,
      'inline': inline,
      'inline-block': inline-block,
      'flex': flex,
      'inline-flex': inline-flex,
      'grid': grid,
      'table': table
    ),
    (),
    true,
    null
  ),
  (
    null,
    'position',
    (
      'static': static,
      'absolute': absolute,
      'fixed': fixed,
      'sticky': sticky,
      'relative': relative
    ),
    (),
    true,
    null
  ),
  ('object', 'object-fit', ('cover': cover), (), false),
  ('aspect', 'aspect-ratio', ('16-9': calc(16 / 9)), (), false),
  ('break', 'word-break', ('word': break-word), (), false),
  ('resize', 'resize', ('y': vertical), (), false)
);
