//
// utilities.scss
// Extended from Bootstrap
//
@import "../../../node_modules/bootstrap/scss/variables";


$utilities: () !default;

$utilities: map-merge(
    $utilities,
    (
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        semi-bold: $font-weight-semi-bold,
        medium: $font-weight-medium,
        bold: $font-weight-bold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        2: 1.5,
        3: 1.8,
        sm: $line-height-sm,
        base: $line-height-base,
        md: $line-height-md,
        lg: $line-height-lg,
      )
    ),
    "letter-spacing": (
      property: letter-spacing,
      class: ls,
      values: (
        xs: $letter-spacing-xs,
        sm: $letter-spacing-sm,
        base: $letter-spacing-base,
        md: $letter-spacing-md,
        lg: $letter-spacing-lg,
        xl: $letter-spacing-xl,
        xxl: $letter-spacing-xxl,
      )
    ),
    "width": (
      property: width,
      responsive: true,
      class: w,
      values: (
        15: 15%,
        25: 25%,
        30: 30%,
        40: 40%,
        50: 50%,
        65: 65%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "max-width": (
      property: max-width,
      responsive: true,
      class: mw,
      values: (
        25: 25%,
        30: 30%,
        40: 40%,
        50: 50%,
        65: 65%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "viewport-width": (
      property: width,
      responsive: true,
      class: vw,
      values: (100: 100vw)
    ),
    "min-viewport-width": (
      property: min-width,
      responsive: true,
      class: min-vw,
      values: (100: 100vw)
    ),
    "height": (
      property: height,
      responsive: true,
      class: h,
      values: (
        25: 25%,
        30: 30%,
        40: 40%,
        50: 50%,
        65: 65%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "max-height": (
      property: max-height,
      responsive: true,
      class: mh,
      values: (
        25: 25%,
        30: 30%,
        40: 40%,
        50: 50%,
        65: 65%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "viewport-height": (
      property: height,
      responsive: true,
      class: vh,
      values: (100: 100vh)
    ),
    "min-viewport-height": (
      property: min-height,
      responsive: true,
      class: min-vh,
      values: (100: 100vh)
    ),

    "z-index": (
      property: z-index,
      class: z,
      values: (
          0:0,
          1:1,
          2:2,
          3:3,
          4:4,
          5:5,
          ),
    ),

    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (

        "gray-100": $gray-100,
        "gray-200": $gray-200,
        "gray-300": $gray-300,
        "gray-400": $gray-400,
        "gray-500": $gray-500,
        "gray-600": $gray-600,
        "gray-700": $gray-700,
        "gray-800": $gray-800,
        "gray-900": $gray-900,
         "white": $white,
         "body": $body-color,
         "muted": $text-muted,
         "black-50": rgba($black, .5),
         "white-50": rgba($white, .5),
         "reset": inherit,
        )
      )
    ),
    // scss-docs-end utils-color
    // scss-docs-start utils-bg-color
    "background-color": (
      property: background-color,
      class: bg,
      values: map-merge(
        $theme-colors,
        (
          "gray-100": $gray-100,
        "gray-200": $gray-200,
        "gray-300": $gray-300,
        "gray-400": $gray-400,
        "gray-500": $gray-500,
        "gray-600": $gray-600,
        "gray-700": $gray-700,
        "gray-800": $gray-800,
        "gray-900": $gray-900,
          "body": $body-bg,
          "white": $white,
          "transparent": transparent
        )
      )
    ),
  )
);


// Utilities

@import "utilities/_background.scss";
@import "utilities/_shadows.scss";
@import "utilities/_position.scss";
@import "utilities/_border.scss";
@import "utilities/_icon-shape.scss";
@import "utilities/_text.scss";
