@trumpetstech/bootwind/dist/extra.css.map

Utility and component-centric design system based on Bootstrap for fast, responsive UI development.

{"version":3,"sources":["../scss/extra.scss","../scss/extras/_article.scss","../scss/core/variables/_typography.scss","../scss/core/variables/_colors.scss","../node_modules/bootstrap/scss/vendor/_rfs.scss","../node_modules/bootstrap/scss/mixins/_border-radius.scss","../node_modules/bootstrap/scss/mixins/_breakpoints.scss","../scss/extras/_section-step.scss"],"names":[],"mappings":"AAAA;;;;EAAA,CCEA,SAEC,cCmK6B,CDlK7B,aEMU,CFLV,eCoK6B,CDlK7B,WACC,kBAAA,CACA,qBAAA,CAGD,YGkRK,eALI,CH3QR,kBC2D4B,CD1DzB,cAAA,CACA,iBAAA,CACA,qBAAA,CACA,uBAAA,CAEH,wBACC,cAAA,CAIF,YGqQK,gBALI,CH9PR,eC6C4B,CD5C5B,gBAAA,CACA,kBAAA,CAGD,YG8PK,aALI,CHvPR,eAAA,CACA,cAAA,CAGD,aIpBG,qBAAA,CJwBH,4CAGI,cAAA,CACA,iBAAA,CAGJ,aG6OK,iBALI,CHtOR,eAAA,CACA,iBAAA,CACA,iBAAA,CACG,oBAAA,CACA,eAAA,CACA,wBE5CM,CF6CN,UAAA,CIvCD,qBAAA,CJ2CH,sBACI,YAAA,CAGJ,0CAGI,YAAA,CAGJ,YACC,cCgG4B,CD/F5B,iBC+F4B,CD5F7B,wBAEC,mBAAA,CAEA,8BACC,gBAAA,CAIF,oBACI,eAAA,CGwMC,iBALI,CHjMR,aE5ES,CF6EN,uBAAA,CACA,qBAAA,CACH,cAAA,CACA,iBAAA,CACA,2CAAA,CI3EE,mBAAA,CJ8EF,sBACC,iBAAA,CACA,oBAAA,CKvBC,4BCtEA,iBACI,mBAAA,CAEA,kCACI,gBAAA,CAGJ,4BACI,gBAAA,CAAA,CDiDR,yBC3CA,iBACI,iBAAA,CACA,mBAAA,CAEA,kCACI,gBAAA,CAGJ,4BACI,gBAAA,CAKA,yCACI,UAAA,CACA,aAAA,CACA,WAAA,CACA,YAAA,CACA,mhBAAA,CACA,2BAAA,CACA,uBAAA,CACA,iBAAA,CACA,WAAA,CACA,MAAA,CACA,OAAA,CACA,YAAA,CAAA,CD8BZ,kDC1CQ,yCAeQ,kCAAA,CACA,WAAA,CAAA,CDahB,yBCNY,qDACI,OAAA,CAEJ,oDACI,OAAA,CAMR,wCACI,qbAAA,CACA,2BAAA,CACA,wBAAA,CAAA,CDMZ,kDCTQ,wCAMQ,mCAAA,CACA,WAAA,CAAA","file":"extra.css","sourcesContent":["/*!\n * Bootwind CSS v1.0.0 (https://bootwind.trumpetstech.com/)\n * Copyright 2023 Bootwind\n * Licensed under MIT (https://github.com/trumpetstech/bootwind/blob/main/LICENSE)\n */\n\n@import \"core\";\n@import \"extras\";\n","// Articles\n\n.article {\n\n\tfont-size: $article-font-size;\n\tcolor: $article-color;\n\tline-height: $article-text-line-height;\n\n\t> p {\n\t\tmargin-top: 1.25rem;\n\t\tmargin-bottom: 1.25rem;\n    }\n\n\t> h2 {\n\t\t@include font-size(1.5em);\n\t\tfont-weight: $font-weight-bolder;\n\t    margin-top: 2em;\n\t    margin-bottom: 1em;\n\t    line-height: 1.3333333;\n\t    letter-spacing: -.025em;\n\n\t\t&:first-child {\n\t\t\tmargin-top: 1em;\n\t\t}\n\t}\n\n\t> h3 {\n\t\t@include font-size(1.25em);\n\t\tfont-weight: $font-weight-bold;\n\t\tmargin-top: 1.6em;\n\t\tmargin-bottom: .6em;\n\t}\n\n\t> h4 {\n\t\t@include font-size(1em);\n\t\tfont-weight: 500;\n\t\tmargin-top: 2em;\n\t}\n\n\t> img {\n\t\t@include border-radius($border-radius);\n\t}\n\n\t> figure,\n\t> img,\n\t> video {\n\t    margin-top: 2em;\n\t    margin-bottom: 2em;\n\t}\n\n\tpre {\n\t\t@include font-size(.875em);\n\t\tline-height: 1.7;\n\t\tpadding: 1rem 1rem;\n\t\tmargin-top: 1.75em;\n\t   \tmargin-bottom: 1.75em;\n\t    overflow-x: auto;\n\t    background-color: $dark;\n\t    color: color-contrast($dark);\n\t\t@include border-radius($border-radius);\n\t}\n\n\t& > :first-child {\n    \tmargin-top: 0;\n\t}\n\n\th2 + *,\n\th3 + *,\n\thr + * {\n    \tmargin-top: 0;\n\t}\n\n\t> hr {\n\t\tmargin-top: $article-hr-spacing-y;\n\t\tmargin-bottom: $article-hr-spacing-y;\n\t}\n\n\t> ul,\n\t> ol {\n\t\tpadding-left: 1.5rem;\n\n\t\tli {\n\t\t\tpadding: .25rem 0;\n\t\t}\n\t}\n\n\t> blockquote {\n\t    font-weight: 500;\n\t\t@include font-size($font-size-lg);\n\t\tcolor: $headings-color;\n\t    letter-spacing: -.012em;\n\t    padding: 1.5rem 3.5rem;\n\t\tmargin-top: 3em;\n\t\tmargin-bottom: 3em;\n\t\tbackground-color: var(--x-surface-secondary);\n\t\t@include border-radius($border-radius-lg);\n\n\t\t> p {\n\t\t\tmargin-top: 1.5rem;\n\t\t\tmargin-bottom: 1.5rem;\n\t    }\n\t}\n}\n","// Links\n//\n// Style anchor elements.\n\n$link-color:                              $primary !default;\n$link-decoration:                         none !default;\n$link-shade-percentage:                   20% !default;\n$link-hover-color:                        shade-color($link-color, 15%) !default;\n$link-hover-decoration:                   none !default;\n// Darken percentage for links with `.text-*` class (e.g. `.text-success`)\n$emphasized-link-hover-darken-percentage: 15% !default;\n\n$stretched-link-pseudo-element:           after !default;\n$stretched-link-z-index:                  1 !default;\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom:   0 !default;\n\n// Typography\n//\n// Font, line-height, and color for body text, headings, and more.\n\n\n\n// System fonts\n$font-sans-serif-system:    ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$font-serif-system:         ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif !default;\n$font-monospace-system:     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n\n// Additional variable to add custom fonts\n$font-sans-serif:           \"Inter\" !default;\n$font-display:              $font-sans-serif !default;\n$font-monospace:            null !default;\n$font-serif:                null !default;\n\n// Generate the font family by adding the custom font to the collection if that exists\n$font-sans-serif-bundle:    if($font-sans-serif, #{$font-sans-serif,$font-sans-serif-system}, $font-sans-serif-system) !default;\n$font-monospace-bundle:     if($font-monospace, #{$font-monospace,$font-monospace-system}, $font-monospace-system) !default;\n$font-serif-bundle:         if($font-serif, #{$font-serif,$font-serif-system}, $font-serif-system) !default;\n$font-display-bundle:       if($font-display, #{$font-display,$font-sans-serif-system}, $font-sans-serif-system) !default;\n\n$font-family-base:           var(--#{$prefix}font-sans-serif) !default;\n$font-family-monospace:      var(--#{$prefix}font-monospace) !default;\n$font-family-display:        var(--#{$prefix}font-display) !default;\n$font-family-serif:          var(--#{$prefix}font-serif) !default;\n\n// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins\n// $font-size-base effects the font size of the body text\n\n$font-size-root:              null !default;\n$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`\n\n$font-size-xs:                $font-size-base * .75 !default;\n$font-size-sm:                $font-size-base * .875 !default;\n$font-size-md:                $font-size-base * 1.125 !default;\n$font-size-lg:                $font-size-base * 1.25 !default;\n$font-size-xl:                $font-size-base * 1.5 !default;\n$font-size-2xl:               $font-size-base * 2 !default;\n$font-size-3xl:               $font-size-base * 2.25 !default;\n$font-size-4xl:               $font-size-base * 2.5 !default;\n$font-size-5xl:               $font-size-base * 3 !default;\n$font-size-6xl:               $font-size-base * 3.5 !default;\n$font-size-7xl:               $font-size-base * 4 !default;\n$font-size-8xl:               $font-size-base * 4.5 !default;\n\n$font-weight-thin:            100 !default;\n$font-weight-lighter:         lighter !default;\n$font-weight-light:           300 !default;\n$font-weight-normal:          400 !default;\n$font-weight-semibold:        500 !default;\n$font-weight-bold:            600 !default;\n$font-weight-bolder:          bolder !default;\n$font-weight-black:           800 !default;\n\n$font-weight-base:            $font-weight-normal !default;\n\n$line-height-base:            1.625 !default;\n$line-height-sm:              1.3 !default;\n$line-height-lg:              2 !default;\n\n\n$h1-font-size:                $font-size-base * 2.25 !default;\n$h2-font-size:                $font-size-base * 1.75 !default;\n$h3-font-size:                $font-size-base * 1.375 !default;\n$h4-font-size:                $font-size-base * 1.125 !default;\n$h5-font-size:                $font-size-base * 1 !default;\n$h6-font-size:                $font-size-base * .875 !default;\n\n$headings-margin-bottom:      0 !default;\n$headings-font-family:        null !default;\n$headings-font-style:         null !default;\n$headings-font-weight:        $font-weight-bold !default;\n$headings-line-height:        1.3 !default;\n$headings-color:              $gray-900 !default;\n\n$large-headings-font-weight:  $headings-font-weight !default;\n$small-headings-font-weight:  $font-weight-bold !default;\n\n\n// scss-docs-start display-headings\n$display-font-sizes: (\n    1: 5rem,\n    2: 4.5rem,\n    3: 4rem,\n    4: 3.5rem,\n    5: 3rem,\n    6: 2.5rem\n) !default;\n\n$display-font-family:        $font-family-display !default;\n$display-font-weight:        $font-weight-bolder !default;\n$display-line-height:        $headings-line-height !default;\n$display-color:              $headings-color !default;\n// scss-docs-end display-headings\n\n$lead-font-size:              $font-size-base * 1.125 !default;\n$lead-font-weight:            $font-weight-normal !default;\n\n$small-font-size:             .875em !default;\n\n$code-font-size:                    $small-font-size !default;\n\n$sub-sup-font-size:           .75em !default;\n\n$text-muted:                  $gray-600 !default;\n$text-muted-hover:            shade-color($text-muted, 15%) !default;\n\n$initialism-font-size:        $small-font-size !default;\n\n$blockquote-margin-y:         $spacer !default;\n$blockquote-font-size:        $font-size-base * 1.25 !default;\n$blockquote-footer-color:     $gray-600 !default;\n$blockquote-footer-font-size: $small-font-size !default;\n\n$hr-margin-y:                 $spacer !default;\n$hr-color:                    $border-color !default;\n$hr-height:                   $border-width !default;\n$hr-opacity:                  .9 !default;\n\n$legend-margin-bottom:        .5rem !default;\n$legend-font-size:            1.5rem !default;\n$legend-font-weight:          null !default;\n\n$mark-padding:                0 !default;\n\n$dt-font-weight:              $font-weight-bold !default;\n\n$nested-kbd-font-weight:      $font-weight-bold !default;\n\n$list-inline-padding:         .5rem !default;\n\n$mark-bg:                     #fcf8e3 !default;\n\n\n// Surtitle\n\n$surtitle-color:              $gray-700 !default;\n$surtitle-font-size:          .75rem !default;\n$surtitle-font-weight:        $font-weight-semibold !default;\n$surtitle-text-transform:     uppercase !default;\n\n\n// Articles\n\n$article-font-size:           1rem !default;\n$article-color:               $gray-700 !default;\n$article-hr-spacing-y:        3em !default;\n$article-text-line-height:    1.9 !default;\n\n$article-headings-color:       $headings-color !default;\n","// Color system\n\n// White/Grays/Black colors\n$white:    #FFF !default;\n$gray-50:  #FAFAFA !default;    // Alternate background\n$gray-100: #F5F9FC !default;    // Base background\n$gray-200: #E7EAF0 !default;\n$gray-300: #CFD6DF !default;\n$gray-400: #ABB6C5 !default;\n$gray-500: #8898A9 !default;    // Disabled text\n$gray-600: #6B7B93 !default;    // Placeholder text\n$gray-700: #525F7F !default;    // Text content\n$gray-800: #2D3748 !default;    // Text content old(44444e)\n$gray-900: #16192C !default;    // Text content\n$black:    #000 !default;\n\n\n// The contrast ratio to reach against white, to determine if color changes from \"light\" to \"dark\". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.\n// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast\n$min-contrast-ratio:   2 !default;\n\n// Customize the light and dark text colors for use in our color contrast function.\n$color-contrast-dark:      $black !default;\n$color-contrast-light:     $white !default;\n\n\n// fusv-disable\n$grays: (\n  \"50\":  $gray-50,\n  \"100\": $gray-100,\n  \"200\": $gray-200,\n  \"300\": $gray-300,\n  \"400\": $gray-400,\n  \"500\": $gray-500,\n  \"600\": $gray-600,\n  \"700\": $gray-700,\n  \"800\": $gray-800,\n  \"900\": $gray-900\n) !default;\n// fusv-enable\n\n\n// Base colors\n$blue:    #0099FF !default;\n$indigo: #ae0000 !default;\n$purple:  #8957FF !default;\n$pink:    #FF579A !default;\n$magenta: #EE33FF !default;\n$red:     #FF3366 !default;\n$orange:  #FF8C00 !default;\n$yellow:  #FFBB00 !default;\n$green:   #00CC88 !default;\n$teal:    #22DDDD !default;\n$cyan:    #00D4FF !default;\n//\n$slate:   #64748b !default;\n$zinc:    #71717a !default;\n$neutral: #737373 !default;\n$stone:   #78716c !default;\n$amber:   #f59e0b !default;\n$lime:    #84cc16 !default;\n$emerald: #10b981 !default;\n$sky:     #0ea5e9 !default;\n$violet:  #8b5cf6 !default;\n$fuchsia: #d946ef !default;\n$rose:    #f43f5e !default;\n\n// fusv-disable\n$blue-100: tint-color($blue, 80%) !default;\n$blue-200: tint-color($blue, 60%) !default;\n$blue-300: tint-color($blue, 40%) !default;\n$blue-400: tint-color($blue, 20%) !default;\n$blue-500: $blue !default;\n$blue-600: shade-color($blue, 20%) !default;\n$blue-700: shade-color($blue, 40%) !default;\n$blue-800: shade-color($blue, 60%) !default;\n$blue-900: shade-color($blue, 80%) !default;\n\n$indigo-100: tint-color($indigo, 80%) !default;\n$indigo-200: tint-color($indigo, 60%) !default;\n$indigo-300: tint-color($indigo, 40%) !default;\n$indigo-400: tint-color($indigo, 20%) !default;\n$indigo-500: $indigo !default;\n$indigo-600: shade-color($indigo, 20%) !default;\n$indigo-700: shade-color($indigo, 40%) !default;\n$indigo-800: shade-color($indigo, 60%) !default;\n$indigo-900: shade-color($indigo, 80%) !default;\n\n$purple-100: tint-color($purple, 80%) !default;\n$purple-200: tint-color($purple, 60%) !default;\n$purple-300: tint-color($purple, 40%) !default;\n$purple-400: tint-color($purple, 20%) !default;\n$purple-500: $purple !default;\n$purple-600: shade-color($purple, 20%) !default;\n$purple-700: shade-color($purple, 40%) !default;\n$purple-800: shade-color($purple, 60%) !default;\n$purple-900: shade-color($purple, 80%) !default;\n\n$pink-100: tint-color($pink, 80%) !default;\n$pink-200: tint-color($pink, 60%) !default;\n$pink-300: tint-color($pink, 40%) !default;\n$pink-400: tint-color($pink, 20%) !default;\n$pink-500: $pink !default;\n$pink-600: shade-color($pink, 20%) !default;\n$pink-700: shade-color($pink, 40%) !default;\n$pink-800: shade-color($pink, 60%) !default;\n$pink-900: shade-color($pink, 80%) !default;\n\n$magenta-100: tint-color($magenta, 80%) !default;\n$magenta-200: tint-color($magenta, 60%) !default;\n$magenta-300: tint-color($magenta, 40%) !default;\n$magenta-400: tint-color($magenta, 20%) !default;\n$magenta-500: $magenta !default;\n$magenta-600: shade-color($magenta, 20%) !default;\n$magenta-700: shade-color($magenta, 40%) !default;\n$magenta-800: shade-color($magenta, 60%) !default;\n$magenta-900: shade-color($magenta, 80%) !default;\n\n$red-100: tint-color($red, 80%) !default;\n$red-200: tint-color($red, 60%) !default;\n$red-300: tint-color($red, 40%) !default;\n$red-400: tint-color($red, 20%) !default;\n$red-500: $red !default;\n$red-600: shade-color($red, 20%) !default;\n$red-700: shade-color($red, 40%) !default;\n$red-800: shade-color($red, 60%) !default;\n$red-900: shade-color($red, 80%) !default;\n\n$orange-100: tint-color($orange, 80%) !default;\n$orange-200: tint-color($orange, 60%) !default;\n$orange-300: tint-color($orange, 40%) !default;\n$orange-400: tint-color($orange, 20%) !default;\n$orange-500: $orange !default;\n$orange-600: shade-color($orange, 20%) !default;\n$orange-700: shade-color($orange, 40%) !default;\n$orange-800: shade-color($orange, 60%) !default;\n$orange-900: shade-color($orange, 80%) !default;\n\n$yellow-100: tint-color($yellow, 80%) !default;\n$yellow-200: tint-color($yellow, 60%) !default;\n$yellow-300: tint-color($yellow, 40%) !default;\n$yellow-400: tint-color($yellow, 20%) !default;\n$yellow-500: $yellow !default;\n$yellow-600: shade-color($yellow, 20%) !default;\n$yellow-700: shade-color($yellow, 40%) !default;\n$yellow-800: shade-color($yellow, 60%) !default;\n$yellow-900: shade-color($yellow, 80%) !default;\n\n$green-100: tint-color($green, 80%) !default;\n$green-200: tint-color($green, 60%) !default;\n$green-300: tint-color($green, 40%) !default;\n$green-400: tint-color($green, 20%) !default;\n$green-500: $green !default;\n$green-600: shade-color($green, 20%) !default;\n$green-700: shade-color($green, 40%) !default;\n$green-800: shade-color($green, 60%) !default;\n$green-900: shade-color($green, 80%) !default;\n\n$teal-100: tint-color($teal, 80%) !default;\n$teal-200: tint-color($teal, 60%) !default;\n$teal-300: tint-color($teal, 40%) !default;\n$teal-400: tint-color($teal, 20%) !default;\n$teal-500: $teal !default;\n$teal-600: shade-color($teal, 20%) !default;\n$teal-700: shade-color($teal, 40%) !default;\n$teal-800: shade-color($teal, 60%) !default;\n$teal-900: shade-color($teal, 80%) !default;\n\n$cyan-100: tint-color($cyan, 80%) !default;\n$cyan-200: tint-color($cyan, 60%) !default;\n$cyan-300: tint-color($cyan, 40%) !default;\n$cyan-400: tint-color($cyan, 20%) !default;\n$cyan-500: $cyan !default;\n$cyan-600: shade-color($cyan, 20%) !default;\n$cyan-700: shade-color($cyan, 40%) !default;\n$cyan-800: shade-color($cyan, 60%) !default;\n$cyan-900: shade-color($cyan, 80%) !default;\n// fusv-enable\n\n$slate-100: tint-color($slate, 80%) !default;\n$slate-200: tint-color($slate, 60%) !default;\n$slate-300: tint-color($slate, 40%) !default;\n$slate-400: tint-color($slate, 20%) !default;\n$slate-500: $slate !default;\n$slate-600: shade-color($slate, 20%) !default;\n$slate-700: shade-color($slate, 40%) !default;\n$slate-800: shade-color($slate, 60%) !default;\n$slate-900: shade-color($slate, 80%) !default;\n\n$zinc-100: tint-color($zinc, 80%) !default;\n$zinc-200: tint-color($zinc, 60%) !default;\n$zinc-300: tint-color($zinc, 40%) !default;\n$zinc-400: tint-color($zinc, 20%) !default;\n$zinc-500: $zinc !default;\n$zinc-600: shade-color($zinc, 20%) !default;\n$zinc-700: shade-color($zinc, 40%) !default;\n$zinc-800: shade-color($zinc, 60%) !default;\n$zinc-900: shade-color($zinc, 80%) !default;\n\n$neutral-100: tint-color($neutral, 80%) !default;\n$neutral-200: tint-color($neutral, 60%) !default;\n$neutral-300: tint-color($neutral, 40%) !default;\n$neutral-400: tint-color($neutral, 20%) !default;\n$neutral-500: $neutral !default;\n$neutral-600: shade-color($neutral, 20%) !default;\n$neutral-700: shade-color($neutral, 40%) !default;\n$neutral-800: shade-color($neutral, 60%) !default;\n$neutral-900: shade-color($neutral, 80%) !default;\n\n$stone-100: tint-color($stone, 80%) !default;\n$stone-200: tint-color($stone, 60%) !default;\n$stone-300: tint-color($stone, 40%) !default;\n$stone-400: tint-color($stone, 20%) !default;\n$stone-500: $stone !default;\n$stone-600: shade-color($stone, 20%) !default;\n$stone-700: shade-color($stone, 40%) !default;\n$stone-800: shade-color($stone, 60%) !default;\n$stone-900: shade-color($stone, 80%) !default;\n\n$amber-100: tint-color($amber, 80%) !default;\n$amber-200: tint-color($amber, 60%) !default;\n$amber-300: tint-color($amber, 40%) !default;\n$amber-400: tint-color($amber, 20%) !default;\n$amber-500: $amber !default;\n$amber-600: shade-color($amber, 20%) !default;\n$amber-700: shade-color($amber, 40%) !default;\n$amber-800: shade-color($amber, 60%) !default;\n$amber-900: shade-color($amber, 80%) !default;\n\n$lime-100: tint-color($lime, 80%) !default;\n$lime-200: tint-color($lime, 60%) !default;\n$lime-300: tint-color($lime, 40%) !default;\n$lime-400: tint-color($lime, 20%) !default;\n$lime-500: $lime !default;\n$lime-600: shade-color($lime, 20%) !default;\n$lime-700: shade-color($lime, 40%) !default;\n$lime-800: shade-color($lime, 60%) !default;\n$lime-900: shade-color($lime, 80%) !default;\n\n$emerald-100: tint-color($emerald, 80%) !default;\n$emerald-200: tint-color($emerald, 60%) !default;\n$emerald-300: tint-color($emerald, 40%) !default;\n$emerald-400: tint-color($emerald, 20%) !default;\n$emerald-500: $emerald !default;\n$emerald-600: shade-color($emerald, 20%) !default;\n$emerald-700: shade-color($emerald, 40%) !default;\n$emerald-800: shade-color($emerald, 60%) !default;\n$emerald-900: shade-color($emerald, 80%) !default;\n\n$sky-100: tint-color($sky, 80%) !default;\n$sky-200: tint-color($sky, 60%) !default;\n$sky-300: tint-color($sky, 40%) !default;\n$sky-400: tint-color($sky, 20%) !default;\n$sky-500: $sky !default;\n$sky-600: shade-color($sky, 20%) !default;\n$sky-700: shade-color($sky, 40%) !default;\n$sky-800: shade-color($sky, 60%) !default;\n$sky-900: shade-color($sky, 80%) !default;\n\n$violet-100: tint-color($violet, 80%) !default;\n$violet-200: tint-color($violet, 60%) !default;\n$violet-300: tint-color($violet, 40%) !default;\n$violet-400: tint-color($violet, 20%) !default;\n$violet-500: $violet !default;\n$violet-600: shade-color($violet, 20%) !default;\n$violet-700: shade-color($violet, 40%) !default;\n$violet-800: shade-color($violet, 60%) !default;\n$violet-900: shade-color($violet, 80%) !default;\n\n$fuchsia-100: tint-color($fuchsia, 80%) !default;\n$fuchsia-200: tint-color($fuchsia, 60%) !default;\n$fuchsia-300: tint-color($fuchsia, 40%) !default;\n$fuchsia-400: tint-color($fuchsia, 20%) !default;\n$fuchsia-500: $fuchsia !default;\n$fuchsia-600: shade-color($fuchsia, 20%) !default;\n$fuchsia-700: shade-color($fuchsia, 40%) !default;\n$fuchsia-800: shade-color($fuchsia, 60%) !default;\n$fuchsia-900: shade-color($fuchsia, 80%) !default;\n\n$rose-100: tint-color($rose, 80%) !default;\n$rose-200: tint-color($rose, 60%) !default;\n$rose-300: tint-color($rose, 40%) !default;\n$rose-400: tint-color($rose, 20%) !default;\n$rose-500: $rose !default;\n$rose-600: shade-color($rose, 20%) !default;\n$rose-700: shade-color($rose, 40%) !default;\n$rose-800: shade-color($rose, 60%) !default;\n$rose-900: shade-color($rose, 80%) !default;\n\n\n\n// scss-docs-start colors-map\n$colors: (\n  \"white\": $white,\n  \"black\": $black,\n\n  \"gray-50\": $gray-50,\n  \"gray-100\": $gray-100,\n  \"gray-200\": $gray-200,\n  \"gray-300\": $gray-300,\n  \"gray-400\": $gray-400,\n  \"gray-500\": $gray-500,\n  \"gray-600\": $gray-600,\n  \"gray-700\": $gray-700,\n  \"gray-800\": $gray-800,\n  \"gray-900\": $gray-900,\n\n  \"blue-100\": $blue-100,\n  \"blue-200\": $blue-200,\n  \"blue-300\": $blue-300,\n  \"blue-400\": $blue-400,\n  \"blue-500\": $blue-500,\n  \"blue-600\": $blue-600,\n  \"blue-700\": $blue-700,\n  \"blue-800\": $blue-800,\n  \"blue-900\": $blue-900,\n\n  \"indigo-100\": $indigo-100,\n  \"indigo-200\": $indigo-200,\n  \"indigo-300\": $indigo-300,\n  \"indigo-400\": $indigo-400,\n  \"indigo-500\": $indigo-500,\n  \"indigo-600\": $indigo-600,\n  \"indigo-700\": $indigo-700,\n  \"indigo-800\": $indigo-800,\n  \"indigo-900\": $indigo-900,\n\n  \"purple-100\": $purple-100,\n  \"purple-200\": $purple-200,\n  \"purple-300\": $purple-300,\n  \"purple-400\": $purple-400,\n  \"purple-500\": $purple-500,\n  \"purple-600\": $purple-600,\n  \"purple-700\": $purple-700,\n  \"purple-800\": $purple-800,\n  \"purple-900\": $purple-900,\n\n  \"pink-100\": $pink-100,\n  \"pink-200\": $pink-200,\n  \"pink-300\": $pink-300,\n  \"pink-400\": $pink-400,\n  \"pink-500\": $pink-500,\n  \"pink-600\": $pink-600,\n  \"pink-700\": $pink-700,\n  \"pink-800\": $pink-800,\n  \"pink-900\": $pink-900,\n\n  \"magenta-100\": $magenta-100,\n  \"magenta-200\": $magenta-200,\n  \"magenta-300\": $magenta-300,\n  \"magenta-400\": $magenta-400,\n  \"magenta-500\": $magenta-500,\n  \"magenta-600\": $magenta-600,\n  \"magenta-700\": $magenta-700,\n  \"magenta-800\": $magenta-800,\n  \"magenta-900\": $magenta-900,\n\n  \"red-100\": $red-100,\n  \"red-200\": $red-200,\n  \"red-300\": $red-300,\n  \"red-400\": $red-400,\n  \"red-500\": $red-500,\n  \"red-600\": $red-600,\n  \"red-700\": $red-700,\n  \"red-800\": $red-800,\n  \"red-900\": $red-900,\n\n  \"orange-100\": $orange-100,\n  \"orange-200\": $orange-200,\n  \"orange-300\": $orange-300,\n  \"orange-400\": $orange-400,\n  \"orange-500\": $orange-500,\n  \"orange-600\": $orange-600,\n  \"orange-700\": $orange-700,\n  \"orange-800\": $orange-800,\n  \"orange-900\": $orange-900,\n\n  \"yellow-100\": $yellow-100,\n  \"yellow-200\": $yellow-200,\n  \"yellow-300\": $yellow-300,\n  \"yellow-400\": $yellow-400,\n  \"yellow-500\": $yellow-500,\n  \"yellow-600\": $yellow-600,\n  \"yellow-700\": $yellow-700,\n  \"yellow-800\": $yellow-800,\n  \"yellow-900\": $yellow-900,\n\n  \"green-100\": $green-100,\n  \"green-200\": $green-200,\n  \"green-300\": $green-300,\n  \"green-400\": $green-400,\n  \"green-500\": $green-500,\n  \"green-600\": $green-600,\n  \"green-700\": $green-700,\n  \"green-800\": $green-800,\n  \"green-900\": $green-900,\n\n  \"teal-100\": $teal-100,\n  \"teal-200\": $teal-200,\n  \"teal-300\": $teal-300,\n  \"teal-400\": $teal-400,\n  \"teal-500\": $teal-500,\n  \"teal-600\": $teal-600,\n  \"teal-700\": $teal-700,\n  \"teal-800\": $teal-800,\n  \"teal-900\": $teal-900,\n\n  \"cyan-100\": $cyan-100,\n  \"cyan-200\": $cyan-200,\n  \"cyan-300\": $cyan-300,\n  \"cyan-400\": $cyan-400,\n  \"cyan-500\": $cyan-500,\n  \"cyan-600\": $cyan-600,\n  \"cyan-700\": $cyan-700,\n  \"cyan-800\": $cyan-800,\n  \"cyan-900\": $cyan-900,\n\n\t\"slate-100\": $slate-100,\n\t\"slate-200\": $slate-200,\n\t\"slate-300\": $slate-300,\n\t\"slate-400\": $slate-400,\n\t\"slate-500\": $slate-500,\n\t\"slate-600\": $slate-600,\n\t\"slate-700\": $slate-700,\n\t\"slate-800\": $slate-800,\n\t\"slate-900\": $slate-900,\n\n\t\"zinc-100\": $zinc-100,\n\t\"zinc-200\": $zinc-200,\n\t\"zinc-300\": $zinc-300,\n\t\"zinc-400\": $zinc-400,\n\t\"zinc-500\": $zinc-500,\n\t\"zinc-600\": $zinc-600,\n\t\"zinc-700\": $zinc-700,\n\t\"zinc-800\": $zinc-800,\n\t\"zinc-900\": $zinc-900,\n\n\t \"neutral-100\": $neutral-100,\n\t \"neutral-200\": $neutral-200,\n\t \"neutral-300\": $neutral-300,\n\t \"neutral-400\": $neutral-400,\n\t \"neutral-500\": $neutral-500,\n\t \"neutral-600\": $neutral-600,\n\t \"neutral-700\": $neutral-700,\n\t \"neutral-800\": $neutral-800,\n\t \"neutral-900\": $neutral-900,\n\n\t\t\"stone-100\": $stone-100,\n\t\t\"stone-200\": $stone-200,\n\t\t\"stone-300\": $stone-300,\n\t\t\"stone-400\": $stone-400,\n\t\t\"stone-500\": $stone-500,\n\t\t\"stone-600\": $stone-600,\n\t\t\"stone-700\": $stone-700,\n\t\t\"stone-800\": $stone-800,\n\t\t\"stone-900\": $stone-900,\n\n\t\t\"amber-100\": $amber-100,\n\t\t\"amber-200\": $amber-200,\n\t\t\"amber-300\": $amber-300,\n\t\t\"amber-400\": $amber-400,\n\t\t\"amber-500\": $amber-500,\n\t\t\"amber-600\": $amber-600,\n\t\t\"amber-700\": $amber-700,\n\t\t\"amber-800\": $amber-800,\n\t\t\"amber-900\": $amber-900,\n\n\t\t\"lime-100\": $lime-100,\n\t\t\"lime-200\": $lime-200,\n\t\t\"lime-300\": $lime-300,\n\t\t\"lime-400\": $lime-400,\n\t\t\"lime-500\": $lime-500,\n\t\t\"lime-600\": $lime-600,\n\t\t\"lime-700\": $lime-700,\n\t\t\"lime-800\": $lime-800,\n\t\t\"lime-900\": $lime-900,\n\n\t\t\"emerald-100\": $emerald-100,\n\t\t\"emerald-200\": $emerald-200,\n\t\t\"emerald-300\": $emerald-300,\n\t\t\"emerald-400\": $emerald-400,\n\t\t\"emerald-500\": $emerald-500,\n\t\t\"emerald-600\": $emerald-600,\n\t\t\"emerald-700\": $emerald-700,\n\t\t\"emerald-800\": $emerald-800,\n\t\t\"emerald-900\": $emerald-900,\n\n\t\t\"sky-100\": $sky-100,\n\t\t\"sky-200\": $sky-200,\n\t\t\"sky-300\": $sky-300,\n\t\t\"sky-400\": $sky-400,\n\t\t\"sky-500\": $sky-500,\n\t\t\"sky-600\": $sky-600,\n\t\t\"sky-700\": $sky-700,\n\t\t\"sky-800\": $sky-800,\n\t\t\"sky-900\": $sky-900,\n\n\t\t\"violet-100\": $violet-100,\n\t\t\"violet-200\": $violet-200,\n\t\t\"violet-300\": $violet-300,\n\t\t\"violet-400\": $violet-400,\n\t\t\"violet-500\": $violet-500,\n\t\t\"violet-600\": $violet-600,\n\t\t\"violet-700\": $violet-700,\n\t\t\"violet-800\": $violet-800,\n\t\t\"violet-900\": $violet-900,\n\n\t\t\"fuchsia-100\": $fuchsia-100,\n\t\t\"fuchsia-200\": $fuchsia-200,\n\t\t\"fuchsia-300\": $fuchsia-300,\n\t\t\"fuchsia-400\": $fuchsia-400,\n\t\t\"fuchsia-500\": $fuchsia-500,\n\t\t\"fuchsia-600\": $fuchsia-600,\n\t\t\"fuchsia-700\": $fuchsia-700,\n\t\t\"fuchsia-800\": $fuchsia-800,\n\t\t\"fuchsia-900\": $fuchsia-900,\n\n\t\t\"rose-100\": $rose-100,\n\t\t\"rose-200\": $rose-200,\n\t\t\"rose-300\": $rose-300,\n\t\t\"rose-400\": $rose-400,\n\t\t\"rose-500\": $rose-500,\n\t\t\"rose-600\": $rose-600,\n\t\t\"rose-700\": $rose-700,\n\t\t\"rose-800\": $rose-800,\n\t\t\"rose-900\": $rose-900,\n\n) !default;\n// scss-docs-end colors-map\n\n// Theme colors\n$primary:       $indigo !default;\n$secondary:     $gray-300 !default;\n$tertiary:      $pink !default;\n$success:       $green !default;\n$info:          $cyan !default;\n$warning:       $orange !default;\n$danger:        $red !default;\n$light:         $white !default;\n$dark:          $gray-900 !default;\n\n// scss-docs-start theme-colors-map\n$theme-colors: (\n    \"primary\":    $primary,\n    \"secondary\":  $secondary,\n    \"tertiary\":   $tertiary,\n    \"success\":    $success,\n    \"info\":       $info,\n    \"warning\":    $warning,\n    \"danger\":     $danger,\n    \"white\":      $white,\n    \"light\":      $light,\n    \"dark\":       $dark\n) !default;\n// scss-docs-end theme-colors-map\n\n// scss-docs-start theme-text-variables\n$primary-text-emphasis:   shade-color($primary, 60%) !default;\n$secondary-text-emphasis: shade-color($secondary, 60%) !default;\n$success-text-emphasis:   shade-color($success, 60%) !default;\n$info-text-emphasis:      shade-color($info, 60%) !default;\n$warning-text-emphasis:   shade-color($warning, 60%) !default;\n$danger-text-emphasis:    shade-color($danger, 60%) !default;\n$light-text-emphasis:     $gray-700 !default;\n$dark-text-emphasis:      $gray-700 !default;\n// scss-docs-end theme-text-variables\n\n// scss-docs-start theme-bg-subtle-variables\n$primary-bg-subtle:       tint-color($primary, 80%) !default;\n$secondary-bg-subtle:     tint-color($secondary, 80%) !default;\n$success-bg-subtle:       tint-color($success, 80%) !default;\n$info-bg-subtle:          tint-color($info, 80%) !default;\n$warning-bg-subtle:       tint-color($warning, 80%) !default;\n$danger-bg-subtle:        tint-color($danger, 80%) !default;\n$light-bg-subtle:         mix($gray-100, $white) !default;\n$dark-bg-subtle:          $gray-400 !default;\n// scss-docs-end theme-bg-subtle-variables\n\n// scss-docs-start theme-border-subtle-variables\n$primary-border-subtle:   tint-color($primary, 60%) !default;\n$secondary-border-subtle: tint-color($secondary, 60%) !default;\n$success-border-subtle:   tint-color($success, 60%) !default;\n$info-border-subtle:      tint-color($info, 60%) !default;\n$warning-border-subtle:   tint-color($warning, 60%) !default;\n$danger-border-subtle:    tint-color($danger, 60%) !default;\n$light-border-subtle:     $gray-200 !default;\n$dark-border-subtle:      $gray-500 !default;\n// scss-docs-end theme-border-subtle-variables\n\n$bootstrap:     #7952b3 !default;\n$laravel:       #ff2d20 !default;\n$react:         #61dafb !default;\n$facebook:      #3b5999 !default;\n$twitter:       #1da1f2 !default;\n$instagram:     #e4405f !default;\n$pinterest:     #bd081c !default;\n$youtube:       #cd201f !default;\n$dribbble:      #ea4c89 !default;\n$github:        #222222 !default;\n$reddit:        #FF4301 !default;\n\n// scss-docs-start theme-colors-map\n$brand-colors: (\n    \"bootstrap\":    $bootstrap,\n    \"laravel\":      $laravel,\n    \"react\":        $react,\n    \"facebook\":     $facebook,\n    \"twitter\":      $twitter,\n    \"instagram\":    $instagram,\n    \"pinterest\":    $pinterest,\n    \"youtube\":      $youtube,\n    \"dribbble\":     $dribbble,\n    \"github\":       $github,\n    \"reddit\":       $reddit\n) !default;\n// scss-docs-end brand-colors-map\n\n\n// Gradient\n//\n// The gradient which is added to components if `$enable-gradients` is `true`\n// This gradient is also added to elements with `.bg-gradient`\n\n$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;\n\n// $gradient: linear-gradient(50deg, rgba($white, .15) 0, rgba($white, 0) 100%) !default;\n\n// Bg Soft level\n\n$bg-soft-level:           -80% !default;\n$bg-shade-level:           15% !default;\n$bg-tint-level:            15% !default;\n\n\n// Body\n//\n// Settings for the `<body>` element.\n\n$body-bg:                   $white !default;\n$body-color:                $gray-700 !default;\n$body-text-align:           null !default;\n\n$body-secondary-color:      rgba($body-color, .75) !default;\n$body-secondary-bg:         $gray-200 !default;\n\n$body-tertiary-color:       rgba($body-color, .5) !default;\n$body-tertiary-bg:          $gray-100 !default;\n\n$body-emphasis-color:       $black !default;\n\n$code-color:                        $pink !default;\n\n\n\n// Surfaces\n//\n// Colors used for content area background colors\n\n$surface-colors: () !default;\n$surface-colors: map-merge((\n  \"surface-primary\":      $body-bg,\n  \"surface-secondary\":    $gray-100,\n  \"surface-tertiary\":     $gray-50,\n  \"surface-light\":        $gray-200,\n  \"surface-dark\":         shade-color($dark, 7%)\n), $surface-colors);\n\n// RGB color maps used for generating utility classes\n$theme-colors-rgb: map-loop($theme-colors, to-rgb, \"$value\") !default;\n$colors-rgb: map-loop($colors, to-rgb, \"$value\") !default;\n$surface-colors-rgb: map-loop($surface-colors, to-rgb, \"$value\") !default;\n","// stylelint-disable scss/dimension-no-non-numeric-values\n\n// SCSS RFS mixin\n//\n// Automated responsive values for font sizes, paddings, margins and much more\n//\n// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)\n\n// Configuration\n\n// Base value\n$rfs-base-value: 1.25rem !default;\n$rfs-unit: rem !default;\n\n@if $rfs-unit != rem and $rfs-unit != px {\n  @error \"`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.\";\n}\n\n// Breakpoint at where values start decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {\n  @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n}\n\n// Resize values based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != number or $rfs-factor <= 1 {\n  @error \"`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.\";\n}\n\n// Mode. Possibilities: \"min-media-query\", \"max-media-query\"\n$rfs-mode: min-media-query !default;\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-rfs to false\n$enable-rfs: true !default;\n\n// Cache $rfs-base-value unit\n$rfs-base-value-unit: unit($rfs-base-value);\n\n@function divide($dividend, $divisor, $precision: 10) {\n  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);\n  $dividend: abs($dividend);\n  $divisor: abs($divisor);\n  @if $dividend == 0 {\n    @return 0;\n  }\n  @if $divisor == 0 {\n    @error \"Cannot divide by 0\";\n  }\n  $remainder: $dividend;\n  $result: 0;\n  $factor: 10;\n  @while ($remainder > 0 and $precision >= 0) {\n    $quotient: 0;\n    @while ($remainder >= $divisor) {\n      $remainder: $remainder - $divisor;\n      $quotient: $quotient + 1;\n    }\n    $result: $result * 10 + $quotient;\n    $factor: $factor * .1;\n    $remainder: $remainder * 10;\n    $precision: $precision - 1;\n    @if ($precision < 0 and $remainder >= $divisor * 5) {\n      $result: $result + 1;\n    }\n  }\n  $result: $result * $factor * $sign;\n  $dividend-unit: unit($dividend);\n  $divisor-unit: unit($divisor);\n  $unit-map: (\n    \"px\": 1px,\n    \"rem\": 1rem,\n    \"em\": 1em,\n    \"%\": 1%\n  );\n  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {\n    $result: $result * map-get($unit-map, $dividend-unit);\n  }\n  @return $result;\n}\n\n// Remove px-unit from $rfs-base-value for calculations\n@if $rfs-base-value-unit == px {\n  $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);\n}\n@else if $rfs-base-value-unit == rem {\n  $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == px {\n  $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == \"em\" {\n  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));\n}\n\n// Calculate the media query value\n$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});\n$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);\n$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);\n\n// Internal mixin used to determine which media query needs to be used\n@mixin _rfs-media-query {\n  @if $rfs-two-dimensional {\n    @if $rfs-mode == max-media-query {\n      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {\n        @content;\n      }\n    }\n    @else {\n      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {\n        @content;\n      }\n    }\n  }\n  @else {\n    @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {\n      @content;\n    }\n  }\n}\n\n// Internal mixin that adds disable classes to the selector if needed.\n@mixin _rfs-rule {\n  @if $rfs-class == disable and $rfs-mode == max-media-query {\n    // Adding an extra class increases specificity, which prevents the media query to override the property\n    &,\n    .disable-rfs &,\n    &.disable-rfs {\n      @content;\n    }\n  }\n  @else if $rfs-class == enable and $rfs-mode == min-media-query {\n    .enable-rfs &,\n    &.enable-rfs {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Internal mixin that adds enable classes to the selector if needed.\n@mixin _rfs-media-query-rule {\n\n  @if $rfs-class == enable {\n    @if $rfs-mode == min-media-query {\n      @content;\n    }\n\n    @include _rfs-media-query () {\n      .enable-rfs &,\n      &.enable-rfs {\n        @content;\n      }\n    }\n  }\n  @else {\n    @if $rfs-class == disable and $rfs-mode == min-media-query {\n      .disable-rfs &,\n      &.disable-rfs {\n        @content;\n      }\n    }\n    @include _rfs-media-query () {\n      @content;\n    }\n  }\n}\n\n// Helper function to get the formatted non-responsive value\n@function rfs-value($values) {\n  // Convert to list\n  $values: if(type-of($values) != list, ($values,), $values);\n\n  $val: \"\";\n\n  // Loop over each value and calculate value\n  @each $value in $values {\n    @if $value == 0 {\n      $val: $val + \" 0\";\n    }\n    @else {\n      // Cache $value unit\n      $unit: if(type-of($value) == \"number\", unit($value), false);\n\n      @if $unit == px {\n        // Convert to rem if needed\n        $val: $val + \" \" + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);\n      }\n      @else if $unit == rem {\n        // Convert to px if needed\n        $val: $val + \" \" + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);\n      } @else {\n        // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n        $val: $val + \" \" + $value;\n      }\n    }\n  }\n\n  // Remove first space\n  @return unquote(str-slice($val, 2));\n}\n\n// Helper function to get the responsive value calculated by RFS\n@function rfs-fluid-value($values) {\n  // Convert to list\n  $values: if(type-of($values) != list, ($values,), $values);\n\n  $val: \"\";\n\n  // Loop over each value and calculate value\n  @each $value in $values {\n    @if $value == 0 {\n      $val: $val + \" 0\";\n    } @else {\n      // Cache $value unit\n      $unit: if(type-of($value) == \"number\", unit($value), false);\n\n      // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n      @if not $unit or $unit != px and $unit != rem {\n        $val: $val + \" \" + $value;\n      } @else {\n        // Remove unit from $value for calculations\n        $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));\n\n        // Only add the media query if the value is greater than the minimum value\n        @if abs($value) <= $rfs-base-value or not $enable-rfs {\n          $val: $val + \" \" + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);\n        }\n        @else {\n          // Calculate the minimum value\n          $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);\n\n          // Calculate difference between $value and the minimum value\n          $value-diff: abs($value) - $value-min;\n\n          // Base value formatting\n          $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);\n\n          // Use negative value if needed\n          $min-width: if($value < 0, -$min-width, $min-width);\n\n          // Use `vmin` if two-dimensional is enabled\n          $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n          // Calculate the variable width between 0 and $rfs-breakpoint\n          $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};\n\n          // Return the calculated value\n          $val: $val + \" calc(\" + $min-width + if($value < 0, \" - \", \" + \") + $variable-width + \")\";\n        }\n      }\n    }\n  }\n\n  // Remove first space\n  @return unquote(str-slice($val, 2));\n}\n\n// RFS mixin\n@mixin rfs($values, $property: font-size) {\n  @if $values != null {\n    $val: rfs-value($values);\n    $fluid-val: rfs-fluid-value($values);\n\n    // Do not print the media query if responsive & non-responsive values are the same\n    @if $val == $fluid-val {\n      #{$property}: $val;\n    }\n    @else {\n      @include _rfs-rule () {\n        #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);\n\n        // Include safari iframe resize fix if needed\n        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);\n      }\n\n      @include _rfs-media-query-rule () {\n        #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);\n      }\n    }\n  }\n}\n\n// Shorthand helper mixins\n@mixin font-size($value) {\n  @include rfs($value);\n}\n\n@mixin padding($value) {\n  @include rfs($value, padding);\n}\n\n@mixin padding-top($value) {\n  @include rfs($value, padding-top);\n}\n\n@mixin padding-right($value) {\n  @include rfs($value, padding-right);\n}\n\n@mixin padding-bottom($value) {\n  @include rfs($value, padding-bottom);\n}\n\n@mixin padding-left($value) {\n  @include rfs($value, padding-left);\n}\n\n@mixin margin($value) {\n  @include rfs($value, margin);\n}\n\n@mixin margin-top($value) {\n  @include rfs($value, margin-top);\n}\n\n@mixin margin-right($value) {\n  @include rfs($value, margin-right);\n}\n\n@mixin margin-bottom($value) {\n  @include rfs($value, margin-bottom);\n}\n\n@mixin margin-left($value) {\n  @include rfs($value, margin-left);\n}\n","// stylelint-disable property-disallowed-list\n// Single side border-radius\n\n// Helper function to replace negative values with 0\n@function valid-radius($radius) {\n  $return: ();\n  @each $value in $radius {\n    @if type-of($value) == number {\n      $return: append($return, max($value, 0));\n    } @else {\n      $return: append($return, $value);\n    }\n  }\n  @return $return;\n}\n\n// scss-docs-start border-radius-mixins\n@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {\n  @if $enable-rounded {\n    border-radius: valid-radius($radius);\n  }\n  @else if $fallback-border-radius != false {\n    border-radius: $fallback-border-radius;\n  }\n}\n\n@mixin border-top-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n    border-top-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-right-radius: valid-radius($radius);\n    border-bottom-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-bottom-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-bottom-right-radius: valid-radius($radius);\n    border-bottom-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n    border-bottom-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-top-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-top-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-bottom-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-bottom-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-bottom-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-bottom-left-radius: valid-radius($radius);\n  }\n}\n// scss-docs-end border-radius-mixins\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))\n//    md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n  @if not $n {\n    @error \"breakpoint `#{$name}` not found in `#{$breakpoints}`\";\n  }\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n  $min: map-get($breakpoints, $name);\n  @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n  $max: map-get($breakpoints, $name);\n  @return if($max and $max > 0, $max - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($lower, $breakpoints);\n  $max: breakpoint-max($upper, $breakpoints);\n\n  @if $min != null and $max != null {\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $max == null {\n    @include media-breakpoint-up($lower, $breakpoints) {\n      @content;\n    }\n  } @else if $min == null {\n    @include media-breakpoint-down($upper, $breakpoints) {\n      @content;\n    }\n  }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewp