@graupl/graupl 1.0.0-beta.4 → 1.0.0-beta.41

package/dist/css/component/badge.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":null,"mappings":"AESI,wBCgKF,yzDDhKE,oBC8KF,uoBE/IE,wSAAA,sTAAA","sources":["dist/css/component/badge.css","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/theme/typography/_defaults.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/component/badge/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/component/badge/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/node_modules/@graupl/core/src/scss/mixins/_theme.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.component {\n  .badge {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--graupl-badge-padding, var(--graupl-badge-padding-y, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem)))) var(--graupl-badge-padding-x, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n    border-width: var(--graupl-badge-border-width, var(--graupl-badge-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-badge-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-badge-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-badge-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n    border-style: var(--graupl-badge-border-style, var(--graupl-badge-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-badge-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-badge-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-badge-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n    border-radius: var(--graupl-badge-border-radius, var(--graupl-badge-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-badge-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-badge-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-badge-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n    font-size: var(--graupl-badge-font-size, var(--graupl-font-sm, calc(0.833 * var(--graupl-font-size-base, 1rem))));\n  }\n}\n@layer graupl.theme {\n  .badge {\n    border-color: var(--graupl-badge-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n    background: var(--graupl-badge-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n    color: var(--graupl-badge-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n  }\n  .badge.primary {\n    --graupl-badge-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n    --graupl-badge-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n  }\n  .badge.secondary {\n    --graupl-badge-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n    --graupl-badge-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n  }\n  .badge.tertiary {\n    --graupl-badge-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n    --graupl-badge-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n  }\n}","// @graupl/core typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: root-defaults.$root-selector-base !default;\n$root-selector: root-defaults.$root-selector !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$emphasis-selector-base: $selector-base !default;\n$emphasis-selector: \"em\" !default;\n$italic-selector-base: $selector-base !default;\n$italic-selector: \"i\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$root-line-height: 1.2em !default;\n$root-letter-spacing: normal !default;\n$root-word-spacing: normal !default;\n$root-font-style: normal !default;\n$root-font-variant: normal !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n  xs: 0.694,\n  sm: 0.833,\n  base: 1,\n  lg: 1.2,\n  xl: 1.44,\n  2xl: 1.728,\n  3xl: 2.074,\n  4xl: 2.488,\n  5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n  $font-size-multipliers: map.merge(\n    $-font-size-multipliers,\n    $font-size-multipliers\n  );\n}\n\n// Weights.\n$-font-weights: (\n  light: 300,\n  normal: 400,\n  bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n  $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n  system-ui,\n  -apple-system,\n  blinkmacsystemfont,\n  \"Segoe UI\",\n  roboto,\n  \"Helvetica Neue\",\n  arial,\n  sans-serif !default;\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n  @if root-defaults.$use-layers {\n    @layer #{root-defaults.$id}.#{$layer} {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n","// @graupl/core badge base styles.\n//\n// This module provides the base styles for the badge component.\n//\n// The badge component is meant to be used on <span>, <div>, or <a> elements, but can be applied to anything.\n//\n// The following selectors are generated by default:\n// - `.badge`: The badge component.\n// - `.primary`: A component modifier to use the primary colour for the badge component.\n// - `.secondary`: A component modifier to use the secondary colour for the badge component.\n// - `.tertiary`: A component modifier to use the tertiary colour for the badge component.\n//\n// The following custom properties can be used to customize the badge component:\n// | Property                                    | Description                                                                                                   | Default Value                                                                                                                                                                         |\n// | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-badge-font-size`                  | The font size of the badge component.                                                                         | `var(--graupl-font-sm)`                                                                                                                                                               |\n// | `--graupl-badge-background`                 | The background colour of the badge component.                                                                 | `var(--graupl-background)`                                                                                                                                                            |\n// | `--graupl-badge-color`                      | The text colour of the badge component.                                                                       | `var(--graupl-color)`                                                                                                                                                                 |\n// | `--graupl-badge-border-color`               | The border colour of the badge component.                                                                     | `var(--graupl-border-color)`                                                                                                                                                          |\n// | `--graupl-badge-padding-x`                  | The horizontal padding of the badge component.                                                                | `var(--graupl-spacer-5)`                                                                                                                                                              |\n// | `--graupl-badge-padding-y`                  | The vertical padding of the badge component.                                                                  | `var(--graupl-spacer-3)`                                                                                                                                                              |\n// | `--graupl-badge-padding`                    | The padding of the badge component (combines y and x padding).                                                | `var(--graupl-badge-padding-y) var(--graupl-badge-padding-x)`                                                                                                                         |\n// | `--graupl-badge-border-top-width`           | The top border width of the badge component.                                                                  | `var(--graupl-border-top-width)`                                                                                                                                                      |\n// | `--graupl-badge-border-right-width`         | The right border width of the badge component.                                                                | `var(--graupl-border-right-width)`                                                                                                                                                    |\n// | `--graupl-badge-border-bottom-width`        | The bottom border width of the badge component.                                                               | `var(--graupl-border-bottom-width)`                                                                                                                                                   |\n// | `--graupl-badge-border-left-width`          | The left border width of the badge component.                                                                 | `var(--graupl-border-left-width)`                                                                                                                                                     |\n// | `--graupl-badge-border-width`               | The border width of the badge component (combines top, right, bottom, and left widths).                       | `var(--graupl-badge-border-top-width) var(--graupl-badge-border-right-width) var(--graupl-badge-border-bottom-width) var(--graupl-badge-border-left-width)`                           |\n// | `--graupl-badge-border-top-style`           | The top border style of the badge component.                                                                  | `var(--graupl-border-top-style)`                                                                                                                                                      |\n// | `--graupl-badge-border-right-style`         | The right border style of the badge component.                                                                | `var(--graupl-border-right-style)`                                                                                                                                                    |\n// | `--graupl-badge-border-bottom-style`        | The bottom border style of the badge component.                                                               | `var(--graupl-border-bottom-style)`                                                                                                                                                   |\n// | `--graupl-badge-border-left-style`          | The left border style of the badge component.                                                                 | `var(--graupl-border-left-style)`                                                                                                                                                     |\n// | `--graupl-badge-border-style`               | The border style of the badge component (combines top, right, bottom, and left styles).                       | `var(--graupl-badge-border-top-style) var(--graupl-badge-border-right-style) var(--graupl-badge-border-bottom-style) var(--graupl-badge-border-left-style)`                           |\n// | `--graupl-badge-border-top-left-radius`     | The top-left border radius of the badge component.                                                            | `var(--graupl-border-top-left-radius)`                                                                                                                                                |\n// | `--graupl-badge-border-top-right-radius`    | The top-right border radius of the badge component.                                                           | `var(--graupl-border-top-right-radius)`                                                                                                                                               |\n// | `--graupl-badge-border-bottom-right-radius` | The bottom-right border radius of the badge component.                                                        | `var(--graupl-border-bottom-right-radius)`                                                                                                                                            |\n// | `--graupl-badge-border-bottom-left-radius`  | The bottom-left border radius of the badge component.                                                         | `var(--graupl-border-bottom-left-radius)`                                                                                                                                             |\n// | `--graupl-badge-border-radius`              | The border radius of the badge component (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-badge-border-top-left-radius) var(--graupl-badge-border-top-right-radius) var(--graupl-badge-border-bottom-right-radius) var(--graupl-badge-border-bottom-left-radius)` |\n//\n// The following sass variables can be used to customize the generation of the badge component:\n// | Variable                       | Description                                                                            | Default Value                                         |\n// | ------------------------------ | -------------------------------------------------------------------------------------- | ----------------------------------------------------- |\n// | `$selector-base`               | The selector base for the component.                                                   | `\".\"`                                                 |\n// | `$modifier-selector-base`      | The selector base for component modifiers.                                             | `\".\"`                                                 |\n// | `$themeable`                   | Flag to generate theme modifiers.                                                      | true                                                  |\n// | `$generate-base-theme-map`     | A flag to generate the base theme maps for badge variants.                             | `true`                                                |\n// | `$badge-selector-base`         | The selector base for the badge component.                                             | `\".\"`                                                 |\n// | `$badge-selector`              | The badge component selector.                                                          | `\"badge\"`                                             |\n// | `$badge-theme-selector-base`   | The selector base for the badge theme component modifiers.                             | `\".\"`                                                 |\n// | `$badge-theme-selector-prefix` | The badge theme component modifier selector prefix.                                    | `\"\"`                                                  |\n// | `$badge-theme-mappings`        | A map of properties and color shades used generate all badge variants.                 | `()`                                                  |\n// | `$badge-theme-map`             | A map of all properties, colors, and color shades used to generate all badge variants. | `map.deep-merge($-badge-theme-map, $badge-theme-map)` |\n//\n// ## Using `$badge-theme-mappings`\n//\n// `$badge-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $badge-theme-mappings: (\n//   border-color: 700,\n// )\n// ```\n//\n// This directly[1] maps to all badge variants, telling them what shade to use for said property.\n// All badge variants will use the following based on the example above:\n// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize _all_ badges variants in the same way.\n//\n// For example, if you use the following map:\n// ```scss\n// $badge-theme-mappings: (\n//   border-color: 500,\n// )\n// ```\n//\n// All badge variants will use the following:\n// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--primary--500`,\n// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$badge-theme-mappings` gets parsed into a larger, more explicit map: `$badge-theme-map`.\n//\n// Using `$badge-theme-map`\n//\n// `$badge-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ```scss\n// $badge-theme-map: (\n//   primary: (\n//     border-color: (\n//       color: primary,\n//       shade: 700\n//     ),\n//   ),\n//   secondary: (\n//     border-color: (\n//       color: secondary,\n//       shade: 700\n//     ),\n//   ),\n//   tertiary: (\n//     border-color: (\n//       color: tertiary,\n//       shade: 700\n//     ),\n//   ),\n// )\n// ```\n//\n// This directly maps to all badge variants, telling them what shade to use for said property.\n// The badge variants will use the following based on the example above:\n// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize badge variants individually.\n//\n// For example, if you use the following map:\n//\n// ```scss\n// $badge-theme-map: (\n//   primary: (\n//     border-color: (\n//       color: secondary,\n//       shade: 700\n//     ),\n//   ),\n//   secondary: (\n//     border-color: (\n//       color: secondary,\n//       shade: 700\n//     ),\n//   ),\n//   tertiary: (\n//     border-color: (\n//       color: secondary,\n//       shade: 700\n//     ),\n//   ),\n// )\n// ```\n//\n// The badge variants will use the following:\n// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`,\n// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`.\n//\n// @example\n// <badge class=\"badge primary\">Primary Badge</badge>\n//\n// @example\n// <a class=\"badge secondary\" href=\"#\">Secondary Badge</a>\n//\n// @example\n// <a class=\"badge tertiary\" href=\"#\">Tertiary Badge</a>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/theme\";\n@use \"../../mixins/layer\" as *;\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(component) {\n  // .badge\n  #{defaults.$badge-selector-base}#{defaults.$badge-selector} {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: $badge-padding;\n    border-width: $badge-border-width;\n    border-style: $badge-border-style;\n    border-radius: $badge-border-radius;\n    font-size: $badge-font-size;\n  }\n}\n\n@include layer(theme) {\n  // .badge\n  #{defaults.$badge-selector-base}#{defaults.$badge-selector} {\n    border-color: $badge-border-color;\n    background: $badge-background;\n    color: $badge-color;\n\n    @if root-defaults.$themeable-components and defaults.$themeable {\n      @include theme.generate-modifiers(\n        defaults.$badge-theme-map,\n        defaults.$badge-theme-selector-base,\n        defaults.$badge-theme-selector-prefix,\n        \"badge-\"\n      );\n    }\n  }\n}\n","// @graupl/core badge base variables.\n//\n// These values are to be used to directly style bases and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property                           | Default                                                                                                                                                                             |\n// | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-badge-font-size                  | var(--graupl-font-sm)                                                                                                                                                               |\n// | --graupl-badge-background                 | var(--graupl-background)                                                                                                                                                            |\n// | --graupl-badge-color                      | var(--graupl-color)                                                                                                                                                                 |\n// | --graupl-badge-border-color               | var(--graupl-border-color)                                                                                                                                                          |\n// | --graupl-badge-padding-x                  | var(--graupl-spacer-5)                                                                                                                                                              |\n// | --graupl-badge-padding-y                  | var(--graupl-spacer-3)                                                                                                                                                              |\n// | --graupl-badge-padding                    | var(--graupl-badge-padding-y) var(--graupl-badge-padding-x)                                                                                                                         |\n// | --graupl-badge-border-top-width           | var(--graupl-border-top-width)                                                                                                                                                      |\n// | --graupl-badge-border-right-width         | var(--graupl-border-right-width)                                                                                                                                                    |\n// | --graupl-badge-border-bottom-width        | var(--graupl-border-bottom-width)                                                                                                                                                   |\n// | --graupl-badge-border-left-width          | var(--graupl-border-left-width)                                                                                                                                                     |\n// | --graupl-badge-border-width               | var(--graupl-badge-border-top-width) var(--graupl-badge-border-right-width) var(--graupl-badge-border-bottom-width) var(--graupl-badge-border-left-width)                           |\n// | --graupl-badge-border-top-style           | var(--graupl-border-top-style)                                                                                                                                                      |\n// | --graupl-badge-border-right-style         | var(--graupl-border-right-style)                                                                                                                                                    |\n// | --graupl-badge-border-bottom-style        | var(--graupl-border-bottom-style)                                                                                                                                                   |\n// | --graupl-badge-border-left-style          | var(--graupl-border-left-style)                                                                                                                                                     |\n// | --graupl-badge-border-style               | var(--graupl-badge-border-top-style) var(--graupl-badge-border-right-style) var(--graupl-badge-border-bottom-style) var(--graupl-badge-border-left-style)                           |\n// | --graupl-badge-border-top-left-radius     | var(--graupl-border-top-left-radius)                                                                                                                                                |\n// | --graupl-badge-border-top-right-radius    | var(--graupl-border-top-right-radius)                                                                                                                                               |\n// | --graupl-badge-border-bottom-right-radius | var(--graupl-border-bottom-right-radius)                                                                                                                                            |\n// | --graupl-badge-border-bottom-left-radius  | var(--graupl-border-bottom-left-radius)                                                                                                                                             |\n// | --graupl-badge-border-radius              | var(--graupl-badge-border-top-left-radius) var(--graupl-badge-border-top-right-radius) var(--graupl-badge-border-bottom-right-radius) var(--graupl-badge-border-bottom-left-radius) |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// Typography.\n// --graupl-badge-font-size\n$badge-font-size: var(\n  --#{root-defaults.$prefix}badge-font-size,\n  #{map.get(typography.$font-sizes, sm)}\n);\n\n// Colors.\n// --graupl-badge-background\n$badge-background: var(\n  --#{root-defaults.$prefix}badge-background,\n  #{color.$background}\n);\n\n// --graupl-badge-color\n$badge-color: var(--#{root-defaults.$prefix}badge-color, #{color.$color});\n\n// --graupl-badge-border-color\n$badge-border-color: var(\n  --#{root-defaults.$prefix}badge-border-color,\n  #{color.$border-color}\n);\n\n// Spacing.\n// --graupl-badge-padding-x\n$badge-padding-x: var(\n  --#{root-defaults.$prefix}badge-padding-x,\n  #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-badge-padding-y\n$badge-padding-y: var(\n  --#{root-defaults.$prefix}badge-padding-y,\n  #{map.get(root-variables.$spacers, 2)}\n);\n\n// --graupl-badge-padding\n$badge-padding: var(\n  --#{root-defaults.$prefix}badge-padding,\n  #{$badge-padding-y} #{$badge-padding-x}\n);\n\n// Border widths.\n// --graupl-badge-border-top-width\n$badge-border-top-width: var(\n  --#{root-defaults.$prefix}badge-border-top-width,\n  #{root-variables.$border-top-width}\n);\n\n// --graupl-badge-border-right-width\n$badge-border-right-width: var(\n  --#{root-defaults.$prefix}badge-border-right-width,\n  #{root-variables.$border-right-width}\n);\n\n// --graupl-badge-border-bottom-width\n$badge-border-bottom-width: var(\n  --#{root-defaults.$prefix}badge-border-bottom-width,\n  #{root-variables.$border-bottom-width}\n);\n\n// --graupl-badge-border-left-width\n$badge-border-left-width: var(\n  --#{root-defaults.$prefix}badge-border-left-width,\n  #{root-variables.$border-left-width}\n);\n\n// --graupl-badge-border-width\n$badge-border-width: var(\n  --#{root-defaults.$prefix}badge-border-width,\n  #{$badge-border-top-width} #{$badge-border-right-width}\n    #{$badge-border-bottom-width} #{$badge-border-left-width}\n);\n\n// Border styles.\n// --graupl-badge-border-top-style\n$badge-border-top-style: var(\n  --#{root-defaults.$prefix}badge-border-top-style,\n  #{root-variables.$border-top-style}\n);\n\n// --graupl-badge-border-right-style\n$badge-border-right-style: var(\n  --#{root-defaults.$prefix}badge-border-right-style,\n  #{root-variables.$border-right-style}\n);\n\n// --graupl-badge-border-bottom-style\n$badge-border-bottom-style: var(\n  --#{root-defaults.$prefix}badge-border-bottom-style,\n  #{root-variables.$border-bottom-style}\n);\n\n// --graupl-badge-border-left-style\n$badge-border-left-style: var(\n  --#{root-defaults.$prefix}badge-border-left-style,\n  #{root-variables.$border-left-style}\n);\n\n// --graupl-badge-border-style\n$badge-border-style: var(\n  --#{root-defaults.$prefix}badge-border-style,\n  #{$badge-border-top-style} #{$badge-border-right-style}\n    #{$badge-border-bottom-style} #{$badge-border-left-style}\n);\n\n// Border radii.\n// --graupl-badge-border-top-left-radius\n$badge-border-top-left-radius: var(\n  --#{root-defaults.$prefix}badge-border-top-left-radius,\n  #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-badge-border-top-right-radius\n$badge-border-top-right-radius: var(\n  --#{root-defaults.$prefix}badge-border-top-right-radius,\n  #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-badge-border-bottom-right-radius\n$badge-border-bottom-right-radius: var(\n  --#{root-defaults.$prefix}badge-border-bottom-right-radius,\n  #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-badge-border-bottom-left-radius\n$badge-border-bottom-left-radius: var(\n  --#{root-defaults.$prefix}badge-border-bottom-left-radius,\n  #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-badge-border-radius\n$badge-border-radius: var(\n  --#{root-defaults.$prefix}badge-border-radius,\n  #{$badge-border-top-left-radius} #{$badge-border-top-right-radius}\n    #{$badge-border-bottom-right-radius} #{$badge-border-bottom-left-radius}\n);\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n///   The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n  #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n    @content;\n  }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n///   The map of custom props.\n/// @param {string} $selector-base\n///   The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n///   The selector prefix for the theme modifer.\n/// @param {string} $scope\n///   The scope of the custom properties.\n/// @param {string} $base\n///   The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n  $theme-map,\n  $selector-base,\n  $selector-prefix,\n  $scope: \"\",\n  $base: \"&\"\n) {\n  @each $color, $map in $theme-map {\n    // e.g. &.primary, &.secondary, &.tertiary\n    #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n      @each $prop, $value in $map {\n        --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n            map.get($value, color),\n            map.get($value, shade)\n          )};\n      }\n    }\n  }\n}\n"],"names":[]}

package/dist/css/component/breadcrumb.css

@@ -0,0 +1,2 @@
+@layer graupl.component{.breadcrumb{margin:var(--graupl-breadcrumb-margin,var(--graupl-breadcrumb-margin-y,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-breadcrumb-margin-x,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))));padding:var(--graupl-breadcrumb-padding,var(--graupl-breadcrumb-padding-y,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-breadcrumb-padding-x,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))));border-width:var(--graupl-breadcrumb-border-width,var(--graupl-breadcrumb-border-top-width,0) var(--graupl-breadcrumb-border-right-width,0) var(--graupl-breadcrumb-border-bottom-width,0) var(--graupl-breadcrumb-border-left-width,0));border-style:var(--graupl-breadcrumb-border-style,var(--graupl-breadcrumb-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-breadcrumb-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-breadcrumb-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-breadcrumb-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-breadcrumb-border-radius,var(--graupl-breadcrumb-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-breadcrumb-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-breadcrumb-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-breadcrumb-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));gap:var(--graupl-breadcrumb-gap,var(--graupl-breadcrumb-column-gap,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))) var(--graupl-breadcrumb-row-gap,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))));list-style:none;display:flex;position:relative}.breadcrumb.show .breadcrumb-item:has(.breadcrumb-toggle){display:var(--graupl-breadcrumb-item-hide-display,none);opacity:var(--graupl-breadcrumb-item-hide-opacity,0)}.breadcrumb.hide .breadcrumb-item:has(.breadcrumb-toggle){display:var(--graupl-breadcrumb-item-show-display,flex);opacity:var(--graupl-breadcrumb-item-show-opacity,1)}.breadcrumb.hide .breadcrumb-item:has(.breadcrumb-toggle)~.breadcrumb-item:not(:last-child){display:var(--graupl-breadcrumb-item-hide-display,none);opacity:var(--graupl-breadcrumb-item-hide-opacity,0)}.breadcrumb.transitioning .breadcrumb-item:has(.breadcrumb-toggle),.breadcrumb.transitioning .breadcrumb-item:has(.breadcrumb-toggle)~.breadcrumb-item:not(:last-child){display:var(--graupl-breadcrumb-item-transitioning-display,flex);opacity:var(--graupl-breadcrumb-item-transitioning-opacity,0)}.breadcrumb-item{display:var(--graupl-breadcrumb-item-display,flex);padding:var(--graupl-breadcrumb-item-padding,var(--graupl-breadcrumb-item-padding-y,0) var(--graupl-breadcrumb-item-padding-x,0));border-width:var(--graupl-breadcrumb-item-border-width,var(--graupl-breadcrumb-item-border-top-width,0) var(--graupl-breadcrumb-item-border-right-width,0) var(--graupl-breadcrumb-item-border-bottom-width,0) var(--graupl-breadcrumb-item-border-left-width,0));border-style:var(--graupl-breadcrumb-item-border-style,var(--graupl-breadcrumb-item-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-breadcrumb-item-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-breadcrumb-item-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-breadcrumb-item-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-breadcrumb-item-border-radius,var(--graupl-breadcrumb-item-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-breadcrumb-item-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-breadcrumb-item-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-breadcrumb-item-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));opacity:var(--graupl-breadcrumb-item-opacity,var(--graupl-breadcrumb-item-show-opacity,1));gap:var(--graupl-breadcrumb-item-gap,var(--graupl-breadcrumb-item-column-gap,var(--graupl-breadcrumb-column-gap,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))))) var(--graupl-breadcrumb-item-row-gap,var(--graupl-breadcrumb-row-gap,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))))));position:relative}.breadcrumb-item:not(:last-child):after{content:var(--graupl-breadcrumb-item-separator-content,"/");display:block}.breadcrumb-item:has(.breadcrumb-toggle){display:var(--graupl-breadcrumb-item-hide-display,none);opacity:var(--graupl-breadcrumb-item-hide-opacity,0)}.breadcrumb-link{padding:var(--graupl-breadcrumb-link-padding,var(--graupl-breadcrumb-link-padding-y,0) var(--graupl-breadcrumb-link-padding-x,0));border-width:var(--graupl-breadcrumb-link-border-width,var(--graupl-breadcrumb-link-border-top-width,0) var(--graupl-breadcrumb-link-border-right-width,0) var(--graupl-breadcrumb-link-border-bottom-width,0) var(--graupl-breadcrumb-link-border-left-width,0));border-style:var(--graupl-breadcrumb-link-border-style,var(--graupl-breadcrumb-link-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-breadcrumb-link-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-breadcrumb-link-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-breadcrumb-link-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-breadcrumb-link-border-radius,var(--graupl-breadcrumb-link-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-breadcrumb-link-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-breadcrumb-link-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-breadcrumb-link-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))))}.breadcrumb-toggle{min-width:var(--graupl-link-min-width,auto);min-height:var(--graupl-link-min-height,auto);padding:var(--graupl-link-padding,var(--graupl-link-padding-y,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-link-padding-x,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))));transform:var(--graupl-link-transform,none);transition:var(--graupl-link-transition,background var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease), color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease), transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease));border-width:var(--graupl-link-border-width,var(--graupl-link-border-top-width,0) var(--graupl-link-border-right-width,0) var(--graupl-link-border-bottom-width,0) var(--graupl-link-border-left-width,0));border-style:var(--graupl-link-border-style,var(--graupl-link-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-link-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-link-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-link-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-link-border-radius,var(--graupl-link-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-link-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-link-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-link-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));text-decoration:var(--graupl-link-text-decoration,underline);text-decoration-style:var(--graupl-link-text-decoration-style,solid);text-decoration-thickness:var(--graupl-link-text-decoration-thickness,var(--graupl-border-width,.125rem))}.breadcrumb-toggle:visited,.breadcrumb-toggle.visited{transform:var(--graupl-link-visited-transform,var(--graupl-link-transform,none));text-decoration:var(--graupl-link-visited-text-decoration,var(--graupl-link-text-decoration,underline));text-decoration-style:var(--graupl-link-visited-text-decoration-style,var(--graupl-link-text-decoration-style,solid));text-decoration-thickness:var(--graupl-link-visited-text-decoration-thickness,var(--graupl-link-text-decoration-thickness,var(--graupl-border-width,.125rem)))}.breadcrumb-toggle:focus-visible,.breadcrumb-toggle.focus{transform:var(--graupl-link-focus-transform,var(--graupl-link-transform,none));text-decoration:var(--graupl-link-focus-text-decoration,var(--graupl-link-text-decoration,underline));text-decoration-style:var(--graupl-link-focus-text-decoration-style,var(--graupl-link-text-decoration-style,solid));text-decoration-thickness:var(--graupl-link-focus-text-decoration-thickness,var(--graupl-link-text-decoration-thickness,var(--graupl-border-width,.125rem)))}.breadcrumb-toggle:hover,.breadcrumb-toggle.hover{transform:var(--graupl-link-hover-transform,none);text-decoration:var(--graupl-link-hover-text-decoration,underline);text-decoration-style:var(--graupl-link-hover-text-decoration-style,solid);text-decoration-thickness:var(--graupl-link-hover-text-decoration-thickness,var(--graupl-border-width,.125rem))}.breadcrumb-toggle:active,.breadcrumb-toggle.active{transform:var(--graupl-link-active-transform,var(--graupl-link-hover-transform,none));text-decoration:var(--graupl-link-active-text-decoration,var(--graupl-link-hover-text-decoration,underline));text-decoration-style:var(--graupl-link-active-text-decoration-style,var(--graupl-link-hover-text-decoration-style,solid));text-decoration-thickness:var(--graupl-link-active-text-decoration-thickness,var(--graupl-link-hover-text-decoration-thickness,var(--graupl-border-width,.125rem)))}.breadcrumb-toggle:disabled,.breadcrumb-toggle:disabled:visited,.breadcrumb-toggle:disabled.visited,.breadcrumb-toggle:disabled:focus-visible,.breadcrumb-toggle:disabled.focus,.breadcrumb-toggle:disabled:hover,.breadcrumb-toggle:disabled.hover,.breadcrumb-toggle:disabled:active,.breadcrumb-toggle:disabled.active,.breadcrumb-toggle:disabled[aria-selected=true],.breadcrumb-toggle:disabled.selected,.breadcrumb-toggle:disabled[aria-current=true],.breadcrumb-toggle:disabled.current,.breadcrumb-toggle[disabled],.breadcrumb-toggle[disabled]:visited,.breadcrumb-toggle[disabled].visited,.breadcrumb-toggle[disabled]:focus-visible,.breadcrumb-toggle[disabled].focus,.breadcrumb-toggle[disabled]:hover,.breadcrumb-toggle[disabled].hover,.breadcrumb-toggle[disabled]:active,.breadcrumb-toggle[disabled].active,.breadcrumb-toggle[disabled][aria-selected=true],.breadcrumb-toggle[disabled].selected,.breadcrumb-toggle[disabled][aria-current=true],.breadcrumb-toggle[disabled].current,.breadcrumb-toggle[aria-disabled=true],.breadcrumb-toggle[aria-disabled=true]:visited,.breadcrumb-toggle[aria-disabled=true].visited,.breadcrumb-toggle[aria-disabled=true]:focus-visible,.breadcrumb-toggle[aria-disabled=true].focus,.breadcrumb-toggle[aria-disabled=true]:hover,.breadcrumb-toggle[aria-disabled=true].hover,.breadcrumb-toggle[aria-disabled=true]:active,.breadcrumb-toggle[aria-disabled=true].active,.breadcrumb-toggle[aria-disabled=true][aria-selected=true],.breadcrumb-toggle[aria-disabled=true].selected,.breadcrumb-toggle[aria-disabled=true][aria-current=true],.breadcrumb-toggle[aria-disabled=true].current,.breadcrumb-toggle.disabled,.breadcrumb-toggle.disabled:visited,.breadcrumb-toggle.disabled.visited,.breadcrumb-toggle.disabled:focus-visible,.breadcrumb-toggle.disabled.focus,.breadcrumb-toggle.disabled:hover,.breadcrumb-toggle.disabled.hover,.breadcrumb-toggle.disabled:active,.breadcrumb-toggle.disabled.active,.breadcrumb-toggle.disabled[aria-selected=true],.breadcrumb-toggle.disabled.selected,.breadcrumb-toggle.disabled[aria-current=true],.breadcrumb-toggle.disabled.current{transform:var(--graupl-link-disabled-transform,none);text-decoration:var(--graupl-link-disabled-text-decoration,underline);text-decoration-style:var(--graupl-link-disabled-text-decoration-style,solid);text-decoration-thickness:var(--graupl-link-disabled-text-decoration-thickness,var(--graupl-border-width,.125rem))}@media (prefers-reduced-motion:reduce){.breadcrumb-toggle{transition:var(--graupl-link-transition-reduced-motion,background var(--graupl-transition-timing-function,ease), color var(--graupl-transition-timing-function,ease))}}.breadcrumb-toggle{padding:var(--graupl-breadcrumb-toggle-padding,var(--graupl-breadcrumb-toggle-padding-y,var(--graupl-breadcrumb-link-padding-y,0)) var(--graupl-breadcrumb-toggle-padding-x,var(--graupl-breadcrumb-link-padding-x,0)));border-width:var(--graupl-breadcrumb-toggle-border-width,var(--graupl-breadcrumb-toggle-border-top-width,var(--graupl-breadcrumb-link-border-top-width,0)) var(--graupl-breadcrumb-toggle-border-right-width,var(--graupl-breadcrumb-link-border-right-width,0)) var(--graupl-breadcrumb-toggle-border-bottom-width,var(--graupl-breadcrumb-link-border-bottom-width,0)) var(--graupl-breadcrumb-toggle-border-left-width,var(--graupl-breadcrumb-link-border-left-width,0)));border-style:var(--graupl-breadcrumb-toggle-border-style,var(--graupl-breadcrumb-toggle-border-top-style,var(--graupl-breadcrumb-link-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))) var(--graupl-breadcrumb-toggle-border-right-style,var(--graupl-breadcrumb-link-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))) var(--graupl-breadcrumb-toggle-border-bottom-style,var(--graupl-breadcrumb-link-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))) var(--graupl-breadcrumb-toggle-border-left-style,var(--graupl-breadcrumb-link-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid)))));border-radius:var(--graupl-breadcrumb-toggle-border-radius,var(--graupl-breadcrumb-toggle-border-top-left-radius,var(--graupl-breadcrumb-link-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))) var(--graupl-breadcrumb-toggle-border-top-right-radius,var(--graupl-breadcrumb-link-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))) var(--graupl-breadcrumb-toggle-border-bottom-right-radius,var(--graupl-breadcrumb-link-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))) var(--graupl-breadcrumb-toggle-border-bottom-left-radius,var(--graupl-breadcrumb-link-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem)))))}}@layer graupl.theme{.breadcrumb{border-color:var(--graupl-breadcrumb-border-color,var(--graupl-breadcrumb-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));background:var(--graupl-breadcrumb-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-breadcrumb-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.breadcrumb-item{border-color:var(--graupl-breadcrumb-item-border-color,var(--graupl-breadcrumb-item-color,var(--graupl-breadcrumb-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));background:var(--graupl-breadcrumb-item-background,var(--graupl-breadcrumb-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));color:var(--graupl-breadcrumb-item-color,var(--graupl-breadcrumb-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.breadcrumb-link{border-color:var(--graupl-breadcrumb-link-border-color,var(--graupl-breadcrumb-link-color,var(--graupl-breadcrumb-item-color,var(--graupl-breadcrumb-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))));background:var(--graupl-breadcrumb-link-background,var(--graupl-breadcrumb-item-background,var(--graupl-breadcrumb-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))));color:var(--graupl-breadcrumb-link-color,var(--graupl-breadcrumb-item-color,var(--graupl-breadcrumb-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))}.breadcrumb-toggle{border-color:var(--graupl-link-border-color,transparent);background:var(--graupl-link-background,transparent);color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))));text-decoration-color:var(--graupl-link-text-decoration-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))))}.breadcrumb-toggle:visited,.breadcrumb-toggle.visited{border-color:var(--graupl-link-visited-border-color,var(--graupl-link-border-color,transparent));background:var(--graupl-link-visited-background,var(--graupl-link-background,transparent));color:var(--graupl-link-visited-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))));text-decoration-color:var(--graupl-link-visited-text-decoration-color,var(--graupl-link-visited-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))))}.breadcrumb-toggle:focus-visible,.breadcrumb-toggle.focus{border-color:var(--graupl-link-focus-border-color,var(--graupl-link-border-color,transparent));background:var(--graupl-link-focus-background,var(--graupl-link-background,transparent));color:var(--graupl-link-focus-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))));text-decoration-color:var(--graupl-link-focus-text-decoration-color,var(--graupl-link-focus-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))))}.breadcrumb-toggle:hover,.breadcrumb-toggle.hover{border-color:var(--graupl-link-hover-border-color,transparent);background:var(--graupl-link-hover-background,transparent);color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))));text-decoration-color:var(--graupl-link-hover-text-decoration-color,var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))))}.breadcrumb-toggle:active,.breadcrumb-toggle.active{border-color:var(--graupl-link-active-border-color,var(--graupl-link-hover-border-color,transparent));background:var(--graupl-link-active-background,var(--graupl-link-hover-background,transparent));color:var(--graupl-link-active-color,var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))));text-decoration-color:var(--graupl-link-active-text-decoration-color,var(--graupl-link-active-color,var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))))}.breadcrumb-toggle:disabled,.breadcrumb-toggle:disabled:visited,.breadcrumb-toggle:disabled.visited,.breadcrumb-toggle:disabled:focus-visible,.breadcrumb-toggle:disabled.focus,.breadcrumb-toggle:disabled:hover,.breadcrumb-toggle:disabled.hover,.breadcrumb-toggle:disabled:active,.breadcrumb-toggle:disabled.active,.breadcrumb-toggle:disabled[aria-selected=true],.breadcrumb-toggle:disabled.selected,.breadcrumb-toggle:disabled[aria-current=true],.breadcrumb-toggle:disabled.current,.breadcrumb-toggle[disabled],.breadcrumb-toggle[disabled]:visited,.breadcrumb-toggle[disabled].visited,.breadcrumb-toggle[disabled]:focus-visible,.breadcrumb-toggle[disabled].focus,.breadcrumb-toggle[disabled]:hover,.breadcrumb-toggle[disabled].hover,.breadcrumb-toggle[disabled]:active,.breadcrumb-toggle[disabled].active,.breadcrumb-toggle[disabled][aria-selected=true],.breadcrumb-toggle[disabled].selected,.breadcrumb-toggle[disabled][aria-current=true],.breadcrumb-toggle[disabled].current,.breadcrumb-toggle[aria-disabled=true],.breadcrumb-toggle[aria-disabled=true]:visited,.breadcrumb-toggle[aria-disabled=true].visited,.breadcrumb-toggle[aria-disabled=true]:focus-visible,.breadcrumb-toggle[aria-disabled=true].focus,.breadcrumb-toggle[aria-disabled=true]:hover,.breadcrumb-toggle[aria-disabled=true].hover,.breadcrumb-toggle[aria-disabled=true]:active,.breadcrumb-toggle[aria-disabled=true].active,.breadcrumb-toggle[aria-disabled=true][aria-selected=true],.breadcrumb-toggle[aria-disabled=true].selected,.breadcrumb-toggle[aria-disabled=true][aria-current=true],.breadcrumb-toggle[aria-disabled=true].current,.breadcrumb-toggle.disabled,.breadcrumb-toggle.disabled:visited,.breadcrumb-toggle.disabled.visited,.breadcrumb-toggle.disabled:focus-visible,.breadcrumb-toggle.disabled.focus,.breadcrumb-toggle.disabled:hover,.breadcrumb-toggle.disabled.hover,.breadcrumb-toggle.disabled:active,.breadcrumb-toggle.disabled.active,.breadcrumb-toggle.disabled[aria-selected=true],.breadcrumb-toggle.disabled.selected,.breadcrumb-toggle.disabled[aria-current=true],.breadcrumb-toggle.disabled.current{border-color:var(--graupl-link-disabled-border-color,transparent);background:var(--graupl-link-disabled-background,transparent);color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));text-decoration-color:var(--graupl-link-disabled-text-decoration-color,var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))))}.breadcrumb-toggle{border-color:var(--graupl-breadcrumb-toggle-border-color,var(--graupl-breadcrumb-toggle-color,var(--graupl-breadcrumb-link-color,var(--graupl-breadcrumb-item-color,var(--graupl-breadcrumb-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))));background:var(--graupl-breadcrumb-toggle-background,var(--graupl-breadcrumb-link-background,var(--graupl-breadcrumb-item-background,var(--graupl-breadcrumb-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))));color:var(--graupl-breadcrumb-toggle-color,var(--graupl-breadcrumb-link-color,var(--graupl-breadcrumb-item-color,var(--graupl-breadcrumb-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))))}}
+/*# sourceMappingURL=breadcrumb.css.map */