//
// utilities.scss
// Extended from Bootstrap
//
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";


$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, 0.5),
            "white-50": rgba($white, 0.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,
            )
          ),
      ),
  )
);

@import "~bootstrap/scss/utilities/api";

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