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


$utilities: ();

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

    // Sizing utilities
    "viewport-height": (
      property: height,
      class: vh,
      responsive: true,
      values: (
        100: 100vh
      )
    ),

    // Height pixels
    "height-px": (
      property: height,
      class: h,
      responsive: true,
      values: (
        15px: 15px,
        20px: 20px,
        30px: 30px,
        40px: 40px,
        50px: 50px,
        60px: 60px,
        70px: 70px,
        300px: 300px,
        400px: 400px,
        600px: 600px
      )
    ),

    // Width pixels
    "width-px": (
      property: width,
      class: w,
      values: (
        30px: 30px,
        40px: 40px,
        80px: 80px,
        90px: 90px,
        100px: 100px,
        150px: 150px,
      )
    ),

    // Background opacity
    "bg-opacity": (
      css-var: true,
      class: bg-opacity,
      values: (
        15: .15
      )
    ),
    
    // Fill color for SVG
    "fill-color": (
    property: fill,
    class: fill,
    values: map-merge($theme-colors, 
      (
        "white": $white,
        "body": var(--#{$prefix}body-bg),
        "mode": var(--#{$prefix}mode),
        "mode-inverse": var(--#{$prefix}gray-900)
        )
      )
    ),

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

    // Rotate
    "rotate": (
      property: transform,
      class: rotate,
      values: (
        10: rotate(10deg),
        180: rotate(180deg)
      )
    ),

    // Border dashed
    "border-dashed": (
      property: border-style,
      class: border-dashed,
      values: (
        null: dashed
      )
    ),

    //line height
    "line-height": (
      property: line-height,
      responsive: true,
      class: lh,
      values: (
        0: 0,
        3:3
      )
    ),

    // 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
);