@qrsln/lootstrap 24.4.8-beta.0 → 26.3.19-beta.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2021 krsln
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2021 krsln
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/css/Abstracts/Functions/index.css

@@ -0,0 +1,134 @@
+/*@formatter:off*/
+/*
+// Theming
+// 2024.03
+*/
+/*@formatter:on*/
+/*
+// Colors
+*/
+/*
+// ===========================================================================
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+// ===========================================================================
+*/
+/*@formatter:off*/
+/*@formatter:on*/
+/*
+// ===========================================================================
+// Utils
+// ===========================================================================
+*/
+/*
+// ==============================================================================================
+// Borders
+// ==============================================================================================
+*/
+/*@formatter:off*/
+/*@formatter:on*/
+/*
+// ==============================================================================================
+// Transition
+// ==============================================================================================
+*/
+/*
+// ==============================================================================================
+// Positioning
+// ==============================================================================================
+*/
+/*
+// ==============================================================================================
+// Sizing
+// ==============================================================================================
+*/
+/*
+// ==============================================================================================
+// Spacing => Margin, Padding
+// ==============================================================================================
+*/
+/**
+ * Typography
+ *
+ * Font, line-height, and color for body text, headings, and more.
+*/
+/*@formatter:off*/
+/*@formatter:on*/
+/*
+// ==============================================================================================
+// Shadow
+//
+// https://torquemag.io/2022/03/css-box-shadow-tutorial/
+// https://css-tricks.com/almanac/properties/b/box-shadow/
+// box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
+//
+// Box-shadow with rgba variable https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable
+// --component-shadow-color: 0, 0, 0; // Has to be like this :p
+// ==============================================================================================
+*/
+/*@formatter:off*/
+/**
+ * Grid breakpoints
+ *
+ * Define the minimum dimensions at which your layout will change,
+ * adapting to different screen sizes, for use in media queries.
+*/
+/**
+ * Grid containers
+ *
+ * Define the maximum width of `.container` for different screen sizes.
+*/
+/**
+ * Grid columns
+ *
+ * Set the number of columns and specify the width of the gutters.
+*/
+/**
+ * Container padding
+ *
+*/
+/*@formatter:on*/
+/**
+ * Filter Colors
+ *
+*/
+/*#region Filter Colors */
+/*@formatter:off*/
+/*@formatter:on*/
+/*#endregion */
+/**
+ * Color-Contrast
+ * from 2024: https://github.com/voxpelli/sass-color-helpers/tree/main
+ * from: https://gist.github.com/voxpelli/6304812
+*/
+/**
+ * Color-Contrast
+ * https://www.w3.org/TR/WCAG20/
+ * https://www.jasongaylord.com/blog/2023/05/30/calculate-contrast-in-sass
+*/
+/**
+ * Remove the unit of a value
+ *
+ * @param {Number} $number - Number to remove unit from
+ * @return {Number} - Unit-less value
+*/
+/**
+ * Helper function to replace characters in a string
+ * Replaces all instances of `$search` with `$replace` in `$string`
+ *
+ * @param {String} $string - Initial string
+ * @param {String} $search - Substring to replace
+ * @param {String} $replace ('') - New value
+ * @return {String} - Updated string
+*/
+/**
+ * Function to create an optimized svg url
+ *
+ * https://codepen.io/kevinweber/pen/dXWoRw
+ * https://css-tricks.com/probably-dont-base64-svg/
+ * https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
+ * Reference: https://codepen.io/jakob-e/pen/doMoML
+*/
+
+/*# sourceMappingURL=index.css.map */

package/dist/css/Abstracts/Functions/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../scss/Abstracts/_variables.scss","../../../../scss/Abstracts/Functions/Text-color/_best-color-contrast.scss","../../../../scss/Abstracts/Functions/Text-color/_wcag-safe-colors.scss","../../../../scss/Abstracts/Functions/_helpers.scss"],"names":[],"mappings":"AAQA;AAgCA;AAAA;AAAA;AAAA;AAoCA;AA6DA;AAAA;AAAA;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AAaA;AAEA;AAAA;AAAA;AAAA;AAAA;AAUA;AAAA;AAAA;AAAA;AAAA;AAMA;AAqBA;AAEA;AAAA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AA6BA;AAAA;AAAA;AAAA;AAAA;AAMA;AAuDA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyDA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AAAA;AAAA;AAmBA;AAAA;AAAA;AAAA;AAAA;AAaA;AAAA;AAAA;AAAA;AAOA;AAKA;AAAA;AAAA;AAAA;AAKA;AAEA;AAuEA;AAEA;ACjiBA;AAAA;AAAA;AAAA;AAAA;ACHA;AAAA;AAAA;AAAA;AAAA;ACIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","file":"index.css","sourcesContent":["// ===========================================================================\n// Color System\n// ===========================================================================\n@use \"sass:map\";\n\n@use \"config\" as *;\n@use \"Functions/color-customized\" as *;\n\n/*@formatter:off*/\n$White    : hsl(0, 0%, 100%) !default;\n$Black    : hsl(0,0%,0%) !default;\n\n$Silver   : hsl(0, 0%, 75%) !default;\n$Gray\t  :\thsl(213,8%,45%)  !default;\n\n$Red      : hsl(354,66%,54%) !default;\n$Lime     : hsl(120, 100%, 50%) !default;\n$Blue     : hsl(212,97%,43%) !default;\n$Yellow   : hsl(45,100%,51%) !default;\n$Cyan     : hsl(180,100%,50%) !default;\n$Magenta  : hsl(300,100%, 50%) !default;\n\n//$Purple   : hsl(261,51%,51%) !default;\n\n$Purple   : rgb(160,32,240) !default;\n$Violet   : rgb(143,0,255) !default;\n\n$Green    : hsl(134,61%,41%) !default;\n$Maroon   : hsl(331, 74%, 30%) !default;\n$Navy     : hsl(210, 100%, 12%) !default;\n$Teal     : hsl(162,73%,46%) !default;\n$Olive    : hsl(60,100%, 25%) !default;\n$Orange   : hsl(24,93%,50%) !default;\n\n//$Pink     : hsl(324,79%,60%) !default;\n$Pink     : rgb(255,192,203) !default;\n\n$Brown    : hsl(0, 33%, 38%) !default;\n$Indigo   : hsl(270, 100%, 25%) !default;\n\n/*\n// Theming\n// 2024.03\n*/\n\n$ls-2024-3-Primary    : hsl(250, 53%, 54%) !default; // #604cc8 based on #624ec9;\n$ls-2024-3-Secondary  : hsl(219, 10%, 68%) !default; // #a5abb6 based on #a4aab5;\n$ls-2024-3-Success    : hsl(138, 62%, 29%) !default; // #1c7838 based on #1c7837;\n$ls-2024-3-Danger     : hsl(356, 66%, 47%) !default; // #c72933 based on #c72933;\n$ls-2024-3-Warning    : hsl(42, 96%, 56%)  !default; // #fbba23 based on #fabb23;\n$ls-2024-3-Info       : hsl(197, 74%, 57%) !default; // #40b5e2 based on #42b6e3;\n$ls-2024-3-Light      : hsl(220, 27%, 98%) !default; // #f9f9fb based on #f8f9fb;\n$ls-2024-3-Dark       : hsl(214, 8%, 16%)  !default; // #26282c based on #26292d;\n$ls-2024-3-Night      : hsl(0, 0%, 7%)     !default; // #121212\n\n\n$ls-2022-2-Primary    : hsl(217, 96%, 52%) !default;  // #0F69FA  based $bs-Primary\n$ls-2022-2-Secondary  : hsl(208,7%,46%) !default;     // #6D767E  based $bs-Secondary\n$ls-2022-2-Success    : hsl(150, 67%, 35%) !default;  // #1D9559  based $bs-Success\n$ls-2022-2-Danger     : hsl(354,66%,54%) !default;    // #D73C4C  based mixed\n$ls-2022-2-Warning    : hsl(45, 100%, 45%) !default;  // #E6AC00  based mixed\n$ls-2022-2-Info       : hsl(195, 90%, 55%) !default;  // #25C0F4  based mixed $bs-Info / $mdb-Info\n$ls-2022-2-Light      : hsl(0, 0%, 98%) !default;     // #FAFAFA  based $mdb-Light    => Shade(white, 2%); // #fafafa\n$ls-2022-2-Dark       : hsl(240, 7%, 18%) !default;   // #2B2B31  based mixed         => mix(Tint(blue, 15%), Tint(black, 17%), 3%); // #2b2b31\n$ls-2022-2-Night      : hsl(0, 0%, 7%) !default;      // #121212                      => Tint(black, 7%); // #121212\n\n$Primary    : $ls-2024-3-Primary    !default;\n$Secondary  : $ls-2024-3-Secondary  !default;\n$Success    : $ls-2024-3-Success    !default;\n$Danger     : $ls-2024-3-Danger     !default;\n$Warning    : $ls-2024-3-Warning    !default;\n$Info       : $ls-2024-3-Info       !default;\n$Light      : $ls-2024-3-Light      !default;\n$Dark       : $ls-2024-3-Dark       !default;\n$Night      : $ls-2024-3-Night      !default;\n\n/*@formatter:on*/\n\n//$Prefix: ls-;\n\n// 'red', 'lime', 'blue', 'yellow', 'cyan', 'magenta', 'purple', 'green', 'maroon', 'navy', 'teal', 'olive', 'orange', 'pink', 'brown', 'indigo', 'white', 'silver', 'gray'\n$Base-colors: (\n        \"red\" : $Red,\n        \"lime\" : $Lime,\n        \"blue\" : $Blue,\n        \"yellow\" : $Yellow,\n        \"cyan\" : $Cyan,\n        \"magenta\" : $Magenta,\n        \"purple\" : $Purple,\n        \"green\" : $Green,\n        \"maroon\" : $Maroon,\n        \"navy\" : $Navy,\n        \"teal\" : $Teal,\n        \"olive\" : $Olive,\n        \"orange\" : $Orange,\n        \"pink\" : $Pink,\n        \"brown\" : $Brown,\n        \"indigo\" : $Indigo,\n        \"black\" : $Black,\n        \"white\" : $White,\n        \"silver\" : $Silver,\n        \"gray\" : $Gray,\n) !default;\n\n// Customize the light and dark text colors for use in our color contrast function.\n$Color-contrast-black: $Black !default;\n$Color-contrast-white: $White !default;\n\n// primary, secondary, success, info, warning, danger, light, dark, night\n$Theme-colors: (\n        \"primary\" : $Primary,\n        \"secondary\" : $Secondary,\n        \"success\" : $Success,\n        \"info\" : $Info,\n        \"warning\" : $Warning,\n        \"danger\" : $Danger, //\"error\" : $Danger,\n\n        \"light\" : $Light,\n        \"dark\" : $Dark,\n        \"night\" : $Night,\n) !default;\n\n$Theme-fg-colors: (\n        \"primary\" : $Color-contrast-white,\n        \"secondary\" : $Color-contrast-black,\n        \"success\" : $Color-contrast-white,\n        \"info\" : $Color-contrast-black,\n        \"warning\" : $Color-contrast-black,\n        \"danger\" : $Color-contrast-white,\n        \"light\" : $Color-contrast-black,\n        \"dark\" : $Color-contrast-white,\n        \"night\" : $Color-contrast-white,\n) !default;\n\n$Muted: hsla(213, 11%, 69%, 1); // #A7AFB9FF\n\n\n/*\n// Colors\n*/\n\n$Colors: map.merge($Base-colors, $Theme-colors);\n//$colors-all: map.merge($colors-all, (\"light\" : $Light, \"dark\" : $Dark, \"night\" : $Night));\n\n$Bg-colors-hsla: ();\n$Bg-colors-hsla: Color-hsla($Colors, --#{$Prefix}bg-alpha, --#{$Prefix}bg-lightness);\n$Bg-colors-hsla: map.merge($Bg-colors-hsla, (\"transparent\": transparent));\n\n$Text-colors-hsla: ();\n$Text-colors-hsla: Color-hsla($Colors, --#{$Prefix}text-alpha, null);\n$Text-colors-hsla: map.merge($Text-colors-hsla, (\"muted\": $Muted, \"reset\": inherit,));\n\n$Border-colors-hsla: ();\n$Border-colors-hsla: Color-hsla($Colors, --#{$Prefix}border-alpha, null);\n$Border-colors-hsla: map.merge($Border-colors-hsla, (\"transparent\": transparent));\n\n/*\n// ===========================================================================\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n// ===========================================================================\n*/\n\n/*@formatter:off*/\n$Enable-rounded                 : true !default;\n$Enable-shadows                 : false !default;\n$Enable-button-pointers         : true !default;\n\n$Enable-gradients               : false !default;\n$Enable-transitions             : true !default;  // _transition.scss mixin\n$Enable-reduced-motion          : true !default;  // _transition.scss mixin\n\n$Enable-grid-classes            : true !default;\n$Enable-container-classes       : true !default;\n\n$Enable-negative-margins        : true;\n/*@formatter:on*/\n\n/*\n// ===========================================================================\n// Utils\n// ===========================================================================\n*/\n\n$Color-alpha-map: (0: 0, 5: .05, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;\n$Color-lightness-map: (0:0%, 5: 5%, 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%) !default;\n\n\n/*\n// ==============================================================================================\n// Borders\n// ==============================================================================================\n*/\n\n/*@formatter:off*/\n$Border-color-hsl: var(--#{$Prefix}border-hsl);\n$Border-color: hsla($Border-color-hsl, var(--#{$Prefix}border-alpha));\n$Border: 1px solid $Border-color;\n\n$Border-width   : 1px !default;\n$Border-widths  : (0: 0, 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px) !default;\n\n$Rounded        : .25rem !default;\n//$Border-radius  : var(--#{$Prefix}border-radius);\n$Border-radius  : $Rounded;\n\n$Rounded-sm     : .20rem !default;\n$Rounded-md     : .375rem !default;\n$Rounded-lg     : .75rem !default;\n$Rounded-xl     : 1.0rem !default;\n$Rounded-xxl    : 1.5rem !default;\n\n$Rounded-pill   : 50rem !default;\n$Rounded-circle : 50% !default;\n\n/*@formatter:on*/\n\n/*\n// ==============================================================================================\n// Transition\n// ==============================================================================================\n*/\n\n$Transition-base: all .2s ease-in-out !default;\n//$Transition-fade:             opacity .15s linear !default;\n//$Transition-collapse:         height .35s ease !default;\n//$Transition-collapse-width:   width .35s ease !default;\n\n/*\n// ==============================================================================================\n// Positioning\n// ==============================================================================================\n*/\n\n$Position-values: (\n        0: 0,\n        50: 50%,\n        100: 100%\n) !default;\n\n/*\n// ==============================================================================================\n// Sizing\n// ==============================================================================================\n*/\n\n$Sizes-percents: (\n        10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%,\n        5:5%, 15:15%, 25:25%, 35:35%, 45:45%, 55:55%, 65:65%, 75:75%, 85:85%, 95:95%,\n        33:33.333%, 66:66.666%, auto:auto\n) !default;\n\n/*\n// ==============================================================================================\n// Spacing => Margin, Padding\n// ==============================================================================================\n*/\n\n$Spacer: 1rem !default;\n$Spacers: (\n        0: 0,\n        1: ($Spacer * 0.25),\n        2: ($Spacer * 0.5),\n        3: ($Spacer * 1.00),\n        4: ($Spacer * 1.50),\n        5: ($Spacer * 3.00),\n);\n\n$Spacers-negative: null !default;\n\n@if $Enable-negative-margins {\n  $Spacers-negative: (\n    n1: ($Spacer * -0.25),\n    n2: ($Spacer * -0.5),\n    n3: ($Spacer * -1.00),\n    n4: ($Spacer * -1.50),\n    n5: ($Spacer * -3.00),\n  );\n}\n\n\n/**\n * Typography\n *\n * Font, line-height, and color for body text, headings, and more.\n*/\n\n/*@formatter:off*/\n// Font family\n$Font-family-sans-serif: //\n        // Cross-platform generic font family (default user interface font)\n        system-ui,\n                // Safari for macOS and iOS (San Francisco)\n        -apple-system,\n                // Windows\n        \"Segoe UI\",\n                // Android\n        Roboto,\n                // Basic web fallback\n        \"Helvetica Neue\", Arial,\n                // Linux\n        \"Noto Sans\",\n        \"Liberation Sans\",\n                // Sans serif fallback\n        sans-serif,\n                // Emoji fonts\n        \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$Font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n$Font-family-base: var(--#{$Prefix}font-sans-serif) !default;\n$Font-family-code: var(--#{$Prefix}font-monospace) !default;\n\n// Font-weight\n$Font-weight-lighter    : lighter !default;\n$Font-weight-light      : 300 !default;\n$Font-weight-normal     : 400 !default;\n$Font-weight-bold       : 700 !default;\n$Font-weight-bolder     : bolder !default;\n\n$Line-height-base       : 1.5 !default;\n$Line-height-sm         : 1.25 !default;\n$Line-height-lg         : 2 !default;\n\n// Font-size\n$Font-size-base         : 1rem !default; // Assumes the browser default, typically `16px`\n$Font-size-sm           : $Font-size-base * .875 !default;\n$Font-size-lg           : $Font-size-base * 1.25 !default;\n\n$H1-font-size: $Font-size-base * 2.5 !default;\n$H2-font-size: $Font-size-base * 2 !default;\n$H3-font-size: $Font-size-base * 1.75 !default;\n$H4-font-size: $Font-size-base * 1.5 !default;\n$H5-font-size: $Font-size-base * 1.25 !default;\n$H6-font-size: $Font-size-base !default;\n\n$Font-sizes: (\n        1: $H1-font-size,\n        2: $H2-font-size,\n        3: $H3-font-size,\n        4: $H4-font-size,\n        5: $H5-font-size,\n        6: $H6-font-size\n) !default;\n/*@formatter:on*/\n\n\n/*\n// ==============================================================================================\n// Shadow\n//\n// https://torquemag.io/2022/03/css-box-shadow-tutorial/\n// https://css-tricks.com/almanac/properties/b/box-shadow/\n// box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];\n//\n// Box-shadow with rgba variable https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\n// ==============================================================================================\n*/\n\n$Shadow-color: var(--#{$Prefix}shadow-hsl);\n\n$Shadow-1-inset: inset 0 1px 3px hsla($Shadow-color, 0.12), inset 0 1px 2px hsla($Shadow-color, 0.24);\n$Shadow-1: 0 1px 3px hsla($Shadow-color, 0.12), 0 1px 2px hsla($Shadow-color, 0.24);\n$Shadow-2: 0 3px 6px hsla($Shadow-color, 0.15), 0 3px 6px hsla($Shadow-color, 0.24);\n$Shadow-3: 0 9px 21px hsla($Shadow-color, 0.18), 0 6px 6px hsla($Shadow-color, 0.24);\n$Shadow-4: 0 12px 27px hsla($Shadow-color, 0.24), 0 9px 9px hsla($Shadow-color, 0.21);\n$Shadow-5: 0 18px 36px hsla($Shadow-color, 0.32), 0 15px 12px hsla($Shadow-color, 0.21);\n\n$Shadow: $Shadow-1;\n$Shadow-hover: $Shadow-3;\n$Shadow-inset: $Shadow-1-inset;\n\n$Shadow-map: (\n        inner: $Shadow-inset,\n        null: $Shadow,\n        0: none,\n        1: $Shadow-1,\n        2 : $Shadow-2,\n        3 : $Shadow-3,\n        4 : $Shadow-4,\n        5 : $Shadow-5,\n);\n\n$Drop-shadow-0: drop-shadow(0 0 #0000);\n$Drop-shadow-1: drop-shadow(0 1px 3px hsla($Shadow-color, 0.24)) drop-shadow(0 1px 2px hsla($Shadow-color, 0.48));\n$Drop-shadow-2: drop-shadow(0 3px 6px hsla($Shadow-color, 0.30)) drop-shadow(0 3px 6px hsla($Shadow-color, 0.48));\n$Drop-shadow-3: drop-shadow(0 9px 21px hsla($Shadow-color, 0.32)) drop-shadow(0 6px 6px hsla($Shadow-color, 0.48));\n$Drop-shadow-4: drop-shadow(0 12px 27px hsla($Shadow-color, 0.48)) drop-shadow(0 9px 9px hsla($Shadow-color, 0.42));\n$Drop-shadow-5: drop-shadow(0 18px 36px hsla($Shadow-color, 0.64)) drop-shadow(0 15px 12px hsla($Shadow-color, 0.42));\n\n$Drop-shadow: $Drop-shadow-1;\n$Drop-shadow-map: (\n        null: $Drop-shadow,\n        0: $Drop-shadow-0,\n        1: $Drop-shadow-1,\n        2: $Drop-shadow-2,\n        3: $Drop-shadow-3,\n        4: $Drop-shadow-4,\n        5: $Drop-shadow-5,\n);\n\n//region Grid System\n\n/*@formatter:off*/\n\n/**\n * Grid breakpoints\n *\n * Define the minimum dimensions at which your layout will change,\n * adapting to different screen sizes, for use in media queries.\n*/\n\n$Grid-breakpoints: (\n        //xs: 0,\n        //sm : 480px,\n        //md : 768px,\n        //lg : 1024px,\n        //xl : 1280px,\n        //xxl : 1440px,\n        xs: 0,\n        sm: 576px,\n        md: 768px,\n        lg: 992px,\n        xl: 1200px,\n        xxl: 1400px\n);\n\n/**\n * Grid containers\n *\n * Define the maximum width of `.container` for different screen sizes.\n*/\n\n$Container-max-widths: (\n        //sm : 480px,\n        //md : 768px,\n        //lg : 976px,\n        //xl : 1232px,\n        //xxl : 1376px,\n        xs: 540px,\n        md: 720px,\n        lg: 960px,\n        xl: 1140px,\n        xxl: 1320px\n);\n\n/**\n * Grid columns\n *\n * Set the number of columns and specify the width of the gutters.\n*/\n\n$Grid-columns           : 12 !default;\n$Grid-row-columns       : 6 !default;\n\n$Grid-gutter-width      : 1.5rem;\n$Gutters                : $Spacers !default;\n$include-column-box-sizing                : false;\n\n/**\n * Container padding\n *\n*/\n\n$Container-padding-x: $Grid-gutter-width !default;\n\n/*@formatter:on*/\n\n//endregion\n\n\n/**\n * Filter Colors\n *\n*/\n\n/*#region Filter Colors */\n\n/*@formatter:off*/\n\n$F-Blur     : blur(var(--#{$Prefix}filter-blur, 0));\n$F-Shadow   : #{var(--#{$Prefix}drop-shadow, drop-shadow(0 0 #0000))};\n\n$F-White    : $F-Blur $F-Shadow invert(1) grayscale(100%) brightness(200%) !default;\n$F-Silver   : $F-Blur $F-Shadow invert(89%) sepia(0%) saturate(7%) hue-rotate(172deg) brightness(91%) contrast(82%) !default; // BFBFBF\n$F-Gray\t    : $F-Blur $F-Shadow invert(46%) sepia(2%) saturate(2321%) hue-rotate(174deg) brightness(94%) contrast(86%) !default; // 6A727C\n\n$F-Red      : $F-Blur $F-Shadow invert(31%) sepia(83%) saturate(1382%) hue-rotate(325deg) brightness(87%) contrast(93%) !default; // D73C4C\n$F-Lime     : $F-Blur $F-Shadow invert(70%) sepia(52%) saturate(6787%) hue-rotate(83deg) brightness(127%) contrast(120%) !default; // 00FF00\n$F-Blue     : $F-Blur $F-Shadow invert(23%) sepia(98%) saturate(1650%) hue-rotate(198deg) brightness(104%) contrast(105%) !default; // 0367D8;\n$F-Yellow   : $F-Blur $F-Shadow invert(68%) sepia(88%) saturate(529%) hue-rotate(354deg) brightness(101%) contrast(103%) !default; // FFC105\n$F-Cyan     : $F-Blur $F-Shadow invert(74%) sepia(89%) saturate(1247%) hue-rotate(131deg) brightness(106%) contrast(109%) !default; // 00FFFF\n$F-Magenta  : $F-Blur $F-Shadow invert(17%) sepia(100%) saturate(3641%) hue-rotate(296deg) brightness(117%) contrast(124%) !default; // FF00FF\n\n$F-Purple   : $F-Blur $F-Shadow invert(28%) sepia(68%) saturate(1773%) hue-rotate(242deg) brightness(88%) contrast(88%) !default; // 6F42C2\n$F-Green    : $F-Blur $F-Shadow invert(52%) sepia(15%) saturate(2202%) hue-rotate(82deg) brightness(99%) contrast(86%) !default; // 29A847\n$F-Maroon   : $F-Blur $F-Shadow invert(10%) sepia(85%) saturate(3597%) hue-rotate(317deg) brightness(96%) contrast(92%) !default; // 85144B\n$F-Navy     : $F-Blur $F-Shadow invert(10%) sepia(15%) saturate(7084%) hue-rotate(187deg) brightness(100%) contrast(104%) !default; // 001F3D\n$F-Teal     : $F-Blur $F-Shadow invert(72%) sepia(9%) saturate(3292%) hue-rotate(110deg) brightness(91%) contrast(85%) !default; // 20CB98\n$F-Olive    : $F-Blur $F-Shadow invert(37%) sepia(91%) saturate(1164%) hue-rotate(40deg) brightness(94%) contrast(100%) !default; // 808000\n$F-Orange   : $F-Blur $F-Shadow invert(42%) sepia(21%) saturate(5566%) hue-rotate(2deg) brightness(104%) contrast(93%) !default; // F66809\n$F-Pink     : $F-Blur $F-Shadow invert(40%) sepia(65%) saturate(3659%) hue-rotate(302deg) brightness(103%) contrast(83%) !default; // EA48A9\n$F-Brown    : $F-Blur $F-Shadow invert(20%) sepia(12%) saturate(6107%) hue-rotate(327deg) brightness(103%) contrast(71%) !default; // 814141\n$F-Indigo   : $F-Blur $F-Shadow invert(4%) sepia(86%) saturate(7495%) hue-rotate(259deg) brightness(101%) contrast(101%) !default; // 400080\n\n$F-Success  : $F-Green !default;\n$F-Info     : $F-Blue !default;\n$F-Warning  : $F-Yellow !default;\n$F-Danger   : $F-Red !default;\n\n$F-Primary  : $F-Blur $F-Shadow invert(24%) sepia(68%) saturate(6878%) hue-rotate(257deg) brightness(66%) contrast(115%) !default; // 4712AF\n$F-Secondary: $F-Blur $F-Shadow invert(49%) sepia(8%) saturate(443%) hue-rotate(166deg) brightness(91%) contrast(91%) !default; // 6D767E\n$F-Light    : $F-Blur $F-Shadow invert(100%) sepia(14%) saturate(445%) hue-rotate(176deg) brightness(100%) contrast(97%) !default; // F9FAFB\n$F-Dark     : $F-Blur $F-Shadow invert(21%) sepia(10%) saturate(581%) hue-rotate(169deg) brightness(96%) contrast(92%) !default; // 353B41\n\n$Filter-colors: (\n        \"red\"     : $F-Red,\n        \"lime\"    : $F-Lime,\n        \"blue\"    : $F-Blue,\n        \"yellow\"  : $F-Yellow,\n        \"cyan\"    : $F-Cyan,\n        \"magenta\" : $F-Magenta,\n        \"purple\"  : $F-Purple,\n        \"green\"   : $F-Green,\n        \"maroon\"  : $F-Maroon,\n        \"navy\"    : $F-Navy,\n        \"teal\"    : $F-Teal,\n        \"olive\"   : $F-Olive,\n        \"orange\"  : $F-Orange,\n        \"pink\"    : $F-Pink,\n        \"brown\"   : $F-Brown,\n        \"indigo\"  : $F-Indigo,\n        \"white\"   : $F-White,\n        \"silver\"  : $F-Silver,\n        \"gray\"    : $F-Gray,\n        // Colors - Theme\n        \"primary\"   : $F-Primary,\n        \"secondary\" : $F-Secondary,\n        \"success\"   : $F-Success,\n        \"info\"      : $F-Info,\n        \"warning\"   : $F-Warning,\n        \"danger\"    : $F-Danger,\n        \"light\"     : $F-Light,\n        \"dark\"      : $F-Dark,\n        // NONE\n        \"black\"     : $F-Dark,\n        \"none\"      : $F-Dark,\n);\n\n/*@formatter:on*/\n\n/*#endregion */","@use 'sass:color';\n@use 'sass:list';\n@use 'sass:math';\n\n@use \"../../../Abstracts/variables\" as *;\n\n/**\n * Color-Contrast\n * from 2024: https://github.com/voxpelli/sass-color-helpers/tree/main\n * from: https://gist.github.com/voxpelli/6304812\n*/\n\n/// Color Relative Luminance Calculator\n/// Relative luminance follows the photometric definition of luminance, but with the values normalized to 1 or 100 for a reference white.\n///\n/// Usage  => Luminance($Dark)\n/// Tested => https://contrastchecker.online/color-relative-luminance-calculator\n/// Adapted\n@function Luminance($color) {\n  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n  //$rgba: red($color), green($color), blue($color);\n  $rgba: color.channel($color, \"red\", $space: rgb), color.channel($color, \"green\", $space: rgb), color.channel($color, \"blue\", $space: rgb);\n  $rgba2: ();\n\n  @for $i from 1 through 3 {\n    $rgb: list.nth($rgba, $i);\n    $rgb: math.div($rgb, 255);\n\n    //$rgb: if($rgb < .03928, $rgb / 12.92, ch-pow(($rgb + .055) / 1.055, 2.4, 16));\n    //$rgb: if($rgb < .03928, math.div($rgb, 12.92), math.pow(math.div($rgb + 0.055, 1.055), 2.4));\n    //$rgb: if(sass($rgb < 0.03928): math.div($rgb, 12.92); else: math.pow(math.div($rgb + 0.055, 1.055), 2.4));\n    $rgb-linear: math.pow(math.div($rgb + 0.055, 1.055), 2.4);\n    @if $rgb < 0.03928 {\n      $rgb-linear: math.div($rgb, 12.92);\n    }\n    $rgb: $rgb-linear;\n\n    $rgba2: list.append($rgba2, $rgb);\n  }\n\n  @return .2126 * list.nth($rgba2, 1) + .7152 * list.nth($rgba2, 2) + 0.0722 * list.nth($rgba2, 3);\n}\n\n/// Calculate contrast ratio of foreground and background colors and check for Web Content Accessibility Guidelines (WCAG) https://www.w3.org/WAI/standards-guidelines/wcag/.\n///\n// Usage  => Contrast-ratio($Dark, $Light)\n/// Tested => https://contrastchecker.online/\n/// Tested => https://coolors.co/contrast-checker/2b2b31-fafafa\n@function Contrast-ratio($color1, $color2) {\n  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n  $luminance1: Luminance($color1) + .05;\n  $luminance2: Luminance($color2) + .05;\n  $ratio: math.div($luminance1, $luminance2);\n\n  @if $luminance2 > $luminance1 {\n    $ratio: math.div(1, $ratio);\n  }\n\n  $ratio: math.div(round($ratio * 10), 10);\n\n  @return $ratio;\n}\n\n\n/// Get best Text Color From array, based on bg color\n/// Usage  => Color-contrast($Dark)\n@function Color-contrast-best($base, $contrast-colors: ($Color-contrast-white,$Color-contrast-black), $tolerance: 0) {\n  $best: list.nth($contrast-colors, 1);\n  $contrast: Contrast-ratio($base, $best);\n\n  @for $i from 2 through list.length($contrast-colors) {\n    $currentColor: list.nth($contrast-colors, $i);\n    $currentContrast: Contrast-ratio($base, $currentColor);\n    @if ($currentContrast - $contrast > $tolerance) {\n      $best: $currentColor;\n      $contrast: $currentContrast;\n    }\n  }\n\n  @if ($contrast < 3) {\n    @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n  }\n\n  @return $best;\n}\n","@use \"sass:list\";\n@use \"sass:math\";\n\n/**\n * Color-Contrast\n * https://www.w3.org/TR/WCAG20/\n * https://www.jasongaylord.com/blog/2023/05/30/calculate-contrast-in-sass\n*/\n@use \"sass:map\";\n\n@function sRGBToLinear($colorValue) {\n  $colorValue: calc($colorValue / 255);\n  @if $colorValue <= 0.04045 {\n    @return calc($colorValue / 12.92);\n  } @else {\n    @return math.pow(($colorValue + 0.055), 2.4);\n  }\n}\n\n@function calculate-contrast($value1, $value2) {\n  $luminance1: (0.2126 * sRGBToLinear(red($value1))) + (0.7152 * sRGBToLinear(green($value1))) + (0.0722 * sRGBToLinear(blue($value1)));\n  $luminance2: (0.2126 * sRGBToLinear(red($value2))) + (0.7152 * sRGBToLinear(green($value2))) + (0.0722 * sRGBToLinear(blue($value2)));\n\n  @return calc((max($luminance1, $luminance2) + 0.05) / (min($luminance1, $luminance2) + 0.05));\n}\n\n@function find-safe-color($color, $ratio: 4.5) {\n  $lightness: lightness($color);\n  $value: $color;\n  $contrast: 0.0;\n  $i: 0;\n\n  @if $lightness < 50 {\n    $value: lighten($value, 5%);\n    $contrast: calculate-contrast($color, $value);\n    $i: $i + 1;\n\n    @while $contrast < $ratio and $i < 20 {\n      $value: lighten($value, 5%);\n      $contrast: calculate-contrast($color, $value);\n      $i: $i + 1;\n    }\n  } @else {\n    $value: darken($value, 5%);\n    $contrast: calculate-contrast($color, $value);\n    $i: $i + 1;\n\n    @while $contrast < $ratio and $i < 20 {\n      $value: darken($value, 5%);\n      $contrast: calculate-contrast($color, $value);\n      $i: $i + 1;\n    }\n  }\n\n  //@if $i >= 20 {\n  //  @debug \"Color not safe\";\n  //}\n\n  @return ($value, $contrast);\n}\n\n@function wcag-safe-colors($base-color) {\n  $colors: ();\n\n  $wcag30: find-safe-color($base-color, 3.0);\n  $wcag45: find-safe-color($base-color);\n  $wcag70: find-safe-color($base-color, 7.0);\n\n  $colors: map.merge($colors, (\n          'base-color': $base-color,\n\n          'wcag20-aa-normal-color': list.nth($wcag45, 1),\n          'wcag20-aa-normal-ratio': list.nth($wcag45, 2),\n\n          'wcag20-aa-large-color': list.nth($wcag30, 1),\n          'wcag20-aa-large-ratio': list.nth($wcag30, 2),\n\n          'wcag21-aa-input-color': list.nth($wcag30, 1),\n          'wcag21-aa-input-ratio': list.nth($wcag30, 2),\n\n          'wcag21-aaa-normal-color': list.nth($wcag70, 1),\n          'wcag21-aaa-normal-ratio': list.nth($wcag70, 2),\n\n          'wcag21-aaa-large-color': list.nth($wcag45, 1),\n          'wcag21-aaa-large-ratio': list.nth($wcag45, 2)\n  ));\n\n  @return $colors;\n}\n\n","// ===========================================================================\n// Functions - Helpers\n// ===========================================================================\n@use 'sass:math';\n@use 'sass:meta';\n@use \"sass:string\";\n\n/**\n * Remove the unit of a value\n *\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unit-less value\n*/\n@function strip-unit($number) {\n  @if meta.type-of($number) == 'number' and not unitless($number) {\n    //@return $number / ($number * 0 + 1);\n    @return math.div($number, $number * 0 + 1);\n  }\n\n  @return $number;\n}\n\n/**\n * Helper function to replace characters in a string\n * Replaces all instances of `$search` with `$replace` in `$string`\n *\n * @param {String} $string - Initial string\n * @param {String} $search - Substring to replace\n * @param {String} $replace ('') - New value\n * @return {String} - Updated string\n*/\n@function str-replace($string, $original, $replacement: \"\") {\n  $index: string.index($string, $original);\n\n  @if $index {\n    @return string.slice($string, 1, $index - 1) + $replacement + str-replace(string.slice($string, $index + string.length($original)), $original, $replacement);\n  }\n\n  @return $string;\n}\n\n/**\n * Function to create an optimized svg url\n *\n * https://codepen.io/kevinweber/pen/dXWoRw\n * https://css-tricks.com/probably-dont-base64-svg/\n * https://codepen.io/tigt/post/optimizing-svgs-in-data-uris\n * Reference: https://codepen.io/jakob-e/pen/doMoML\n*/\n@function SVG-url($svg) {\n  //\n  //  Add missing namespace\n  //\n  @if not string.index($svg,xmlns) {\n    $svg: str-replace($svg, '<svg', '<svg xmlns=\"http://www.w3.org/2000/svg\"');\n  }\n  //\n  //  Chunk up string in order to avoid\n  //  \"stack level too deep\" error\n  //\n  $encoded: '';\n  $slice: 2000;\n  $index: 0;\n  $loops: math.ceil(math.div(string.length($svg), $slice));\n  @for $i from 1 through $loops {\n    $chunk: string.slice($svg, $index, $index + $slice - 1);\n    //\n    //   Encode\n    //\n    $chunk: str-replace($chunk, '\"', '\\'');\n    $chunk: str-replace($chunk, '%', '%25');\n    $chunk: str-replace($chunk, '&', '%26');\n    $chunk: str-replace($chunk, '#', '%23');\n    $chunk: str-replace($chunk, '{', '%7B');\n    $chunk: str-replace($chunk, '}', '%7D');\n    $chunk: str-replace($chunk, '<', '%3C');\n    $chunk: str-replace($chunk, '>', '%3E');\n\n    //\n    //    The maybe list\n    //\n    //    Keep size and compile time down\n    //    ... only add on documented fail\n    //\n    //  $chunk: str-replace($chunk, '|', '%7C');\n    //  $chunk: str-replace($chunk, '[', '%5B');\n    //  $chunk: str-replace($chunk, ']', '%5D');\n    //  $chunk: str-replace($chunk, '^', '%5E');\n    //  $chunk: str-replace($chunk, '`', '%60');\n    //  $chunk: str-replace($chunk, ';', '%3B');\n    //  $chunk: str-replace($chunk, '?', '%3F');\n    //  $chunk: str-replace($chunk, ':', '%3A');\n    //  $chunk: str-replace($chunk, '@', '%40');\n    //  $chunk: str-replace($chunk, '=', '%3D');\n\n    $encoded: #{$encoded}#{$chunk};\n    $index: $index + $slice;\n  }\n  @return url(\"data:image/svg+xml,#{$encoded}\");\n}\n\n//  Background svg mixin\n@mixin SVG-background($svg) {\n  background-image: SVG-url($svg);\n}\n"]}

package/dist/css/Abstracts/Mixins/index.css

@@ -0,0 +1,177 @@
+/*@formatter:off*/
+/*
+// Theming
+// 2024.03
+*/
+/*@formatter:on*/
+/*
+// Colors
+*/
+/*
+// ===========================================================================
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+// ===========================================================================
+*/
+/*@formatter:off*/
+/*@formatter:on*/
+/*
+// ===========================================================================
+// Utils
+// ===========================================================================
+*/
+/*
+// ==============================================================================================
+// Borders
+// ==============================================================================================
+*/
+/*@formatter:off*/
+/*@formatter:on*/
+/*
+// ==============================================================================================
+// Transition
+// ==============================================================================================
+*/
+/*
+// ==============================================================================================
+// Positioning
+// ==============================================================================================
+*/
+/*
+// ==============================================================================================
+// Sizing
+// ==============================================================================================
+*/
+/*
+// ==============================================================================================
+// Spacing => Margin, Padding
+// ==============================================================================================
+*/
+/**
+ * Typography
+ *
+ * Font, line-height, and color for body text, headings, and more.
+*/
+/*@formatter:off*/
+/*@formatter:on*/
+/*
+// ==============================================================================================
+// Shadow
+//
+// https://torquemag.io/2022/03/css-box-shadow-tutorial/
+// https://css-tricks.com/almanac/properties/b/box-shadow/
+// box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
+//
+// Box-shadow with rgba variable https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable
+// --component-shadow-color: 0, 0, 0; // Has to be like this :p
+// ==============================================================================================
+*/
+/*@formatter:off*/
+/**
+ * Grid breakpoints
+ *
+ * Define the minimum dimensions at which your layout will change,
+ * adapting to different screen sizes, for use in media queries.
+*/
+/**
+ * Grid containers
+ *
+ * Define the maximum width of `.container` for different screen sizes.
+*/
+/**
+ * Grid columns
+ *
+ * Set the number of columns and specify the width of the gutters.
+*/
+/**
+ * Container padding
+ *
+*/
+/*@formatter:on*/
+/**
+ * Filter Colors
+ *
+*/
+/*#region Filter Colors */
+/*@formatter:off*/
+/*@formatter:on*/
+/*#endregion */
+/**
+ * Min-width
+ *
+ * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+ * Makes the @content apply to the given breakpoint and wider.
+*/
+/**
+ * Max-width
+ *
+ * Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+ * Makes the @content apply to the given breakpoint and narrower.
+*/
+/**
+ * Single breakpoint
+ *
+ * Media between the breakpoint 's minimum and maximum widths.
+ * No minimum for the smallest breakpoint, and no maximum for the largest one.
+ * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+*/
+/**
+ * Between breakpoints
+ *
+ * Media that spans multiple breakpoint widths.
+ * Makes the @content apply between the min and max breakpoints
+*/
+/**
+ * Border-radius
+ *
+ * Single side.
+*/
+/*
+ * https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d
+ * https://codepen.io/sdthornton/pen/wBZdXq
+*/
+/**
+ * ClearFix
+ *
+*/
+/**
+ * Row
+ *
+*/
+/**
+ * Row columns
+ *
+ * Specify on a parent element(e.g., .Row) to force immediate children into NN
+ * number of columns. Supports wrapping to new lines, but does not do a Masonry style grid.
+*/
+/**
+ * Framework grid generation
+ *
+ * Used only by Bootstrap to generate the correct number of grid classes given
+ * any value of `$Grid-columns`.
+*/
+/**
+ * Color-Contrast
+ * from 2024: https://github.com/voxpelli/sass-color-helpers/tree/main
+ * from: https://gist.github.com/voxpelli/6304812
+*/
+/**
+ * Color-Contrast
+ * https://www.w3.org/TR/WCAG20/
+ * https://www.jasongaylord.com/blog/2023/05/30/calculate-contrast-in-sass
+*/
+/** Theme Colors: light, dark, night
+ *
+ */
+/**
+ * Transition
+ *
+*/
+/*
+// ===========================================================================
+// Mixins - Utilities
+// ===========================================================================
+*/
+
+/*# sourceMappingURL=index.css.map */

package/dist/css/Abstracts/Mixins/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../scss/Abstracts/_variables.scss","../../../../scss/Abstracts/Mixins/_breakpoints.scss","../../../../scss/Abstracts/Mixins/_border-radius.scss","../../../../scss/Abstracts/Mixins/_box-shadow.scss","../../../../scss/Abstracts/Mixins/_clearfix.scss","../../../../scss/Abstracts/Mixins/_grid.scss","../../../../scss/Abstracts/Functions/Text-color/_best-color-contrast.scss","../../../../scss/Abstracts/Functions/Text-color/_wcag-safe-colors.scss","../../../../scss/Abstracts/Mixins/_theme.scss","../../../../scss/Abstracts/Mixins/_transition.scss","../../../../scss/Abstracts/Mixins/_utilities.scss"],"names":[],"mappings":"AAQA;AAgCA;AAAA;AAAA;AAAA;AAoCA;AA6DA;AAAA;AAAA;AAmBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AAaA;AAEA;AAAA;AAAA;AAAA;AAAA;AAUA;AAAA;AAAA;AAAA;AAAA;AAMA;AAqBA;AAEA;AAAA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AA6BA;AAAA;AAAA;AAAA;AAAA;AAMA;AAuDA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyDA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AAAA;AAAA;AAmBA;AAAA;AAAA;AAAA;AAAA;AAaA;AAAA;AAAA;AAAA;AAOA;AAKA;AAAA;AAAA;AAAA;AAKA;AAEA;AAuEA;AAEA;ACpdA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;ACnHA;AAAA;AAAA;AAAA;AAAA;ACTA;AAAA;AAAA;AAAA;ACvBA;AAAA;AAAA;AAAA;ACcA;AAAA;AAAA;AAAA;AAgEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcA;AAAA;AAAA;AAAA;AAAA;AAAA;ACtFA;AAAA;AAAA;AAAA;AAAA;ACHA;AAAA;AAAA;AAAA;AAAA;ACYA;AAAA;AAAA;ACfA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA","file":"index.css","sourcesContent":["// ===========================================================================\n// Color System\n// ===========================================================================\n@use \"sass:map\";\n\n@use \"config\" as *;\n@use \"Functions/color-customized\" as *;\n\n/*@formatter:off*/\n$White    : hsl(0, 0%, 100%) !default;\n$Black    : hsl(0,0%,0%) !default;\n\n$Silver   : hsl(0, 0%, 75%) !default;\n$Gray\t  :\thsl(213,8%,45%)  !default;\n\n$Red      : hsl(354,66%,54%) !default;\n$Lime     : hsl(120, 100%, 50%) !default;\n$Blue     : hsl(212,97%,43%) !default;\n$Yellow   : hsl(45,100%,51%) !default;\n$Cyan     : hsl(180,100%,50%) !default;\n$Magenta  : hsl(300,100%, 50%) !default;\n\n//$Purple   : hsl(261,51%,51%) !default;\n\n$Purple   : rgb(160,32,240) !default;\n$Violet   : rgb(143,0,255) !default;\n\n$Green    : hsl(134,61%,41%) !default;\n$Maroon   : hsl(331, 74%, 30%) !default;\n$Navy     : hsl(210, 100%, 12%) !default;\n$Teal     : hsl(162,73%,46%) !default;\n$Olive    : hsl(60,100%, 25%) !default;\n$Orange   : hsl(24,93%,50%) !default;\n\n//$Pink     : hsl(324,79%,60%) !default;\n$Pink     : rgb(255,192,203) !default;\n\n$Brown    : hsl(0, 33%, 38%) !default;\n$Indigo   : hsl(270, 100%, 25%) !default;\n\n/*\n// Theming\n// 2024.03\n*/\n\n$ls-2024-3-Primary    : hsl(250, 53%, 54%) !default; // #604cc8 based on #624ec9;\n$ls-2024-3-Secondary  : hsl(219, 10%, 68%) !default; // #a5abb6 based on #a4aab5;\n$ls-2024-3-Success    : hsl(138, 62%, 29%) !default; // #1c7838 based on #1c7837;\n$ls-2024-3-Danger     : hsl(356, 66%, 47%) !default; // #c72933 based on #c72933;\n$ls-2024-3-Warning    : hsl(42, 96%, 56%)  !default; // #fbba23 based on #fabb23;\n$ls-2024-3-Info       : hsl(197, 74%, 57%) !default; // #40b5e2 based on #42b6e3;\n$ls-2024-3-Light      : hsl(220, 27%, 98%) !default; // #f9f9fb based on #f8f9fb;\n$ls-2024-3-Dark       : hsl(214, 8%, 16%)  !default; // #26282c based on #26292d;\n$ls-2024-3-Night      : hsl(0, 0%, 7%)     !default; // #121212\n\n\n$ls-2022-2-Primary    : hsl(217, 96%, 52%) !default;  // #0F69FA  based $bs-Primary\n$ls-2022-2-Secondary  : hsl(208,7%,46%) !default;     // #6D767E  based $bs-Secondary\n$ls-2022-2-Success    : hsl(150, 67%, 35%) !default;  // #1D9559  based $bs-Success\n$ls-2022-2-Danger     : hsl(354,66%,54%) !default;    // #D73C4C  based mixed\n$ls-2022-2-Warning    : hsl(45, 100%, 45%) !default;  // #E6AC00  based mixed\n$ls-2022-2-Info       : hsl(195, 90%, 55%) !default;  // #25C0F4  based mixed $bs-Info / $mdb-Info\n$ls-2022-2-Light      : hsl(0, 0%, 98%) !default;     // #FAFAFA  based $mdb-Light    => Shade(white, 2%); // #fafafa\n$ls-2022-2-Dark       : hsl(240, 7%, 18%) !default;   // #2B2B31  based mixed         => mix(Tint(blue, 15%), Tint(black, 17%), 3%); // #2b2b31\n$ls-2022-2-Night      : hsl(0, 0%, 7%) !default;      // #121212                      => Tint(black, 7%); // #121212\n\n$Primary    : $ls-2024-3-Primary    !default;\n$Secondary  : $ls-2024-3-Secondary  !default;\n$Success    : $ls-2024-3-Success    !default;\n$Danger     : $ls-2024-3-Danger     !default;\n$Warning    : $ls-2024-3-Warning    !default;\n$Info       : $ls-2024-3-Info       !default;\n$Light      : $ls-2024-3-Light      !default;\n$Dark       : $ls-2024-3-Dark       !default;\n$Night      : $ls-2024-3-Night      !default;\n\n/*@formatter:on*/\n\n//$Prefix: ls-;\n\n// 'red', 'lime', 'blue', 'yellow', 'cyan', 'magenta', 'purple', 'green', 'maroon', 'navy', 'teal', 'olive', 'orange', 'pink', 'brown', 'indigo', 'white', 'silver', 'gray'\n$Base-colors: (\n        \"red\" : $Red,\n        \"lime\" : $Lime,\n        \"blue\" : $Blue,\n        \"yellow\" : $Yellow,\n        \"cyan\" : $Cyan,\n        \"magenta\" : $Magenta,\n        \"purple\" : $Purple,\n        \"green\" : $Green,\n        \"maroon\" : $Maroon,\n        \"navy\" : $Navy,\n        \"teal\" : $Teal,\n        \"olive\" : $Olive,\n        \"orange\" : $Orange,\n        \"pink\" : $Pink,\n        \"brown\" : $Brown,\n        \"indigo\" : $Indigo,\n        \"black\" : $Black,\n        \"white\" : $White,\n        \"silver\" : $Silver,\n        \"gray\" : $Gray,\n) !default;\n\n// Customize the light and dark text colors for use in our color contrast function.\n$Color-contrast-black: $Black !default;\n$Color-contrast-white: $White !default;\n\n// primary, secondary, success, info, warning, danger, light, dark, night\n$Theme-colors: (\n        \"primary\" : $Primary,\n        \"secondary\" : $Secondary,\n        \"success\" : $Success,\n        \"info\" : $Info,\n        \"warning\" : $Warning,\n        \"danger\" : $Danger, //\"error\" : $Danger,\n\n        \"light\" : $Light,\n        \"dark\" : $Dark,\n        \"night\" : $Night,\n) !default;\n\n$Theme-fg-colors: (\n        \"primary\" : $Color-contrast-white,\n        \"secondary\" : $Color-contrast-black,\n        \"success\" : $Color-contrast-white,\n        \"info\" : $Color-contrast-black,\n        \"warning\" : $Color-contrast-black,\n        \"danger\" : $Color-contrast-white,\n        \"light\" : $Color-contrast-black,\n        \"dark\" : $Color-contrast-white,\n        \"night\" : $Color-contrast-white,\n) !default;\n\n$Muted: hsla(213, 11%, 69%, 1); // #A7AFB9FF\n\n\n/*\n// Colors\n*/\n\n$Colors: map.merge($Base-colors, $Theme-colors);\n//$colors-all: map.merge($colors-all, (\"light\" : $Light, \"dark\" : $Dark, \"night\" : $Night));\n\n$Bg-colors-hsla: ();\n$Bg-colors-hsla: Color-hsla($Colors, --#{$Prefix}bg-alpha, --#{$Prefix}bg-lightness);\n$Bg-colors-hsla: map.merge($Bg-colors-hsla, (\"transparent\": transparent));\n\n$Text-colors-hsla: ();\n$Text-colors-hsla: Color-hsla($Colors, --#{$Prefix}text-alpha, null);\n$Text-colors-hsla: map.merge($Text-colors-hsla, (\"muted\": $Muted, \"reset\": inherit,));\n\n$Border-colors-hsla: ();\n$Border-colors-hsla: Color-hsla($Colors, --#{$Prefix}border-alpha, null);\n$Border-colors-hsla: map.merge($Border-colors-hsla, (\"transparent\": transparent));\n\n/*\n// ===========================================================================\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n// ===========================================================================\n*/\n\n/*@formatter:off*/\n$Enable-rounded                 : true !default;\n$Enable-shadows                 : false !default;\n$Enable-button-pointers         : true !default;\n\n$Enable-gradients               : false !default;\n$Enable-transitions             : true !default;  // _transition.scss mixin\n$Enable-reduced-motion          : true !default;  // _transition.scss mixin\n\n$Enable-grid-classes            : true !default;\n$Enable-container-classes       : true !default;\n\n$Enable-negative-margins        : true;\n/*@formatter:on*/\n\n/*\n// ===========================================================================\n// Utils\n// ===========================================================================\n*/\n\n$Color-alpha-map: (0: 0, 5: .05, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1) !default;\n$Color-lightness-map: (0:0%, 5: 5%, 10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%) !default;\n\n\n/*\n// ==============================================================================================\n// Borders\n// ==============================================================================================\n*/\n\n/*@formatter:off*/\n$Border-color-hsl: var(--#{$Prefix}border-hsl);\n$Border-color: hsla($Border-color-hsl, var(--#{$Prefix}border-alpha));\n$Border: 1px solid $Border-color;\n\n$Border-width   : 1px !default;\n$Border-widths  : (0: 0, 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px) !default;\n\n$Rounded        : .25rem !default;\n//$Border-radius  : var(--#{$Prefix}border-radius);\n$Border-radius  : $Rounded;\n\n$Rounded-sm     : .20rem !default;\n$Rounded-md     : .375rem !default;\n$Rounded-lg     : .75rem !default;\n$Rounded-xl     : 1.0rem !default;\n$Rounded-xxl    : 1.5rem !default;\n\n$Rounded-pill   : 50rem !default;\n$Rounded-circle : 50% !default;\n\n/*@formatter:on*/\n\n/*\n// ==============================================================================================\n// Transition\n// ==============================================================================================\n*/\n\n$Transition-base: all .2s ease-in-out !default;\n//$Transition-fade:             opacity .15s linear !default;\n//$Transition-collapse:         height .35s ease !default;\n//$Transition-collapse-width:   width .35s ease !default;\n\n/*\n// ==============================================================================================\n// Positioning\n// ==============================================================================================\n*/\n\n$Position-values: (\n        0: 0,\n        50: 50%,\n        100: 100%\n) !default;\n\n/*\n// ==============================================================================================\n// Sizing\n// ==============================================================================================\n*/\n\n$Sizes-percents: (\n        10:10%, 20:20%, 30:30%, 40:40%, 50:50%, 60:60%, 70:70%, 80:80%, 90:90%, 100:100%,\n        5:5%, 15:15%, 25:25%, 35:35%, 45:45%, 55:55%, 65:65%, 75:75%, 85:85%, 95:95%,\n        33:33.333%, 66:66.666%, auto:auto\n) !default;\n\n/*\n// ==============================================================================================\n// Spacing => Margin, Padding\n// ==============================================================================================\n*/\n\n$Spacer: 1rem !default;\n$Spacers: (\n        0: 0,\n        1: ($Spacer * 0.25),\n        2: ($Spacer * 0.5),\n        3: ($Spacer * 1.00),\n        4: ($Spacer * 1.50),\n        5: ($Spacer * 3.00),\n);\n\n$Spacers-negative: null !default;\n\n@if $Enable-negative-margins {\n  $Spacers-negative: (\n    n1: ($Spacer * -0.25),\n    n2: ($Spacer * -0.5),\n    n3: ($Spacer * -1.00),\n    n4: ($Spacer * -1.50),\n    n5: ($Spacer * -3.00),\n  );\n}\n\n\n/**\n * Typography\n *\n * Font, line-height, and color for body text, headings, and more.\n*/\n\n/*@formatter:off*/\n// Font family\n$Font-family-sans-serif: //\n        // Cross-platform generic font family (default user interface font)\n        system-ui,\n                // Safari for macOS and iOS (San Francisco)\n        -apple-system,\n                // Windows\n        \"Segoe UI\",\n                // Android\n        Roboto,\n                // Basic web fallback\n        \"Helvetica Neue\", Arial,\n                // Linux\n        \"Noto Sans\",\n        \"Liberation Sans\",\n                // Sans serif fallback\n        sans-serif,\n                // Emoji fonts\n        \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$Font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n$Font-family-base: var(--#{$Prefix}font-sans-serif) !default;\n$Font-family-code: var(--#{$Prefix}font-monospace) !default;\n\n// Font-weight\n$Font-weight-lighter    : lighter !default;\n$Font-weight-light      : 300 !default;\n$Font-weight-normal     : 400 !default;\n$Font-weight-bold       : 700 !default;\n$Font-weight-bolder     : bolder !default;\n\n$Line-height-base       : 1.5 !default;\n$Line-height-sm         : 1.25 !default;\n$Line-height-lg         : 2 !default;\n\n// Font-size\n$Font-size-base         : 1rem !default; // Assumes the browser default, typically `16px`\n$Font-size-sm           : $Font-size-base * .875 !default;\n$Font-size-lg           : $Font-size-base * 1.25 !default;\n\n$H1-font-size: $Font-size-base * 2.5 !default;\n$H2-font-size: $Font-size-base * 2 !default;\n$H3-font-size: $Font-size-base * 1.75 !default;\n$H4-font-size: $Font-size-base * 1.5 !default;\n$H5-font-size: $Font-size-base * 1.25 !default;\n$H6-font-size: $Font-size-base !default;\n\n$Font-sizes: (\n        1: $H1-font-size,\n        2: $H2-font-size,\n        3: $H3-font-size,\n        4: $H4-font-size,\n        5: $H5-font-size,\n        6: $H6-font-size\n) !default;\n/*@formatter:on*/\n\n\n/*\n// ==============================================================================================\n// Shadow\n//\n// https://torquemag.io/2022/03/css-box-shadow-tutorial/\n// https://css-tricks.com/almanac/properties/b/box-shadow/\n// box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];\n//\n// Box-shadow with rgba variable https://stackoverflow.com/questions/59250927/box-shadow-with-rgba-variable\n// --component-shadow-color: 0, 0, 0; // Has to be like this :p\n// ==============================================================================================\n*/\n\n$Shadow-color: var(--#{$Prefix}shadow-hsl);\n\n$Shadow-1-inset: inset 0 1px 3px hsla($Shadow-color, 0.12), inset 0 1px 2px hsla($Shadow-color, 0.24);\n$Shadow-1: 0 1px 3px hsla($Shadow-color, 0.12), 0 1px 2px hsla($Shadow-color, 0.24);\n$Shadow-2: 0 3px 6px hsla($Shadow-color, 0.15), 0 3px 6px hsla($Shadow-color, 0.24);\n$Shadow-3: 0 9px 21px hsla($Shadow-color, 0.18), 0 6px 6px hsla($Shadow-color, 0.24);\n$Shadow-4: 0 12px 27px hsla($Shadow-color, 0.24), 0 9px 9px hsla($Shadow-color, 0.21);\n$Shadow-5: 0 18px 36px hsla($Shadow-color, 0.32), 0 15px 12px hsla($Shadow-color, 0.21);\n\n$Shadow: $Shadow-1;\n$Shadow-hover: $Shadow-3;\n$Shadow-inset: $Shadow-1-inset;\n\n$Shadow-map: (\n        inner: $Shadow-inset,\n        null: $Shadow,\n        0: none,\n        1: $Shadow-1,\n        2 : $Shadow-2,\n        3 : $Shadow-3,\n        4 : $Shadow-4,\n        5 : $Shadow-5,\n);\n\n$Drop-shadow-0: drop-shadow(0 0 #0000);\n$Drop-shadow-1: drop-shadow(0 1px 3px hsla($Shadow-color, 0.24)) drop-shadow(0 1px 2px hsla($Shadow-color, 0.48));\n$Drop-shadow-2: drop-shadow(0 3px 6px hsla($Shadow-color, 0.30)) drop-shadow(0 3px 6px hsla($Shadow-color, 0.48));\n$Drop-shadow-3: drop-shadow(0 9px 21px hsla($Shadow-color, 0.32)) drop-shadow(0 6px 6px hsla($Shadow-color, 0.48));\n$Drop-shadow-4: drop-shadow(0 12px 27px hsla($Shadow-color, 0.48)) drop-shadow(0 9px 9px hsla($Shadow-color, 0.42));\n$Drop-shadow-5: drop-shadow(0 18px 36px hsla($Shadow-color, 0.64)) drop-shadow(0 15px 12px hsla($Shadow-color, 0.42));\n\n$Drop-shadow: $Drop-shadow-1;\n$Drop-shadow-map: (\n        null: $Drop-shadow,\n        0: $Drop-shadow-0,\n        1: $Drop-shadow-1,\n        2: $Drop-shadow-2,\n        3: $Drop-shadow-3,\n        4: $Drop-shadow-4,\n        5: $Drop-shadow-5,\n);\n\n//region Grid System\n\n/*@formatter:off*/\n\n/**\n * Grid breakpoints\n *\n * Define the minimum dimensions at which your layout will change,\n * adapting to different screen sizes, for use in media queries.\n*/\n\n$Grid-breakpoints: (\n        //xs: 0,\n        //sm : 480px,\n        //md : 768px,\n        //lg : 1024px,\n        //xl : 1280px,\n        //xxl : 1440px,\n        xs: 0,\n        sm: 576px,\n        md: 768px,\n        lg: 992px,\n        xl: 1200px,\n        xxl: 1400px\n);\n\n/**\n * Grid containers\n *\n * Define the maximum width of `.container` for different screen sizes.\n*/\n\n$Container-max-widths: (\n        //sm : 480px,\n        //md : 768px,\n        //lg : 976px,\n        //xl : 1232px,\n        //xxl : 1376px,\n        xs: 540px,\n        md: 720px,\n        lg: 960px,\n        xl: 1140px,\n        xxl: 1320px\n);\n\n/**\n * Grid columns\n *\n * Set the number of columns and specify the width of the gutters.\n*/\n\n$Grid-columns           : 12 !default;\n$Grid-row-columns       : 6 !default;\n\n$Grid-gutter-width      : 1.5rem;\n$Gutters                : $Spacers !default;\n$include-column-box-sizing                : false;\n\n/**\n * Container padding\n *\n*/\n\n$Container-padding-x: $Grid-gutter-width !default;\n\n/*@formatter:on*/\n\n//endregion\n\n\n/**\n * Filter Colors\n *\n*/\n\n/*#region Filter Colors */\n\n/*@formatter:off*/\n\n$F-Blur     : blur(var(--#{$Prefix}filter-blur, 0));\n$F-Shadow   : #{var(--#{$Prefix}drop-shadow, drop-shadow(0 0 #0000))};\n\n$F-White    : $F-Blur $F-Shadow invert(1) grayscale(100%) brightness(200%) !default;\n$F-Silver   : $F-Blur $F-Shadow invert(89%) sepia(0%) saturate(7%) hue-rotate(172deg) brightness(91%) contrast(82%) !default; // BFBFBF\n$F-Gray\t    : $F-Blur $F-Shadow invert(46%) sepia(2%) saturate(2321%) hue-rotate(174deg) brightness(94%) contrast(86%) !default; // 6A727C\n\n$F-Red      : $F-Blur $F-Shadow invert(31%) sepia(83%) saturate(1382%) hue-rotate(325deg) brightness(87%) contrast(93%) !default; // D73C4C\n$F-Lime     : $F-Blur $F-Shadow invert(70%) sepia(52%) saturate(6787%) hue-rotate(83deg) brightness(127%) contrast(120%) !default; // 00FF00\n$F-Blue     : $F-Blur $F-Shadow invert(23%) sepia(98%) saturate(1650%) hue-rotate(198deg) brightness(104%) contrast(105%) !default; // 0367D8;\n$F-Yellow   : $F-Blur $F-Shadow invert(68%) sepia(88%) saturate(529%) hue-rotate(354deg) brightness(101%) contrast(103%) !default; // FFC105\n$F-Cyan     : $F-Blur $F-Shadow invert(74%) sepia(89%) saturate(1247%) hue-rotate(131deg) brightness(106%) contrast(109%) !default; // 00FFFF\n$F-Magenta  : $F-Blur $F-Shadow invert(17%) sepia(100%) saturate(3641%) hue-rotate(296deg) brightness(117%) contrast(124%) !default; // FF00FF\n\n$F-Purple   : $F-Blur $F-Shadow invert(28%) sepia(68%) saturate(1773%) hue-rotate(242deg) brightness(88%) contrast(88%) !default; // 6F42C2\n$F-Green    : $F-Blur $F-Shadow invert(52%) sepia(15%) saturate(2202%) hue-rotate(82deg) brightness(99%) contrast(86%) !default; // 29A847\n$F-Maroon   : $F-Blur $F-Shadow invert(10%) sepia(85%) saturate(3597%) hue-rotate(317deg) brightness(96%) contrast(92%) !default; // 85144B\n$F-Navy     : $F-Blur $F-Shadow invert(10%) sepia(15%) saturate(7084%) hue-rotate(187deg) brightness(100%) contrast(104%) !default; // 001F3D\n$F-Teal     : $F-Blur $F-Shadow invert(72%) sepia(9%) saturate(3292%) hue-rotate(110deg) brightness(91%) contrast(85%) !default; // 20CB98\n$F-Olive    : $F-Blur $F-Shadow invert(37%) sepia(91%) saturate(1164%) hue-rotate(40deg) brightness(94%) contrast(100%) !default; // 808000\n$F-Orange   : $F-Blur $F-Shadow invert(42%) sepia(21%) saturate(5566%) hue-rotate(2deg) brightness(104%) contrast(93%) !default; // F66809\n$F-Pink     : $F-Blur $F-Shadow invert(40%) sepia(65%) saturate(3659%) hue-rotate(302deg) brightness(103%) contrast(83%) !default; // EA48A9\n$F-Brown    : $F-Blur $F-Shadow invert(20%) sepia(12%) saturate(6107%) hue-rotate(327deg) brightness(103%) contrast(71%) !default; // 814141\n$F-Indigo   : $F-Blur $F-Shadow invert(4%) sepia(86%) saturate(7495%) hue-rotate(259deg) brightness(101%) contrast(101%) !default; // 400080\n\n$F-Success  : $F-Green !default;\n$F-Info     : $F-Blue !default;\n$F-Warning  : $F-Yellow !default;\n$F-Danger   : $F-Red !default;\n\n$F-Primary  : $F-Blur $F-Shadow invert(24%) sepia(68%) saturate(6878%) hue-rotate(257deg) brightness(66%) contrast(115%) !default; // 4712AF\n$F-Secondary: $F-Blur $F-Shadow invert(49%) sepia(8%) saturate(443%) hue-rotate(166deg) brightness(91%) contrast(91%) !default; // 6D767E\n$F-Light    : $F-Blur $F-Shadow invert(100%) sepia(14%) saturate(445%) hue-rotate(176deg) brightness(100%) contrast(97%) !default; // F9FAFB\n$F-Dark     : $F-Blur $F-Shadow invert(21%) sepia(10%) saturate(581%) hue-rotate(169deg) brightness(96%) contrast(92%) !default; // 353B41\n\n$Filter-colors: (\n        \"red\"     : $F-Red,\n        \"lime\"    : $F-Lime,\n        \"blue\"    : $F-Blue,\n        \"yellow\"  : $F-Yellow,\n        \"cyan\"    : $F-Cyan,\n        \"magenta\" : $F-Magenta,\n        \"purple\"  : $F-Purple,\n        \"green\"   : $F-Green,\n        \"maroon\"  : $F-Maroon,\n        \"navy\"    : $F-Navy,\n        \"teal\"    : $F-Teal,\n        \"olive\"   : $F-Olive,\n        \"orange\"  : $F-Orange,\n        \"pink\"    : $F-Pink,\n        \"brown\"   : $F-Brown,\n        \"indigo\"  : $F-Indigo,\n        \"white\"   : $F-White,\n        \"silver\"  : $F-Silver,\n        \"gray\"    : $F-Gray,\n        // Colors - Theme\n        \"primary\"   : $F-Primary,\n        \"secondary\" : $F-Secondary,\n        \"success\"   : $F-Success,\n        \"info\"      : $F-Info,\n        \"warning\"   : $F-Warning,\n        \"danger\"    : $F-Danger,\n        \"light\"     : $F-Light,\n        \"dark\"      : $F-Dark,\n        // NONE\n        \"black\"     : $F-Dark,\n        \"none\"      : $F-Dark,\n);\n\n/*@formatter:on*/\n\n/*#endregion */","// ==================================================================================================================== //\n// Mixins - Breakpoints\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)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n// ==================================================================================================================== //\n@use \"sass:list\";\n@use \"sass:map\";\n\n@use \"../../Abstracts/variables\" as *;\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))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $Grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {\n  $n: list.index($breakpoint-names, $name);\n  @if not $n {\n    @error \"breakpoint `#{$name}` not found in `#{$breakpoints}`\";\n  }\n\n  @if $n < list.length($breakpoint-names) {\n    @return list.nth($breakpoint-names, $n + 1);\n  } @else {\n    @return null;\n  }\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))\n//    576px\n@function breakpoint-min($name, $breakpoints: $Grid-breakpoints) {\n  $min: map.get($breakpoints, $name);\n\n  @if ($min != 0) {\n    @return $min;\n  } @else {\n    @return null;\n  }\n}\n\n// Maximum breakpoint width.\n// The maximum value is reduced by 0.02px to work around the limitations of\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $Grid-breakpoints) {\n  $max: map.get($breakpoints, $name);\n\n  @if $max and $max > 0 {\n    @return $max - .02;\n  } @else {\n    @return null;\n  }\n}\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  @if breakpoint-min($name, $breakpoints) == null {\n    @return \"\";\n  } @else {\n    @return \"-#{$name}\";\n  }\n}\n\n// ==================================================================================================================== //\n\n/**\n * Min-width\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*/\n\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/**\n * Max-width\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*/\n\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/**\n * Single breakpoint\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 viewports any wider or narrower.\n*/\n\n@mixin media-breakpoint-only($name, $breakpoints: $Grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  $next: breakpoint-next($name, $breakpoints);\n  $max: breakpoint-max($next, $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($name, $breakpoints) {\n      @content;\n    }\n  } @else if $min == null {\n    @include media-breakpoint-down($next, $breakpoints) {\n      @content;\n    }\n  }\n}\n\n/**\n * Between breakpoints\n *\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n*/\n\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","@use 'sass:list';\n@use 'sass:math';\n@use 'sass:meta';\n\n@use \"../../Abstracts/variables\" as *;\n\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 meta.type-of($value) == number {\n      $return: list.append($return, math.max($value, 0));\n    } @else {\n      $return: list.append($return, $value);\n    }\n  }\n  @return $return;\n}\n\n//@mixin border-radius($radius: $Border-radius, $fallback-border-radius: false) {\n@mixin Rounded($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\n/**\n * Border-radius\n *\n * Single side.\n*/\n\n@mixin Rounded-top($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 Rounded-end($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 Rounded-bottom($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 Rounded-start($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 Rounded-top-start($radius: $Border-radius) {\n  @if $Enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin Rounded-top-end($radius: $Border-radius) {\n  @if $Enable-rounded {\n    border-top-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin Rounded-bottom-end($radius: $Border-radius) {\n  @if $Enable-rounded {\n    border-bottom-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin Rounded-bottom-start($radius: $Border-radius) {\n  @if $Enable-rounded {\n    border-bottom-left-radius: valid-radius($radius);\n  }\n}\n","@use \"sass:list\";\n\n@use \"../../Abstracts/variables\" as *;\n\n@mixin Box-shadow($shadow...) {\n  @if $Enable-shadows {\n    $result: ();\n\n    @each $value in $shadow {\n      @if $value != null {\n        $result: list.append($result, $value, \"comma\");\n      }\n      @if $value == none and list.length($shadow) > 1 {\n        @warn \"The keyword 'none' must be used as a single argument.\";\n      }\n    }\n\n    @if (list.length($result) > 0) {\n      box-shadow: $result;\n    }\n  }\n}\n\n/*\n * https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d\n * https://codepen.io/sdthornton/pen/wBZdXq\n*/\n\n//@mixin BoxShadow($level: 1) {\n//  @if ($level = 1) {\n//    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n//  } @else if ($level = 2) {\n//    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n//  } @else if ($level = 3) {\n//    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n//  } @else if ($level = 4) {\n//    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\n//  } @else if ($level = 5) {\n//    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);\n//  }\n//}","/**\n * ClearFix\n *\n*/\n\n@mixin Clearfix() {\n  &::after {\n    display: block;\n    clear: both;\n    content: \"\";\n  }\n}","// ===========================================================================\n// Mixins - Grid system\n//\n// Generate semantic grid columns with these mixins.\n// ===========================================================================\n@use 'sass:math';\n@use 'sass:map';\n@use 'sass:meta';\n\n@use \"../../Abstracts/config\" as *;\n@use \"../../Abstracts/variables\" as *;\n\n@use \"breakpoints\" as *;\n\n/**\n * Row\n *\n*/\n\n@mixin Make-row($gutter: $Grid-gutter-width) {\n  --#{$Prefix}gutter-x: #{$gutter};\n  --#{$Prefix}gutter-y: 0;\n  display: flex;\n  flex-wrap: wrap;\n  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed\n  margin-top: calc(-1 * var(--#{$Prefix}gutter-y)); // stylelint-disable-line function-disallowed-list\n  margin-right: calc(-.5 * var(--#{$Prefix}gutter-x)); // stylelint-disable-line function-disallowed-list\n  margin-left: calc(-.5 * var(--#{$Prefix}gutter-x)); // stylelint-disable-line function-disallowed-list\n}\n\n@mixin Make-col-ready() {\n  // Add box sizing if only the grid is loaded\n  //box-sizing: if(meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);\n  //box-sizing: if(sass(meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing): border-box; else: null);\n  @if meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing {\n    box-sizing: border-box;\n  }\n\n  // Prevent columns from becoming too narrow when at smaller grid tiers by\n  // always setting `width: 100%;`. This works because we set the width\n  // later on to override this initial width.\n  flex-shrink: 0;\n  width: 100%;\n  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid\n  padding-right: calc(var(--#{$Prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list\n  padding-left: calc(var(--#{$Prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list\n  margin-top: var(--#{$Prefix}gutter-y);\n}\n\n// Row columns\n\n@mixin Make-col($size: false, $columns: $Grid-columns) {\n  @if $size {\n    flex: 0 0 auto;\n    width: math.percentage(math.div($size, $columns));\n\n  } @else {\n    flex: 1 1 0;\n    max-width: 100%;\n  }\n}\n\n@mixin Make-col-auto() {\n  flex: 0 0 auto;\n  width: auto;\n}\n\n@mixin Make-col-offset($size, $columns: $Grid-columns) {\n  $num: math.div($size, $columns);\n  //margin-left: if($num == 0, 0, math.percentage($num));\n  //margin-left: if(sass($num == 0): 0; else: math.percentage($num));\n  @if $num == 0 {\n    margin-left: 0;\n  } @else {\n    margin-left: math.percentage($num);\n  }\n}\n\n/**\n * Row columns\n *\n * Specify on a parent element(e.g., .Row) to force immediate children into NN\n * number of columns. Supports wrapping to new lines, but does not do a Masonry style grid.\n*/\n\n@mixin Row-cols($count) {\n  > * {\n    flex: 0 0 auto;\n    width: math.div(100%, $count);\n  }\n}\n\n/**\n * Framework grid generation\n *\n * Used only by Bootstrap to generate the correct number of grid classes given\n * any value of `$Grid-columns`.\n*/\n@mixin Make-grid-columns($columns: $Grid-columns, $gutter: $Grid-gutter-width, $breakpoints: $Grid-breakpoints) {\n  @each $breakpoint in map.keys($breakpoints) {\n    $infix: breakpoint-infix($breakpoint, $breakpoints);\n\n    @include media-breakpoint-up($breakpoint, $breakpoints) {\n      // Provide basic `.col-{bp}` classes for equal-width flexbox columns\n      .Col#{$infix} {\n        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4\n      }\n\n      .Row-cols#{$infix}-auto > * {\n        @include Make-col-auto();\n      }\n\n      @if $Grid-row-columns > 0 {\n        @for $i from 1 through $Grid-row-columns {\n          .Row-cols#{$infix}-#{$i} {\n            @include Row-cols($i);\n          }\n        }\n      }\n\n      .Col#{$infix}-auto {\n        @include Make-col-auto();\n      }\n\n      @if $columns > 0 {\n        @for $i from 1 through $columns {\n          .Col#{$infix}-#{$i} {\n            @include Make-col($i, $columns);\n          }\n        }\n\n        // `$columns - 1` because offsetting by the width of an entire row isn't possible\n        @for $i from 0 through ($columns - 1) {\n          @if not ($infix == \"\" and $i == 0) { // Avoid emitting useless .offset-0\n            .Offset#{$infix}-#{$i} {\n              @include Make-col-offset($i, $columns);\n            }\n          }\n        }\n      }\n\n      // Gutters\n      //\n      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.\n\n      @each $key, $value in $Gutters {\n        .G#{$infix}-#{$key},\n        .GX#{$infix}-#{$key} {\n          --#{$Prefix}gutter-x: #{$value};\n        }\n\n        .G#{$infix}-#{$key},\n        .GY#{$infix}-#{$key} {\n          --#{$Prefix}gutter-y: #{$value};\n        }\n      }\n    }\n  }\n}\n","@use 'sass:color';\n@use 'sass:list';\n@use 'sass:math';\n\n@use \"../../../Abstracts/variables\" as *;\n\n/**\n * Color-Contrast\n * from 2024: https://github.com/voxpelli/sass-color-helpers/tree/main\n * from: https://gist.github.com/voxpelli/6304812\n*/\n\n/// Color Relative Luminance Calculator\n/// Relative luminance follows the photometric definition of luminance, but with the values normalized to 1 or 100 for a reference white.\n///\n/// Usage  => Luminance($Dark)\n/// Tested => https://contrastchecker.online/color-relative-luminance-calculator\n/// Adapted\n@function Luminance($color) {\n  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n  //$rgba: red($color), green($color), blue($color);\n  $rgba: color.channel($color, \"red\", $space: rgb), color.channel($color, \"green\", $space: rgb), color.channel($color, \"blue\", $space: rgb);\n  $rgba2: ();\n\n  @for $i from 1 through 3 {\n    $rgb: list.nth($rgba, $i);\n    $rgb: math.div($rgb, 255);\n\n    //$rgb: if($rgb < .03928, $rgb / 12.92, ch-pow(($rgb + .055) / 1.055, 2.4, 16));\n    //$rgb: if($rgb < .03928, math.div($rgb, 12.92), math.pow(math.div($rgb + 0.055, 1.055), 2.4));\n    //$rgb: if(sass($rgb < 0.03928): math.div($rgb, 12.92); else: math.pow(math.div($rgb + 0.055, 1.055), 2.4));\n    $rgb-linear: math.pow(math.div($rgb + 0.055, 1.055), 2.4);\n    @if $rgb < 0.03928 {\n      $rgb-linear: math.div($rgb, 12.92);\n    }\n    $rgb: $rgb-linear;\n\n    $rgba2: list.append($rgba2, $rgb);\n  }\n\n  @return .2126 * list.nth($rgba2, 1) + .7152 * list.nth($rgba2, 2) + 0.0722 * list.nth($rgba2, 3);\n}\n\n/// Calculate contrast ratio of foreground and background colors and check for Web Content Accessibility Guidelines (WCAG) https://www.w3.org/WAI/standards-guidelines/wcag/.\n///\n// Usage  => Contrast-ratio($Dark, $Light)\n/// Tested => https://contrastchecker.online/\n/// Tested => https://coolors.co/contrast-checker/2b2b31-fafafa\n@function Contrast-ratio($color1, $color2) {\n  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n  $luminance1: Luminance($color1) + .05;\n  $luminance2: Luminance($color2) + .05;\n  $ratio: math.div($luminance1, $luminance2);\n\n  @if $luminance2 > $luminance1 {\n    $ratio: math.div(1, $ratio);\n  }\n\n  $ratio: math.div(round($ratio * 10), 10);\n\n  @return $ratio;\n}\n\n\n/// Get best Text Color From array, based on bg color\n/// Usage  => Color-contrast($Dark)\n@function Color-contrast-best($base, $contrast-colors: ($Color-contrast-white,$Color-contrast-black), $tolerance: 0) {\n  $best: list.nth($contrast-colors, 1);\n  $contrast: Contrast-ratio($base, $best);\n\n  @for $i from 2 through list.length($contrast-colors) {\n    $currentColor: list.nth($contrast-colors, $i);\n    $currentContrast: Contrast-ratio($base, $currentColor);\n    @if ($currentContrast - $contrast > $tolerance) {\n      $best: $currentColor;\n      $contrast: $currentContrast;\n    }\n  }\n\n  @if ($contrast < 3) {\n    @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n  }\n\n  @return $best;\n}\n","@use \"sass:list\";\n@use \"sass:math\";\n\n/**\n * Color-Contrast\n * https://www.w3.org/TR/WCAG20/\n * https://www.jasongaylord.com/blog/2023/05/30/calculate-contrast-in-sass\n*/\n@use \"sass:map\";\n\n@function sRGBToLinear($colorValue) {\n  $colorValue: calc($colorValue / 255);\n  @if $colorValue <= 0.04045 {\n    @return calc($colorValue / 12.92);\n  } @else {\n    @return math.pow(($colorValue + 0.055), 2.4);\n  }\n}\n\n@function calculate-contrast($value1, $value2) {\n  $luminance1: (0.2126 * sRGBToLinear(red($value1))) + (0.7152 * sRGBToLinear(green($value1))) + (0.0722 * sRGBToLinear(blue($value1)));\n  $luminance2: (0.2126 * sRGBToLinear(red($value2))) + (0.7152 * sRGBToLinear(green($value2))) + (0.0722 * sRGBToLinear(blue($value2)));\n\n  @return calc((max($luminance1, $luminance2) + 0.05) / (min($luminance1, $luminance2) + 0.05));\n}\n\n@function find-safe-color($color, $ratio: 4.5) {\n  $lightness: lightness($color);\n  $value: $color;\n  $contrast: 0.0;\n  $i: 0;\n\n  @if $lightness < 50 {\n    $value: lighten($value, 5%);\n    $contrast: calculate-contrast($color, $value);\n    $i: $i + 1;\n\n    @while $contrast < $ratio and $i < 20 {\n      $value: lighten($value, 5%);\n      $contrast: calculate-contrast($color, $value);\n      $i: $i + 1;\n    }\n  } @else {\n    $value: darken($value, 5%);\n    $contrast: calculate-contrast($color, $value);\n    $i: $i + 1;\n\n    @while $contrast < $ratio and $i < 20 {\n      $value: darken($value, 5%);\n      $contrast: calculate-contrast($color, $value);\n      $i: $i + 1;\n    }\n  }\n\n  //@if $i >= 20 {\n  //  @debug \"Color not safe\";\n  //}\n\n  @return ($value, $contrast);\n}\n\n@function wcag-safe-colors($base-color) {\n  $colors: ();\n\n  $wcag30: find-safe-color($base-color, 3.0);\n  $wcag45: find-safe-color($base-color);\n  $wcag70: find-safe-color($base-color, 7.0);\n\n  $colors: map.merge($colors, (\n          'base-color': $base-color,\n\n          'wcag20-aa-normal-color': list.nth($wcag45, 1),\n          'wcag20-aa-normal-ratio': list.nth($wcag45, 2),\n\n          'wcag20-aa-large-color': list.nth($wcag30, 1),\n          'wcag20-aa-large-ratio': list.nth($wcag30, 2),\n\n          'wcag21-aa-input-color': list.nth($wcag30, 1),\n          'wcag21-aa-input-ratio': list.nth($wcag30, 2),\n\n          'wcag21-aaa-normal-color': list.nth($wcag70, 1),\n          'wcag21-aaa-normal-ratio': list.nth($wcag70, 2),\n\n          'wcag21-aaa-large-color': list.nth($wcag45, 1),\n          'wcag21-aaa-large-ratio': list.nth($wcag45, 2)\n  ));\n\n  @return $colors;\n}\n\n","// ===========================================================================\n// Mixins - Theme Colors\n// Theme Variants & Colored Components\n// CSS Variables (Custom Properties)\n// ===========================================================================\n@use \"sass:color\";\n@use \"sass:list\";\n\n@use \"../../Abstracts/config\" as *;\n@use \"../../Abstracts/variables\" as *;\n\n@use \"../Functions/color-customized\" as *;\n@use \"../Functions/color\" as *;\n@use \"../Functions/Text-color/text-color\" as *;\n\n/** Theme Colors: light, dark, night\n *\n */\n@mixin SetThemes($Theme-colors) {\n  @each $colorKey, $colorValue in $Theme-colors {\n    $Lightness: color.channel($colorValue, \"lightness\", $space: hsl);\n\n    $colorScheme: normal;\n\n    //$C-contrast: if($colorKey=='light', hsl(0, 0%, 0%), hsl(0, 0%, 100%));\n    //$C-contrast: if(sass($colorKey == 'light'): hsl(0, 0%, 0%); else: hsl(0, 0%, 100%)); // TODO: when ide supports\n    $C-contrast: hsl(0, 0%, 100%);\n    @if $colorKey == 'light' {\n      $C-contrast: hsl(0, 0%, 0%);\n    }\n\n    $C-hue: $colorValue;\n    $C-accent: $colorValue;\n\n    $C-body: Color-ByLightness($colorValue, 90%); // 90% - DON'T CHANGE\n    $C-surface: Color-ByLightness($colorValue, 96%); // 96% - DON'T CHANGE\n    $C-secondary: Color-ByLightness($colorValue, 92%);\n    $C-foremost: Color-ByLightness($colorValue, 88%);\n\n    $C-header: Color-ByLightness($colorValue, 85%);\n    $C-subHeader: Color-ByLightness($colorValue, 80%);\n\n    $Muted: hsla(213, 11%, 69%, 1); // #A7AFB9FF\n\n    $C-muted: $Muted;\n    $C-link: $Primary;\n\n    $C-border: Color-ByLightness($colorValue, 85%); // 80\n    $C-shadow: color.adjust($colorValue, $lightness: -50%);\n    $C-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0));\n\n    @if ($colorKey=='light') {\n      $colorScheme: light;\n      $C-accent: $Primary;\n\n      $C-shadow: hsl(240, 7%, 18%); // Dark\n      //$C-body: Color-ByLightness($colorValue, ($Lightness - 5)); // #ededed\n      //$C-body: #ededed;\n      //$C-body: #f8f9fe; // tailwind\n      $C-body: #f9fafb; // primeng\n      $C-border: Color-ByLightness($colorValue, ($Lightness - 10));\n\n      $C-surface: $White;\n      $C-secondary: Color-ByLightness($colorValue, 99%);\n      $C-foremost: Color-ByLightness($colorValue, 97%);\n\n      $C-header: Color-ByLightness($colorValue, 95%);\n      $C-subHeader: Color-ByLightness($colorValue, 93%);\n    }\n    @if (list.index((dark, night), $colorKey)) {\n      //$colorScheme: if($colorKey=='dark', dark, $colorScheme);\n      $colorScheme: $colorScheme;\n      @if $colorKey == 'dark' {\n        $colorScheme: dark;\n      }\n\n      $C-accent: Tint-color($Primary, 50%) ;\n      $C-link: Tint-color($Primary, 50%) ;\n\n      // hsl(0, 0%, 7%) Night for Dark\n      // hsl(0, 0%, 0%) Black for Night\n      //$C-shadow: if($colorKey=='dark', hsl(0, 0%, 7%), hsl(0, 0%, 0%));\n      //$C-shadow: if(sass($colorKey == 'dark'): hsl(0, 0%, 7%); else: hsl(0, 0%, 0%));\n      $C-shadow: hsl(0, 0%, 0%);\n      @if $colorKey == 'dark' {\n        $C-shadow: hsl(0, 0%, 7%);\n      }\n\n      $C-body: Color-ByLightness($colorValue, ($Lightness - 6));\n      $C-border: Color-ByLightness($colorValue, ($Lightness + 10));\n\n      $C-surface: $colorValue;\n      $C-secondary: Color-ByLightness($colorValue, ($Lightness - 2));\n      $C-foremost: Color-ByLightness($colorValue, ($Lightness - 4));\n\n      $C-header: Color-ByLightness($colorValue, ($Lightness + 8));\n      $C-subHeader: Color-ByLightness($colorValue, ($Lightness + 12));\n    }\n\n    //$Root: if($colorKey=='light', \",:root\", \"\");\n    $Root: \"\";\n    @if $colorKey == 'light' {\n      $Root: \",:root\";\n    }\n\n    @if (list.index((light, dark, night), $colorKey)) {\n      .Theme-#{$colorKey + $Root} {\n        .Btn-close {\n         @if (color.channel($colorValue, \"lightness\", $space: hsl) < 80) {\n           filter: invert(1) grayscale(100%) brightness(200%);\n         }\n        }\n      }\n\n      .Theme-#{$colorKey + $Root} {\n        //--#{$Prefix}scheme: #{$colorKey};\n\n        --#{$Prefix}contrast-hsl: #{colorToHSL($C-contrast)};\n\n        --#{$Prefix}bg-hue-hsl: #{colorToHSL($C-hue)};\n        --#{$Prefix}bg-hue: #{$C-hue};\n        --#{$Prefix}fg-hue: #{Color-contrast($C-hue)};\n\n        --#{$Prefix}bg-accent-hsl: #{colorToHSL($C-accent)};\n        --#{$Prefix}bg-accent: #{$C-accent};\n        --#{$Prefix}fg-accent: #{Color-contrast($C-accent)};\n\n        //--#{$Prefix}fg-body: #{Color-contrast($C-body)};\n        --#{$Prefix}fg-default: #{Color-contrast($C-surface)};\n        --#{$Prefix}fg-muted: #{$C-muted};\n        --#{$Prefix}fg-link: #{$C-link};\n\n        --#{$Prefix}bg-body: #{$C-body};\n        --#{$Prefix}bg-surface: #{$C-surface};\n        --#{$Prefix}bg-secondary: #{$C-secondary};\n        --#{$Prefix}bg-foremost: #{$C-foremost};\n\n        //--#{$Prefix}bg-header-hsl: #{colorToHSL($C-header)};\n        --#{$Prefix}bg-header: #{$C-header};\n        --#{$Prefix}bg-sub-header: #{$C-subHeader};\n\n        --#{$Prefix}border-hsl: #{colorToHSL($C-border)};\n        --#{$Prefix}shadow-hsl: #{colorToHSL($C-shadow)};\n\n        --#{$Prefix}gradient: #{$C-gradient};\n\n        color-scheme: $colorScheme;\n      }\n    }\n  }\n}\n\n@mixin SetAccents($Theme-colors) {\n  // Colors: light, dark, night\n  // Colors: primary, secondary, success, info, warning, danger\n  @each $colorKey, $colorValue in $Theme-colors {\n    $C-accent: $colorValue;\n\n    .Accent-#{$colorKey} {\n      --#{$Prefix}bg-accent-hsl: #{colorToHSL($C-accent)};\n      --#{$Prefix}bg-accent: #{$C-accent};\n      --#{$Prefix}fg-accent: #{Color-contrast($C-accent)};\n    }\n\n  }\n}\n\n@mixin SetOverlays() {\n  @each $key in (0, 5, 7, 8, 9, 11, 12, 14, 15, 16) {\n    .Overlay-#{$key} {\n      background-color: hsla(var(--#{$Prefix}contrast-hsl), $key * 1%);\n    }\n  }\n}\n","/**\n * Transition\n *\n*/\n@use \"sass:list\";\n\n@use \"../../Abstracts/variables\" as *;\n\n@mixin Transition($transition...) {\n  @if list.length($transition) == 0 {\n    $transition: $Transition-base;\n  }\n\n  @if list.length($transition) > 1 {\n    @each $value in $transition {\n      @if $value == null or $value == none {\n        @warn \"The keyword 'none' or 'null' must be used as a single argument.\";\n      }\n    }\n  }\n\n  @if $Enable-transitions {\n    @if list.nth($transition, 1) != null {\n      transition: $transition;\n    }\n\n    @if $Enable-reduced-motion and list.nth($transition, 1) != null and list.nth($transition, 1) != none {\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n  }\n}","/*\n// ===========================================================================\n// Mixins - Utilities\n// ===========================================================================\n*/\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@use \"../../Abstracts/config\" as *;\n@use \"../../Abstracts/variables\" as *;\n\n@use \"breakpoints\" as *;\n\n// Properties:\tRequired,  Values:\tRequired, ClassName:\tOptional, Pseudo:\tOptional,\n// (Css-Var:\tOptional, CSS-VarName:\tOptional),  Local-CSS-Variables: Optional,\n// Responsive:\tOptional, Print:  Optional,\n\n// Utility generator\n// Used to generate utilities & print utilities\n@mixin generate-Utility($utility, $infix) {\n  $values: map.get($utility, Values);\n\n  // If the values are a list or string, convert it into a map\n  @if meta.type-of($values) == \"string\" or meta.type-of(list.nth($values, 1)) != \"list\" {\n    $values: list.zip($values, $values);\n  }\n\n  $Properties: map.get($utility, Properties);\n\n  // Multiple properties are possible, for example with vertical or horizontal margins or paddings\n  @if meta.type-of($Properties) == \"string\" {\n    $properties: list.append((), $Properties);\n  }\n\n  // Use custom class if present\n  //$property-class: if(map.has-key($utility, Class), map.get($utility, Class), list.nth($Properties, 1));\n  //$property-class: if($property-class == null, \"\", $property-class);\n  $property-class: list.nth($Properties, 1);\n  @if map.has-key($utility, Class) {\n    $property-class: map.get($utility, Class);\n  }\n  @if $property-class == null {\n    $property-class: \"\";\n  }\n\n  // deprecated: Use custom CSS variable name if present, otherwise default to `Class`\n  //$CSS-VariableName: if(map.has-key($utility, CSS-VarName), map.get($utility, CSS-VarName), map.get($utility, Class));\n  //$Is-Css-Var: map.get($utility, Css-Var);\n\n  // Local CSS variable\n  $Local-CSS-Variables: map.get($utility, Local-CSS-Variables);\n\n  // State params to generate pseudo-classes\n  //$Pseudo-Classes: if(map.has-key($utility, Pseudo), map.get($utility, Pseudo), ());\n  $Pseudo-Classes: ();\n  @if map.has-key($utility, Pseudo) {\n    $Pseudo-Classes: map.get($utility, Pseudo);\n  }\n\n  //$Important: if(map.has-key($utility, Important), map.get($utility, Important), false);\n  $Important: false;\n  @if map.has-key($utility, Important) {\n    $Important: map.get($utility, Important);\n  }\n\n  //$infix: if($property-class == \"\" and string.slice($infix, 1, 1) == \"-\", string.slice($infix, 2), $infix);\n  @if $property-class == \"\" and string.slice($infix, 1, 1) == \"-\" {\n    $infix: string.slice($infix, 2);\n  }\n\n  @each $key, $value in $values {\n\n    // Don't prefix if value key is null (eg. with shadow class)\n    //$property-class-modifier: if($key, if($property-class == \"\" and $infix == \"\", \"\", \"-\") + $key, \"\");\n    $property-class-modifier: \"\";\n    @if $key {\n      @if $property-class == \"\" and $infix == \"\" {\n        $property-class-modifier: \"\";\n      } @else {\n        $property-class-modifier: \"-\" + $key;\n      }\n    } @else {\n      $property-class-modifier: \"\";\n    }\n\n    @if $value != null {\n\n      //@if $Is-Css-Var {\n      //  @if list.length($Pseudo-Classes) > 0 {\n      //    @each $pseudo in $Pseudo-Classes {\n      //      .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {\n      //        --#{$Prefix}#{$CSS-VariableName}: #{$value};\n      //      }\n      //    }\n      //  } @else {\n      //    .#{$property-class + $infix + $property-class-modifier} {\n      //      --#{$Prefix}#{$CSS-VariableName}: #{$value};\n      //    }\n      //  }\n      //} @else {\n\n        @if list.length($Pseudo-Classes) > 0 {\n          @each $pseudo in $Pseudo-Classes {\n            .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {\n              @each $property in $Properties {\n                //#{$property}: $value if($Important, !important, null);\n                @if $Important {\n                  #{$property}: #{$value} !important;\n                } @else {\n                  #{$property}: #{$value};\n                }\n              }\n            }\n          }\n        } @else {\n          $identifier: $property-class + $infix + $property-class-modifier;\n          @if ($property-class == \"\") {\n            $identifier: $key;\n          }\n          .#{$identifier} {\n            @each $property in $Properties {\n              @if $Local-CSS-Variables {\n                @each $local-var, $variable in $Local-CSS-Variables {\n                  --#{$Prefix}#{$local-var}: #{$variable};\n                }\n              }\n              //#{$property}: $value if($Important, !important, null);\n              @if $Important {\n                #{$property}: #{$value} !important;\n              } @else {\n                #{$property}: #{$value};\n              }\n            }\n          }\n        }\n\n      //}\n\n    }\n  }\n\n}\n\n// Loop over each breakpoint\n@mixin responsive-Utilities($utilities, $breakpoints: $Grid-breakpoints) {\n  // Loop over each breakpoint\n  @each $breakpoint in map.keys($breakpoints) {\n\n    // Generate media query if needed\n    @include media-breakpoint-up($breakpoint) {\n      //$infix: if(breakpoint-min($breakpoint, $breakpoints) == null, \"\", \"-#{$breakpoint}\");\n      $infix: \"-#{$breakpoint}\";\n      @if breakpoint-min($breakpoint, $breakpoints) == null {\n        $infix: \"\";\n      }\n\n      // Loop over each utility property\n      @each $key, $utility in $utilities {\n        // The utility can be disabled with `false`, thus check if the utility is a map first\n        // Only proceed if responsive media queries are enabled or if it's the base media query\n        @if meta.type-of($utility) == \"map\" and (map.get($utility, Responsive) or $infix == \"\") {\n          @include generate-Utility($utility, $infix);\n        }\n      }\n    }\n  }\n}\n\n// Print utilities\n@mixin print-Utilities($utilities) {\n  @media print {\n    @each $key, $utility in $utilities {\n      // The utility can be disabled with `false`, thus check if the utility is a map first\n      // Then check if the utility needs print styles\n      @if meta.type-of($utility) == \"map\" and map.get($utility, Print) == true {\n        @include generate-Utility($utility, \"-print\");\n      }\n    }\n  }\n}\n\n@mixin Utilities($utilities) {\n  @include responsive-Utilities($utilities);\n  @include print-Utilities($utilities);\n}\n\n\n\n"]}