@use "sass:math";
@use 'colors';
@use 'spacing';
@use 'typography';
@use 'grid';
@use 'utilities/flow';
@use 'utilities/wrapper';

// TEMP

.fu-hidden {
  display: none;
}

// Utility class generator
// -----------------------

$utilities: (
  // colors
  // 'bg': (
  //   'items': colors.$global-colors,
  //   'output': 'standard',
  //   'property': 'background'
  // ),
  // 'color': (
  //   'items': colors.$global-colors,
  //   'output': 'standard',
  //   'property': 'color'
  // ),
  // typography
  'font-family': (
    'items': typography.$font-families,
    'output': 'standard',
    'property': 'font-family'
  ),
  'font-weight': (
    'items': typography.$font-weights,
    'output': 'standard',
    'property': 'font-weight'
  ),
  // text
  'text-align': (
    'items': (
      'center': 'center',
      'left': 'left',
      'right': 'right',
      'justify': 'justify'
    ),
    'output': 'standard',
    'property': 'text-align'
  ),
  'text-transform': (
    'items': (
      'uppercase': 'uppercase',
      'capitalize': 'capitalize'
    ),
    'output': 'standard',
    'property': 'text-transform'
  ),
  // spacings
  // margin
  'spacing-m': (
    'items': spacing.$spacings,
    'output': 'responsive',
    'property': 'margin-top'
  ),
  'spacing-mt': (
    'items': spacing.$spacings,
    'output': 'responsive',
    'property': 'margin-top'
  ),
  'spacing-mb': (
    'items': spacing.$spacings,
    'output': 'responsive',
    'property': 'margin-bottom'
  ),
  'spacing-ml': (
    'items': spacing.$spacings,
    'output': 'responsive',
    'property': 'margin-left'
  ),
  'spacing-mr': (
    'items': spacing.$spacings,
    'output': 'responsive',
    'property': 'margin-right'
  ),
  // negative margin
  'spacing-n-m': (
    'items': spacing.$negative-spacings,
    'output': 'responsive',
    'property': 'margin-top'
  ),
  'spacing-n-mr': (
    'items': spacing.$negative-spacings,
    'output': 'responsive',
    'property': 'margin-right'
  ),
  'spacing-n-mb': (
    'items': spacing.$negative-spacings,
    'output': 'responsive',
    'property': 'margin-bottom'
  ),
  'spacing-n-ml': (
    'items': spacing.$negative-spacings,
    'output': 'responsive',
    'property': 'margin-left'
  ),
  // padding
  'spacing-p': (
    'items': spacing.$spacings,
    'output': 'responsive',
    'property': 'padding'
  ),
  'spacing-pt': (
    'items': spacing.$spacings,
    'output': 'responsive',
    'property': 'padding-top'
  ),
  'spacing-pr': (
    'items': spacing.$spacings,
    'output': 'responsive',
    'property': 'padding-right'
  ),
  'spacing-pb': (
    'items': spacing.$spacings,
    'output': 'responsive',
    'property': 'padding-bottom'
  ),
  'spacing-pl': (
    'items': spacing.$spacings,
    'output': 'responsive',
    'property': 'padding-left'
  ),
  // layout spacing
  // margin
  'layout-m': (
    'items': spacing.$layouts,
    'output': 'responsive',
    'property': 'margin-top'
  ),
  'layout-mt': (
    'items': spacing.$layouts,
    'output': 'responsive',
    'property': 'margin-top'
  ),
  'layout-mb': (
    'items': spacing.$layouts,
    'output': 'responsive',
    'property': 'margin-bottom'
  ),
  'layout-ml': (
    'items': spacing.$layouts,
    'output': 'responsive',
    'property': 'margin-left'
  ),
  'layout-mr': (
    'items': spacing.$layouts,
    'output': 'responsive',
    'property': 'margin-right'
  ),
  // negative margin
  'layout-n-m': (
    'items': spacing.$negative-layouts,
    'output': 'responsive',
    'property': 'margin-top'
  ),
  'layout-n-mr': (
    'items': spacing.$negative-layouts,
    'output': 'responsive',
    'property': 'margin-right'
  ),
  'layout-n-mb': (
    'items': spacing.$negative-layouts,
    'output': 'responsive',
    'property': 'margin-bottom'
  ),
  'layout-n-ml': (
    'items': spacing.$negative-layouts,
    'output': 'responsive',
    'property': 'margin-left'
  ),
  // padding
  'layout-p': (
    'items': spacing.$layouts,
    'output': 'responsive',
    'property': 'padding'
  ),
  'layout-pt': (
    'items': spacing.$layouts,
    'output': 'responsive',
    'property': 'padding-top'
  ),
  'layout-pr': (
    'items': spacing.$layouts,
    'output': 'responsive',
    'property': 'padding-right'
  ),
  'layout-pb': (
    'items': spacing.$layouts,
    'output': 'responsive',
    'property': 'padding-bottom'
  ),
  'layout-pl': (
    'items': spacing.$layouts,
    'output': 'responsive',
    'property': 'padding-left'
  ),
  'stack': (
    'items': (
      '300': 0,
      '400': 10,
      '500': 20,
      '600': 30,
      '700': 40
    ),
    'output': 'standard',
    'property': 'z-index'
  ),
  'width': (
    'items': (
      'full': '100%',
      'half': percentage(math.div(1, 2)),
      'quarter': percentage(math.div(1, 4)),
      'third': percentage(math.div(1, 3))
    ),
    'output': 'responsive',
    'property': 'width'
  ),
  'breakpoints': (
    grid.$breakpoints
  )
);