//********** MAPS **********//

//********** BREAKPOINTS **********//
$breakpoints: (
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
  "wd": 1600px
) !default;

//********** FONT FAMILY **********//
$font-family: (
  "sans-serif": (Helvetica, sans-serif),
  "serif":      (Times, serif),
  "monospace":  (Courier, monospace),
  "cursive":    (Mistral, cursive),
  "fantasy":    (Impact, fantasy)
) !default;

//********** COLORS **********//
$hues: (
  "red":        0,
  "orange":    30,
  "yellow":    60,
  "lime":      90,
  "green":    120,
  "aqua":     150,
  "cyan":     180,
  "sky":      210,
  "blue":     240,
  "violet":   270,
  "magenta":  300,
  "pink":     330
) !default;

$lightness-base:  50%;
$lightness-dark:  20%;
$lightness-light: 80%;

$grayscale: (
  "black":  0%,
  "slate":  $lightness-dark,
  "gray":   $lightness-base,
  "silver": $lightness-light,
  "white":  100%
) !default;

$colors: $hues, $grayscale;

//********** TRANSFORM **********//
$transforms: (
  "slideT":   translate(0, 10vh),
  "slideR":   translate(-10vw, 0),
  "slideB":   translate(0, -10vh),
  "slideL":   translate(10vw, 0),

  "turn":     rotate3d(0, 0, 1, 360deg),
  "turnX":    rotate3d(1, 0, 0, 360deg),
  "turnY":    rotate3d(0, 1, 0, 360deg),
  "turnXY":   rotate3d(1, 1, 0, 360deg),
  "turnXZ":   rotate3d(1, 0, 1, 360deg),
  "turnYZ":   rotate3d(0, 1, 1, 360deg),
  "turn3D":   rotate3d(1, 1, 1, 360deg),

  "bounce":   scale(-1, -1),
  "grow":     scale(0.5, 0.5),
  "shrink":   scale(1.5, 1.5),
  "flipX":    scale(1, -1),
  "flipY":    scale(-1, 1),
  "openX":    scale(1, 0),
  "openY":    scale(0, 1),
  "flipperX": scale(0, -1),
  "flipperY": scale(-1, 0),

  "twistT":   skew(-90deg, -90deg),
  "twistR":   skew(90deg, -90deg),
  "twistB":   skew(90deg, 90deg),
  "twistL":   skew(-90deg, 90deg)
) !default;

//********** GAP **********//
$gap: (
  "1": 5px,
  "2": 10px,
  "3": 20px,
  "4": 50px
) !default;

//********** PLACE **********//
$place-content: (
  "around":   space-around,
  "between":  space-between,
  "evenly":   space-evenly,
  "center":   center,
  "stretch":  stretch,
  "start":    flex-start,
  "end":      flex-end
) !default;

$place-items: (
  "normal":   normal,
  "base":     baseline,
  "center":   center,
  "stretch":  stretch,
  "start":    flex-start,
  "end":      flex-end
) !default;

$place-self: (
  "auto":     auto,
  "normal":   normal,
  "base":     baseline,
  "center":   center,
  "stretch":  stretch,
  "start":    flex-start,
  "end":      flex-end
) !default;

//********** MARGIN **********//
$margins: (
  "auto": auto,
  "none": 0,
  "tn":   2px,
  "sm":   5px,
  "md":   10px,
  "lg":   20px,
  "xl":   50px,
  "wd":   100px
) !default;

//********** BORDER **********//
$border-style: (
  "dash":   dashed,
  "dot":    dotted,
  "double": double,
  "groove": groove,
  "ridge":  ridge,
  "in":     inset,
  "out":    outset
) !default;

$border-width: (
  "sm": 1px,
  "md": 2px,
  "lg": 5px
) !default;

$border-radius: (
  "curve":  10px,
  "round":  20px,
  "circle": 50%
) !default;

//********** PADDING **********//
$paddings: (
  "auto": auto,
  "none": 0,
  "tn":   2px,
  "sm":   5px,
  "md":   10px,
  "lg":   20px,
  "xl":   50px,
  "wd":   100px
) !default;

//********** CONTAINER **********//
$containers: (
  "50": 50%,
  "60": 60%,
  "70": 70%,
  "80": 80%,
  "90": 90%
) !default;

//********** HEIGHT **********//
$height: (
  "sm": 20%,
  "md": 50%,
  "lg": 100%
) !default;

//********** WIDTH **********//
$width: (
  "sm": 20%,
  "md": 50%,
  "lg": 100%
) !default;

//********** FONT **********//
$font: (
  "bold":     "weight",
  "italic":   "style"
) !default;

//********** TEXT **********//
$text-align: (
  "center":   center,
  "justify":  justify,
  "left":     left,
  "right":    right
) !default;

$trans: (
  "cap":  "capitalize",
  "up":   "uppercase",
  "low":  "lowercase"
) !default;

$text-decoration-line: (
  "over":     overline,
  "through":  line-through
) !default;

$text-decoration-style: (
  "dash":   dashed,
  "dot":    dotted,
  "double": double,
  "wavy":   wavy
) !default;

//********** ANIMATION **********//
$animation-duration: (
  "sm": 500ms,
  "md": 1s,
  "lg": 2s
) !default;

$animation-timing-function: (
  "linear": linear,
  "easin":  ease-in,
  "easout": ease-out,
  "inout":  ease-in-out
) !default;

$animation-iteration-count: (
  "few":  2,
  "many": 5,
  "loop": infinite
) !default;

$animation-delay: (
  "min":  500ms,
  "max":  1s
) !default;

$animation-options: (
  "duration":         $animation-duration,
  "timing-function":  $animation-timing-function,
  "iteration-count":  $animation-iteration-count,
  "delay":            $animation-delay
) !default;

$animation-direction: (
  "alte":    alternate,
  "reve":    reverse,
  "altrev": alternate-reverse
) !default;