// 
// utilities.scss
// Extended from Bootstrap
// 


$utilities: ();

$utilities: map-merge(
  (
    // Sizing utilities
    "min-width": (
      property: min-width,
      class: min-w,
      values: (
        auto: auto
      )
    ),

    // height
    "height": (
      property: height,
      class: h,
      responsive: true,
      values: (
        20: 20px,
        200: 200px,
        300: 300px,
        350: 350px,
        400: 400px,
        500: 500px,
        540: 540px,
        560: 560px,
        600: 600px,
        700: 700px,
        100: 100%
      )
    ),

    // width
    "width": (
      property: width,
      class: w,
      responsive: true,
      values: (
        20: 20px,
        30: 30px,
        40: 40px,
        50: 50px,
        60: 60px,
        70: 70px,
        80: 80px,
        90: 90px,
        100: 100%
      )
    ),

    // utils bg color soft
    // "background-color-soft": (
    //   property: background-color,
    //   class: bg,
    //   values: map-merge(
    //     $theme-soft-colors,
    //     (
    
    //     )
    //   )
    // ),
    
    // Fill color for SVG
    "fill-color": (
    property: fill,
    class: fill,
    values: map-merge($theme-colors, 
      (
        "white": $white
        )
      )
    ),

    // z index
    "z-index": (
      property: z-index,
      class: z-index,
      values: (
        0: 0,
        9: 9,
        99: 99,
        n9: -9
      )
    ),

    // Background opacity
    "bg-opacity": (
      css-var: true,
      class: bg-opacity,
      values: (
        15: .15
      )
    ),

    // Opacity
    "opacity": (
      property: opacity,
      class: opacity,
      values: (
        0: 0,
        1: 0.1,
        2: 0.2,
        3: 0.3,
        4: 0.4,
        5: 0.5,
        6: 0.6,
        7: 0.7,
        8: 0.8,
        9: 0.9
      )
    ),


  ),
  $utilities
);