{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCQF,mdAAA,gfAAA,ifDRE,oBG+BA,sJAAA,8JAAA,uJFaF,iNEbE,6JAAA,qKAAA,8JFaF,+NEbE,4JAAA,oKAAA,6JFaF","sources":["dist/css/component/icon.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/packages/icons/src/scss/component/icon/_mixins.scss","var/www/html/packages/icons/src/scss/component/icon/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_theme.scss"],"sourcesContent":["@layer graupl.component {\n  .icon {\n    display: var(--graupl-icon-display, inline-block);\n    width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n    height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n    vertical-align: sub;\n    mask-image: var(--graupl-icon, none);\n    mask-repeat: no-repeat;\n    mask-size: contain;\n    mask-position: center;\n    margin-inline: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n  }\n  .icon-before::before {\n    display: var(--graupl-icon-display, inline-block);\n    width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n    height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n    vertical-align: sub;\n    mask-image: var(--graupl-icon, none);\n    mask-repeat: no-repeat;\n    mask-size: contain;\n    mask-position: center;\n    content: \"\";\n    margin-inline-end: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n  }\n  .icon-after::after {\n    display: var(--graupl-icon-display, inline-block);\n    width: var(--graupl-icon-width, var(--graupl-icon-size, 1.25em));\n    height: var(--graupl-icon-height, var(--graupl-icon-size, 1.25em));\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n    vertical-align: sub;\n    mask-image: var(--graupl-icon, none);\n    mask-repeat: no-repeat;\n    mask-size: contain;\n    mask-position: center;\n    content: \"\";\n    margin-inline-start: var(--graupl-icon-spacer, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n  }\n}\n@layer graupl.theme {\n  .icon.primary {\n    --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n  }\n  .icon.secondary {\n    --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n  }\n  .icon.tertiary {\n    --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n  }\n  .icon {\n    background-color: var(--graupl-icon-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  .icon-before.primary {\n    --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n  }\n  .icon-before.secondary {\n    --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n  }\n  .icon-before.tertiary {\n    --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n  }\n  .icon-before::before {\n    background-color: var(--graupl-icon-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  .icon-after.primary {\n    --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%))));\n  }\n  .icon-after.secondary {\n    --graupl-icon-color: var(--graupl-theme-active--secondary--500, var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%))));\n  }\n  .icon-after.tertiary {\n    --graupl-icon-color: var(--graupl-theme-active--tertiary--500, var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%))));\n  }\n  .icon-after::after {\n    background-color: var(--graupl-icon-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}","// @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/icons icon mixins.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/state\";\n@use \"pkg:@graupl/core/src/mixins/theme\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n$-targets: (\n  \"self\": \"&\",\n  \"before\": \"&::before\",\n  \"after\": \"&::after\",\n);\n\n/// Mixin to apply component styles for icons.\n@mixin apply-component($target: \"self\") {\n  #{map.get($-targets, $target)} {\n    display: $icon-display;\n    width: $icon-width;\n    height: $icon-height;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n    vertical-align: sub;\n    mask-image: $icon;\n    mask-repeat: no-repeat;\n    mask-size: contain;\n    mask-position: center;\n\n    @if $target == \"before\" {\n      content: \"\";\n      margin-inline-end: $icon-spacer;\n    } @else if $target == \"after\" {\n      content: \"\";\n      margin-inline-start: $icon-spacer;\n    } @else {\n      margin-inline: $icon-spacer;\n    }\n  }\n}\n\n/// Mixin to apply theme styles for icons.\n@mixin apply-theme($target: \"self\") {\n  @if root-defaults.$themeable-components and defaults.$themeable {\n    @include theme.generate-modifiers(\n      defaults.$icon-theme-map,\n      defaults.$icon-theme-selector-base,\n      defaults.$icon-theme-selector-prefix,\n      \"icon-\"\n    );\n  }\n\n  #{map.get($-targets, $target)} {\n    background-color: $icon-color;\n  }\n}\n\n/// Mixin to bind icon colors to a component.\n///\n/// @param {CustomProperty} $color  - The default color prop for the icon.\n/// @param {Map}            $states - A map of states and color props for the icon.\n@mixin bind($color, $states) {\n  --#{root-defaults.$prefix}icon-color: #{$color};\n\n  @include state.generate-modifiers(\n    (--#{root-defaults.$prefix}icon-color: $states)\n  );\n}\n\n@mixin apply($target: \"self\") {\n  @include apply-component($target);\n  @include apply-theme($target);\n}\n","// @graupl/icons icon componet variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Property                  | Default                   |\n// | ------------------------- | ------------------------- |\n// | --graupl-icon-display     | inline-block              |\n// | --graupl-icon-size        | 1.25em                    |\n// | --graupl-icon-width       | var(--graupl-icon-size)   |\n// | --graupl-icon-height      | var(--graupl-icon-size)   |\n// | --graupl-icon-color       | var(--graupl-color)       |\n// | --graupl-icon             | none                      |\n// | --graupl-icon-spacer      | var(--graupl-spacer-2)    |\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"sass:map\";\n\n$icon-display: var(\n  --#{root-defaults.$prefix}icon-display,\n  #{defaults.$icon-display}\n);\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n$icon: var(--#{root-defaults.$prefix}icon, none);\n$icon-spacer: var(\n  --#{root-defaults.$prefix}icon-spacer,\n  #{map.get(root-variables.$spacers, 2)}\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":[]}