@import './functions';

$variable-prefix: maju-;
$max-col: 12;
$max-row: 12;

$breakpoints: (
  'xs': 0,
  'sm': 480,
  'md': 768,
  'lg': 1024,
  'xl': 1280,
  'xxl': 1440
);

$aspect-ratios: (
  '1x1': 100%,
  '4x3': calc(3 / 4 * 100%),
  '16x9': calc(9 / 16 * 100%),
  '21x9': calc(9 / 21 * 100%)
);

$class-utils: (
  // order
  'order': (
    property: 'order',
    class: 'order',
    values: map-merge(list-map-values($max-col, 1, false), (
      0: 0,
      first: -1,
      last: $max-col,
    )),
    responsive: true
  ),
  'justify-align-place': (
    property: ('justify-content', 'align-content', 'place-content', 'align-items'),
    class: ('justify-content', 'align-content', 'place-content', 'align-items'),
    values: (
      center: center,
      start: flex-start,
      end: flex-end,
      between: space-between,
      around: space-around,
      evenly: space-evenly
    )
  ),
  // sizing
  'width': (
    property: 'width',
    class: 'w',
    values: map-merge(list-map-values(4, 25, 0%), (auto: auto))
  ),
  'height': (
    property: 'height',
    class: 'h',
    values: map-merge(list-map-values(4, 25, 0%), (auto: auto))
  ),
  'max-width': (
    property: 'max-width',
    class: 'mw',
    values: (100: 100%)
  ),
  'max-height': (
    property: 'max-height',
    class: 'mh',
    values: (100: 100%)
  ),
  // spacing
  'margin': (
    property: ('margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'),
    class: ('m', 'mt', 'mr', 'mb', 'ml'),
    values: map-merge(list-map-values(5, 4, 0px, false), (auto: auto)),
    responsive: true
  ),
  'padding': (
    property: ('padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'),
    class: ('p', 'pt', 'pr', 'pb', 'pl'),
    values: map-merge(list-map-values(5, 4, 0px, false), (auto: auto)),
    responsive: true
  ),
  'margin-x': (
    properties: ('margin-left', 'margin-right'),
    class: 'mx',
    values: map-merge(list-map-values(5, 4, 0px, false), (auto: auto)),
    responsive: true
  ),
  'margin-y': (
    properties: ('margin-top', 'margin-bottom'),
    class: 'my',
    values: map-merge(list-map-values(5, 4, 0px, false), (auto: auto)),
    responsive: true
  ),
  'padding-x': (
    properties: ('padding-left', 'padding-right'),
    class: 'px',
    values: map-merge(list-map-values(5, 4, 0px, false), (auto: auto)),
    responsive: true
  ),
  'padding-y': (
    properties: ('padding-top', 'padding-bottom'),
    class: 'py',
    values: map-merge(list-map-values(5, 4, 0px, false), (auto: auto)),
    responsive: true
  ),
  // display
  'display': (
    property: 'display',
    class: 'd',
    values: (none, flex, block, grid, table, inline-block, inline-flex, inline-grid, inline, table-cell, table-row),
    responsive: true
  ),
  // float
  'float': (
    property: 'float',
    class: 'float',
    values: (left, right, none),
    responsive: true
  ),
  // interactions
  'user-select': (
    property: user-select,
    class: user-select,
    values: (all, auto, none)
  ),
  'pointer-events': (
    property: pointer-events,
    class: pe,
    values: (none, auto),
  ),
  // text
  'text-align': (
    property: 'text-align',
    class: 'text',
    values: (center, justify, left, right),
    responsive: true
  ),
  'text-decoration': (
    property: 'text-decoration',
    class: 'text',
    values: (
      over: overline,
      under: underline,
      through: line-through
    ),
    responsive: false
  ),
  'white-space': (
    property: 'white-space',
    class: 'text',
    values: (
      wrap: normal,
      nowrap: nowrap,
    ),
    responsive: false
  ),
  'text-transform': (
    property: 'text-transform',
    class: 'text',
    values: (
      upper: uppercase,
      lower: lowercase,
      capitalize: capitalize
    ),
    responsive: false
  ),
  'word-break': (
    property: 'word-break',
    class: 'text',
    values: (
      break-all: break-all,
      keep: keep-all,
    ),
    responsive: false
  ),
  'font-weight': (
    property: 'font-weight',
    class: 'fw',
    values: (bold, bolder, normal, lighter),
    responsive: true
  ),
  'font-style': (
    property: 'font-style',
    class: 'fst',
    values: (normal, italic),
    responsive: false
  ),
)