@graupl/icons 1.0.0-beta.49 → 1.0.0-beta.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/base/button.css +1 -1
- package/dist/css/base/button.css.map +1 -1
- package/dist/css/base/link.css +1 -1
- package/dist/css/base/link.css.map +1 -1
- package/dist/css/base.css +1 -1
- package/dist/css/base.css.map +1 -1
- package/dist/css/component/icon.css +1 -1
- package/dist/css/component/icon.css.map +1 -1
- package/dist/css/component.css +1 -1
- package/dist/css/component.css.map +1 -1
- package/dist/css/icon.css +1 -1
- package/dist/css/icon.css.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.component{.icon{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-before:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-after:after{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}@layer graupl.theme{.icon.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-
|
|
1
|
+
@layer graupl.component{.icon{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-before:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-after:after{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}@layer graupl.theme{.icon.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.icon.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.icon.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.icon{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.icon-before.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.icon-before.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.icon-before.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.icon-before:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.icon-after.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.icon-after.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.icon-after.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.icon-after:after{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}}
|
|
2
2
|
/*# sourceMappingURL=icon.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCQF,qdAAA,kfAAA,mfDRE,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 component 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// --graupl-icon-display\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n\n// --graupl-icon-size\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n\n// --graupl-icon-width\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n\n// --graupl-icon-height\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n\n// --graupl-icon-color\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n\n// --graupl-icon\n$icon: var(--#{root-defaults.$prefix}icon, none);\n\n// --graupl-icon-spacer\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":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCQF,qdAAA,kfAAA,mfDRE,oBGyCA,uMAAA,iNAAA,sMFGF,kQEHE,8MAAA,wNAAA,6MFGF,gREHE,6MAAA,uNAAA,4MFGF","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-default--primary--500, light-dark(var(--graupl-primary--500, hsl(219, 75%, 50%)), 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-default--secondary--500, light-dark(var(--graupl-secondary--500, hsl(235, 15%, 50%)), 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-default--tertiary--500, light-dark(var(--graupl-tertiary--500, hsl(340, 60%, 50%)), 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-default--primary--900, light-dark(var(--graupl-primary--900, hsl(219, 100%, 10%)), var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .icon-before.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-default--primary--500, light-dark(var(--graupl-primary--500, hsl(219, 75%, 50%)), 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-default--secondary--500, light-dark(var(--graupl-secondary--500, hsl(235, 15%, 50%)), 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-default--tertiary--500, light-dark(var(--graupl-tertiary--500, hsl(340, 60%, 50%)), 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-default--primary--900, light-dark(var(--graupl-primary--900, hsl(219, 100%, 10%)), var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .icon-after.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-default--primary--500, light-dark(var(--graupl-primary--500, hsl(219, 75%, 50%)), 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-default--secondary--500, light-dark(var(--graupl-secondary--500, hsl(235, 15%, 50%)), 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-default--tertiary--500, light-dark(var(--graupl-tertiary--500, hsl(340, 60%, 50%)), 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-default--primary--900, light-dark(var(--graupl-primary--900, hsl(219, 100%, 10%)), var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\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 component 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// --graupl-icon-display\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n\n// --graupl-icon-size\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n\n// --graupl-icon-width\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n\n// --graupl-icon-height\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n\n// --graupl-icon-color\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n\n// --graupl-icon\n$icon: var(--#{root-defaults.$prefix}icon, none);\n\n// --graupl-icon-spacer\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/// Applies styles to a specific color scheme.\n///\n/// @param {string} $scheme-name\n/// The name of the scheme to apply the styles to.\n@mixin scheme($scheme-name) {\n #{color-defaults.$scheme-selector-base}#{color-defaults.$scheme-selector-prefix}#{$scheme-name}#{color-defaults.$scheme-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.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.component{.icon{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-before:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-after:after{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}@layer graupl.theme{.icon.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-
|
|
1
|
+
@layer graupl.component{.icon{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-before:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-after:after{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}@layer graupl.theme{.icon.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.icon.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.icon.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.icon{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.icon-before.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.icon-before.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.icon-before.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.icon-before:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.icon-after.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.icon-after.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.icon-after.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.icon-after:after{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}}
|
|
2
2
|
/*# sourceMappingURL=component.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCQF,qdAAA,kfAAA,mfDRE,oBG+BA,sJAAA,8JAAA,uJFaF,iNEbE,6JAAA,qKAAA,8JFaF,+NEbE,4JAAA,oKAAA,6JFaF","sources":["dist/css/component.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 component 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// --graupl-icon-display\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n\n// --graupl-icon-size\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n\n// --graupl-icon-width\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n\n// --graupl-icon-height\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n\n// --graupl-icon-color\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n\n// --graupl-icon\n$icon: var(--#{root-defaults.$prefix}icon, none);\n\n// --graupl-icon-spacer\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":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCQF,qdAAA,kfAAA,mfDRE,oBGyCA,uMAAA,iNAAA,sMFGF,kQEHE,8MAAA,wNAAA,6MFGF,gREHE,6MAAA,uNAAA,4MFGF","sources":["dist/css/component.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-default--primary--500, light-dark(var(--graupl-primary--500, hsl(219, 75%, 50%)), 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-default--secondary--500, light-dark(var(--graupl-secondary--500, hsl(235, 15%, 50%)), 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-default--tertiary--500, light-dark(var(--graupl-tertiary--500, hsl(340, 60%, 50%)), 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-default--primary--900, light-dark(var(--graupl-primary--900, hsl(219, 100%, 10%)), var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .icon-before.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-default--primary--500, light-dark(var(--graupl-primary--500, hsl(219, 75%, 50%)), 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-default--secondary--500, light-dark(var(--graupl-secondary--500, hsl(235, 15%, 50%)), 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-default--tertiary--500, light-dark(var(--graupl-tertiary--500, hsl(340, 60%, 50%)), 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-default--primary--900, light-dark(var(--graupl-primary--900, hsl(219, 100%, 10%)), var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .icon-after.primary {\n --graupl-icon-color: var(--graupl-theme-active--primary--500, var(--graupl-theme-default--primary--500, light-dark(var(--graupl-primary--500, hsl(219, 75%, 50%)), 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-default--secondary--500, light-dark(var(--graupl-secondary--500, hsl(235, 15%, 50%)), 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-default--tertiary--500, light-dark(var(--graupl-tertiary--500, hsl(340, 60%, 50%)), 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-default--primary--900, light-dark(var(--graupl-primary--900, hsl(219, 100%, 10%)), var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\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 component 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// --graupl-icon-display\n$icon-display: var(\n --#{root-defaults.$prefix}icon-display,\n #{defaults.$icon-display}\n);\n\n// --graupl-icon-size\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n\n// --graupl-icon-width\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n\n// --graupl-icon-height\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n\n// --graupl-icon-color\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n\n// --graupl-icon\n$icon: var(--#{root-defaults.$prefix}icon, none);\n\n// --graupl-icon-spacer\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/// Applies styles to a specific color scheme.\n///\n/// @param {string} $scheme-name\n/// The name of the scheme to apply the styles to.\n@mixin scheme($scheme-name) {\n #{color-defaults.$scheme-selector-base}#{color-defaults.$scheme-selector-prefix}#{$scheme-name}#{color-defaults.$scheme-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/icon.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.theme{.button.icon,.button.icon-before,.button.icon-after{--graupl-icon-color:var(--graupl-button-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))))))}.button.icon:visited,.button.icon-before:visited,.button.icon-after:visited,.button.icon.visited,.button.icon-before.visited,.button.icon-after.visited{--graupl-icon-color:var(--graupl-button-visited-color,var(--graupl-button-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)))))))}.button.icon:focus-visible,.button.icon-before:focus-visible,.button.icon-after:focus-visible,.button.icon.focus,.button.icon-before.focus,.button.icon-after.focus{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-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)))))))}.button.icon:hover,.button.icon-before:hover,.button.icon-after:hover,.button.icon.hover,.button.icon-before.hover,.button.icon-after.hover{--graupl-icon-color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))}.button.icon:active,.button.icon-before:active,.button.icon-after:active,.button.icon.active,.button.icon-before.active,.button.icon-after.active{--graupl-icon-color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.button.icon:disabled,.button.icon-before:disabled,.button.icon-after:disabled,.button.icon:disabled:visited,.button.icon-before:disabled:visited,.button.icon-after:disabled:visited,.button.icon:disabled.visited,.button.icon-before:disabled.visited,.button.icon-after:disabled.visited,.button.icon:disabled:focus-visible,.button.icon-before:disabled:focus-visible,.button.icon-after:disabled:focus-visible,.button.icon:disabled.focus,.button.icon-before:disabled.focus,.button.icon-after:disabled.focus,.button.icon:disabled:hover,.button.icon-before:disabled:hover,.button.icon-after:disabled:hover,.button.icon:disabled.hover,.button.icon-before:disabled.hover,.button.icon-after:disabled.hover,.button.icon:disabled:active,.button.icon-before:disabled:active,.button.icon-after:disabled:active,.button.icon:disabled.active,.button.icon-before:disabled.active,.button.icon-after:disabled.active,.button.icon:disabled[aria-selected=true],.button.icon-before:disabled[aria-selected=true],.button.icon-after:disabled[aria-selected=true],.button.icon:disabled.selected,.button.icon-before:disabled.selected,.button.icon-after:disabled.selected,.button.icon:disabled[aria-current=true],.button.icon-before:disabled[aria-current=true],.button.icon-after:disabled[aria-current=true],.button.icon:disabled.current,.button.icon-before:disabled.current,.button.icon-after:disabled.current,.button.icon[disabled],.button.icon-before[disabled],.button.icon-after[disabled],.button.icon[disabled]:visited,.button.icon-before[disabled]:visited,.button.icon-after[disabled]:visited,.button.icon[disabled].visited,.button.icon-before[disabled].visited,.button.icon-after[disabled].visited,.button.icon[disabled]:focus-visible,.button.icon-before[disabled]:focus-visible,.button.icon-after[disabled]:focus-visible,.button.icon[disabled].focus,.button.icon-before[disabled].focus,.button.icon-after[disabled].focus,.button.icon[disabled]:hover,.button.icon-before[disabled]:hover,.button.icon-after[disabled]:hover,.button.icon[disabled].hover,.button.icon-before[disabled].hover,.button.icon-after[disabled].hover,.button.icon[disabled]:active,.button.icon-before[disabled]:active,.button.icon-after[disabled]:active,.button.icon[disabled].active,.button.icon-before[disabled].active,.button.icon-after[disabled].active,.button.icon[disabled][aria-selected=true],.button.icon-before[disabled][aria-selected=true],.button.icon-after[disabled][aria-selected=true],.button.icon[disabled].selected,.button.icon-before[disabled].selected,.button.icon-after[disabled].selected,.button.icon[disabled][aria-current=true],.button.icon-before[disabled][aria-current=true],.button.icon-after[disabled][aria-current=true],.button.icon[disabled].current,.button.icon-before[disabled].current,.button.icon-after[disabled].current,.button.icon[aria-disabled=true],.button.icon-before[aria-disabled=true],.button.icon-after[aria-disabled=true],.button.icon[aria-disabled=true]:visited,.button.icon-before[aria-disabled=true]:visited,.button.icon-after[aria-disabled=true]:visited,.button.icon[aria-disabled=true].visited,.button.icon-before[aria-disabled=true].visited,.button.icon-after[aria-disabled=true].visited,.button.icon[aria-disabled=true]:focus-visible,.button.icon-before[aria-disabled=true]:focus-visible,.button.icon-after[aria-disabled=true]:focus-visible,.button.icon[aria-disabled=true].focus,.button.icon-before[aria-disabled=true].focus,.button.icon-after[aria-disabled=true].focus,.button.icon[aria-disabled=true]:hover,.button.icon-before[aria-disabled=true]:hover,.button.icon-after[aria-disabled=true]:hover,.button.icon[aria-disabled=true].hover,.button.icon-before[aria-disabled=true].hover,.button.icon-after[aria-disabled=true].hover,.button.icon[aria-disabled=true]:active,.button.icon-before[aria-disabled=true]:active,.button.icon-after[aria-disabled=true]:active,.button.icon[aria-disabled=true].active,.button.icon-before[aria-disabled=true].active,.button.icon-after[aria-disabled=true].active,.button.icon[aria-disabled=true][aria-selected=true],.button.icon-before[aria-disabled=true][aria-selected=true],.button.icon-after[aria-disabled=true][aria-selected=true],.button.icon[aria-disabled=true].selected,.button.icon-before[aria-disabled=true].selected,.button.icon-after[aria-disabled=true].selected,.button.icon[aria-disabled=true][aria-current=true],.button.icon-before[aria-disabled=true][aria-current=true],.button.icon-after[aria-disabled=true][aria-current=true],.button.icon[aria-disabled=true].current,.button.icon-before[aria-disabled=true].current,.button.icon-after[aria-disabled=true].current,.button.icon.disabled,.button.icon-before.disabled,.button.icon-after.disabled,.button.icon.disabled:visited,.button.icon-before.disabled:visited,.button.icon-after.disabled:visited,.button.icon.disabled.visited,.button.icon-before.disabled.visited,.button.icon-after.disabled.visited,.button.icon.disabled:focus-visible,.button.icon-before.disabled:focus-visible,.button.icon-after.disabled:focus-visible,.button.icon.disabled.focus,.button.icon-before.disabled.focus,.button.icon-after.disabled.focus,.button.icon.disabled:hover,.button.icon-before.disabled:hover,.button.icon-after.disabled:hover,.button.icon.disabled.hover,.button.icon-before.disabled.hover,.button.icon-after.disabled.hover,.button.icon.disabled:active,.button.icon-before.disabled:active,.button.icon-after.disabled:active,.button.icon.disabled.active,.button.icon-before.disabled.active,.button.icon-after.disabled.active,.button.icon.disabled[aria-selected=true],.button.icon-before.disabled[aria-selected=true],.button.icon-after.disabled[aria-selected=true],.button.icon.disabled.selected,.button.icon-before.disabled.selected,.button.icon-after.disabled.selected,.button.icon.disabled[aria-current=true],.button.icon-before.disabled[aria-current=true],.button.icon-after.disabled[aria-current=true],.button.icon.disabled.current,.button.icon-before.disabled.current,.button.icon-after.disabled.current{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.icon[aria-selected=true],.button.icon-before[aria-selected=true],.button.icon-after[aria-selected=true],.button.icon.selected,.button.icon-before.selected,.button.icon-after.selected,.button.icon[aria-current=true],.button.icon-before[aria-current=true],.button.icon-after[aria-current=true],.button.icon.current,.button.icon-before.current,.button.icon-after.current{--graupl-icon-color: }.button.icon.primary,.button.icon-before.primary,.button.icon-after.primary{--graupl-icon-color:var(--graupl-button-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))))))}.button.icon.primary:visited,.button.icon-before.primary:visited,.button.icon-after.primary:visited,.button.icon.primary.visited,.button.icon-before.primary.visited,.button.icon-after.primary.visited{--graupl-icon-color:var(--graupl-button-visited-color,var(--graupl-button-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)))))))}.button.icon.primary:focus-visible,.button.icon-before.primary:focus-visible,.button.icon-after.primary:focus-visible,.button.icon.primary.focus,.button.icon-before.primary.focus,.button.icon-after.primary.focus{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-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)))))))}.button.icon.primary:hover,.button.icon-before.primary:hover,.button.icon-after.primary:hover,.button.icon.primary.hover,.button.icon-before.primary.hover,.button.icon-after.primary.hover{--graupl-icon-color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))}.button.icon.primary:active,.button.icon-before.primary:active,.button.icon-after.primary:active,.button.icon.primary.active,.button.icon-before.primary.active,.button.icon-after.primary.active{--graupl-icon-color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.button.icon.primary:disabled,.button.icon-before.primary:disabled,.button.icon-after.primary:disabled,.button.icon.primary:disabled:visited,.button.icon-before.primary:disabled:visited,.button.icon-after.primary:disabled:visited,.button.icon.primary:disabled.visited,.button.icon-before.primary:disabled.visited,.button.icon-after.primary:disabled.visited,.button.icon.primary:disabled:focus-visible,.button.icon-before.primary:disabled:focus-visible,.button.icon-after.primary:disabled:focus-visible,.button.icon.primary:disabled.focus,.button.icon-before.primary:disabled.focus,.button.icon-after.primary:disabled.focus,.button.icon.primary:disabled:hover,.button.icon-before.primary:disabled:hover,.button.icon-after.primary:disabled:hover,.button.icon.primary:disabled.hover,.button.icon-before.primary:disabled.hover,.button.icon-after.primary:disabled.hover,.button.icon.primary:disabled:active,.button.icon-before.primary:disabled:active,.button.icon-after.primary:disabled:active,.button.icon.primary:disabled.active,.button.icon-before.primary:disabled.active,.button.icon-after.primary:disabled.active,.button.icon.primary:disabled[aria-selected=true],.button.icon-before.primary:disabled[aria-selected=true],.button.icon-after.primary:disabled[aria-selected=true],.button.icon.primary:disabled.selected,.button.icon-before.primary:disabled.selected,.button.icon-after.primary:disabled.selected,.button.icon.primary:disabled[aria-current=true],.button.icon-before.primary:disabled[aria-current=true],.button.icon-after.primary:disabled[aria-current=true],.button.icon.primary:disabled.current,.button.icon-before.primary:disabled.current,.button.icon-after.primary:disabled.current,.button.icon.primary[disabled],.button.icon-before.primary[disabled],.button.icon-after.primary[disabled],.button.icon.primary[disabled]:visited,.button.icon-before.primary[disabled]:visited,.button.icon-after.primary[disabled]:visited,.button.icon.primary[disabled].visited,.button.icon-before.primary[disabled].visited,.button.icon-after.primary[disabled].visited,.button.icon.primary[disabled]:focus-visible,.button.icon-before.primary[disabled]:focus-visible,.button.icon-after.primary[disabled]:focus-visible,.button.icon.primary[disabled].focus,.button.icon-before.primary[disabled].focus,.button.icon-after.primary[disabled].focus,.button.icon.primary[disabled]:hover,.button.icon-before.primary[disabled]:hover,.button.icon-after.primary[disabled]:hover,.button.icon.primary[disabled].hover,.button.icon-before.primary[disabled].hover,.button.icon-after.primary[disabled].hover,.button.icon.primary[disabled]:active,.button.icon-before.primary[disabled]:active,.button.icon-after.primary[disabled]:active,.button.icon.primary[disabled].active,.button.icon-before.primary[disabled].active,.button.icon-after.primary[disabled].active,.button.icon.primary[disabled][aria-selected=true],.button.icon-before.primary[disabled][aria-selected=true],.button.icon-after.primary[disabled][aria-selected=true],.button.icon.primary[disabled].selected,.button.icon-before.primary[disabled].selected,.button.icon-after.primary[disabled].selected,.button.icon.primary[disabled][aria-current=true],.button.icon-before.primary[disabled][aria-current=true],.button.icon-after.primary[disabled][aria-current=true],.button.icon.primary[disabled].current,.button.icon-before.primary[disabled].current,.button.icon-after.primary[disabled].current,.button.icon.primary[aria-disabled=true],.button.icon-before.primary[aria-disabled=true],.button.icon-after.primary[aria-disabled=true],.button.icon.primary[aria-disabled=true]:visited,.button.icon-before.primary[aria-disabled=true]:visited,.button.icon-after.primary[aria-disabled=true]:visited,.button.icon.primary[aria-disabled=true].visited,.button.icon-before.primary[aria-disabled=true].visited,.button.icon-after.primary[aria-disabled=true].visited,.button.icon.primary[aria-disabled=true]:focus-visible,.button.icon-before.primary[aria-disabled=true]:focus-visible,.button.icon-after.primary[aria-disabled=true]:focus-visible,.button.icon.primary[aria-disabled=true].focus,.button.icon-before.primary[aria-disabled=true].focus,.button.icon-after.primary[aria-disabled=true].focus,.button.icon.primary[aria-disabled=true]:hover,.button.icon-before.primary[aria-disabled=true]:hover,.button.icon-after.primary[aria-disabled=true]:hover,.button.icon.primary[aria-disabled=true].hover,.button.icon-before.primary[aria-disabled=true].hover,.button.icon-after.primary[aria-disabled=true].hover,.button.icon.primary[aria-disabled=true]:active,.button.icon-before.primary[aria-disabled=true]:active,.button.icon-after.primary[aria-disabled=true]:active,.button.icon.primary[aria-disabled=true].active,.button.icon-before.primary[aria-disabled=true].active,.button.icon-after.primary[aria-disabled=true].active,.button.icon.primary[aria-disabled=true][aria-selected=true],.button.icon-before.primary[aria-disabled=true][aria-selected=true],.button.icon-after.primary[aria-disabled=true][aria-selected=true],.button.icon.primary[aria-disabled=true].selected,.button.icon-before.primary[aria-disabled=true].selected,.button.icon-after.primary[aria-disabled=true].selected,.button.icon.primary[aria-disabled=true][aria-current=true],.button.icon-before.primary[aria-disabled=true][aria-current=true],.button.icon-after.primary[aria-disabled=true][aria-current=true],.button.icon.primary[aria-disabled=true].current,.button.icon-before.primary[aria-disabled=true].current,.button.icon-after.primary[aria-disabled=true].current,.button.icon.primary.disabled,.button.icon-before.primary.disabled,.button.icon-after.primary.disabled,.button.icon.primary.disabled:visited,.button.icon-before.primary.disabled:visited,.button.icon-after.primary.disabled:visited,.button.icon.primary.disabled.visited,.button.icon-before.primary.disabled.visited,.button.icon-after.primary.disabled.visited,.button.icon.primary.disabled:focus-visible,.button.icon-before.primary.disabled:focus-visible,.button.icon-after.primary.disabled:focus-visible,.button.icon.primary.disabled.focus,.button.icon-before.primary.disabled.focus,.button.icon-after.primary.disabled.focus,.button.icon.primary.disabled:hover,.button.icon-before.primary.disabled:hover,.button.icon-after.primary.disabled:hover,.button.icon.primary.disabled.hover,.button.icon-before.primary.disabled.hover,.button.icon-after.primary.disabled.hover,.button.icon.primary.disabled:active,.button.icon-before.primary.disabled:active,.button.icon-after.primary.disabled:active,.button.icon.primary.disabled.active,.button.icon-before.primary.disabled.active,.button.icon-after.primary.disabled.active,.button.icon.primary.disabled[aria-selected=true],.button.icon-before.primary.disabled[aria-selected=true],.button.icon-after.primary.disabled[aria-selected=true],.button.icon.primary.disabled.selected,.button.icon-before.primary.disabled.selected,.button.icon-after.primary.disabled.selected,.button.icon.primary.disabled[aria-current=true],.button.icon-before.primary.disabled[aria-current=true],.button.icon-after.primary.disabled[aria-current=true],.button.icon.primary.disabled.current,.button.icon-before.primary.disabled.current,.button.icon-after.primary.disabled.current{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.icon.primary[aria-selected=true],.button.icon-before.primary[aria-selected=true],.button.icon-after.primary[aria-selected=true],.button.icon.primary.selected,.button.icon-before.primary.selected,.button.icon-after.primary.selected,.button.icon.primary[aria-current=true],.button.icon-before.primary[aria-current=true],.button.icon-after.primary[aria-current=true],.button.icon.primary.current,.button.icon-before.primary.current,.button.icon-after.primary.current{--graupl-icon-color: }.button.icon.secondary,.button.icon-before.secondary,.button.icon-after.secondary{--graupl-icon-color:var(--graupl-button-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))))))}.button.icon.secondary:visited,.button.icon-before.secondary:visited,.button.icon-after.secondary:visited,.button.icon.secondary.visited,.button.icon-before.secondary.visited,.button.icon-after.secondary.visited{--graupl-icon-color:var(--graupl-button-visited-color,var(--graupl-button-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)))))))}.button.icon.secondary:focus-visible,.button.icon-before.secondary:focus-visible,.button.icon-after.secondary:focus-visible,.button.icon.secondary.focus,.button.icon-before.secondary.focus,.button.icon-after.secondary.focus{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-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)))))))}.button.icon.secondary:hover,.button.icon-before.secondary:hover,.button.icon-after.secondary:hover,.button.icon.secondary.hover,.button.icon-before.secondary.hover,.button.icon-after.secondary.hover{--graupl-icon-color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))}.button.icon.secondary:active,.button.icon-before.secondary:active,.button.icon-after.secondary:active,.button.icon.secondary.active,.button.icon-before.secondary.active,.button.icon-after.secondary.active{--graupl-icon-color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.button.icon.secondary:disabled,.button.icon-before.secondary:disabled,.button.icon-after.secondary:disabled,.button.icon.secondary:disabled:visited,.button.icon-before.secondary:disabled:visited,.button.icon-after.secondary:disabled:visited,.button.icon.secondary:disabled.visited,.button.icon-before.secondary:disabled.visited,.button.icon-after.secondary:disabled.visited,.button.icon.secondary:disabled:focus-visible,.button.icon-before.secondary:disabled:focus-visible,.button.icon-after.secondary:disabled:focus-visible,.button.icon.secondary:disabled.focus,.button.icon-before.secondary:disabled.focus,.button.icon-after.secondary:disabled.focus,.button.icon.secondary:disabled:hover,.button.icon-before.secondary:disabled:hover,.button.icon-after.secondary:disabled:hover,.button.icon.secondary:disabled.hover,.button.icon-before.secondary:disabled.hover,.button.icon-after.secondary:disabled.hover,.button.icon.secondary:disabled:active,.button.icon-before.secondary:disabled:active,.button.icon-after.secondary:disabled:active,.button.icon.secondary:disabled.active,.button.icon-before.secondary:disabled.active,.button.icon-after.secondary:disabled.active,.button.icon.secondary:disabled[aria-selected=true],.button.icon-before.secondary:disabled[aria-selected=true],.button.icon-after.secondary:disabled[aria-selected=true],.button.icon.secondary:disabled.selected,.button.icon-before.secondary:disabled.selected,.button.icon-after.secondary:disabled.selected,.button.icon.secondary:disabled[aria-current=true],.button.icon-before.secondary:disabled[aria-current=true],.button.icon-after.secondary:disabled[aria-current=true],.button.icon.secondary:disabled.current,.button.icon-before.secondary:disabled.current,.button.icon-after.secondary:disabled.current,.button.icon.secondary[disabled],.button.icon-before.secondary[disabled],.button.icon-after.secondary[disabled],.button.icon.secondary[disabled]:visited,.button.icon-before.secondary[disabled]:visited,.button.icon-after.secondary[disabled]:visited,.button.icon.secondary[disabled].visited,.button.icon-before.secondary[disabled].visited,.button.icon-after.secondary[disabled].visited,.button.icon.secondary[disabled]:focus-visible,.button.icon-before.secondary[disabled]:focus-visible,.button.icon-after.secondary[disabled]:focus-visible,.button.icon.secondary[disabled].focus,.button.icon-before.secondary[disabled].focus,.button.icon-after.secondary[disabled].focus,.button.icon.secondary[disabled]:hover,.button.icon-before.secondary[disabled]:hover,.button.icon-after.secondary[disabled]:hover,.button.icon.secondary[disabled].hover,.button.icon-before.secondary[disabled].hover,.button.icon-after.secondary[disabled].hover,.button.icon.secondary[disabled]:active,.button.icon-before.secondary[disabled]:active,.button.icon-after.secondary[disabled]:active,.button.icon.secondary[disabled].active,.button.icon-before.secondary[disabled].active,.button.icon-after.secondary[disabled].active,.button.icon.secondary[disabled][aria-selected=true],.button.icon-before.secondary[disabled][aria-selected=true],.button.icon-after.secondary[disabled][aria-selected=true],.button.icon.secondary[disabled].selected,.button.icon-before.secondary[disabled].selected,.button.icon-after.secondary[disabled].selected,.button.icon.secondary[disabled][aria-current=true],.button.icon-before.secondary[disabled][aria-current=true],.button.icon-after.secondary[disabled][aria-current=true],.button.icon.secondary[disabled].current,.button.icon-before.secondary[disabled].current,.button.icon-after.secondary[disabled].current,.button.icon.secondary[aria-disabled=true],.button.icon-before.secondary[aria-disabled=true],.button.icon-after.secondary[aria-disabled=true],.button.icon.secondary[aria-disabled=true]:visited,.button.icon-before.secondary[aria-disabled=true]:visited,.button.icon-after.secondary[aria-disabled=true]:visited,.button.icon.secondary[aria-disabled=true].visited,.button.icon-before.secondary[aria-disabled=true].visited,.button.icon-after.secondary[aria-disabled=true].visited,.button.icon.secondary[aria-disabled=true]:focus-visible,.button.icon-before.secondary[aria-disabled=true]:focus-visible,.button.icon-after.secondary[aria-disabled=true]:focus-visible,.button.icon.secondary[aria-disabled=true].focus,.button.icon-before.secondary[aria-disabled=true].focus,.button.icon-after.secondary[aria-disabled=true].focus,.button.icon.secondary[aria-disabled=true]:hover,.button.icon-before.secondary[aria-disabled=true]:hover,.button.icon-after.secondary[aria-disabled=true]:hover,.button.icon.secondary[aria-disabled=true].hover,.button.icon-before.secondary[aria-disabled=true].hover,.button.icon-after.secondary[aria-disabled=true].hover,.button.icon.secondary[aria-disabled=true]:active,.button.icon-before.secondary[aria-disabled=true]:active,.button.icon-after.secondary[aria-disabled=true]:active,.button.icon.secondary[aria-disabled=true].active,.button.icon-before.secondary[aria-disabled=true].active,.button.icon-after.secondary[aria-disabled=true].active,.button.icon.secondary[aria-disabled=true][aria-selected=true],.button.icon-before.secondary[aria-disabled=true][aria-selected=true],.button.icon-after.secondary[aria-disabled=true][aria-selected=true],.button.icon.secondary[aria-disabled=true].selected,.button.icon-before.secondary[aria-disabled=true].selected,.button.icon-after.secondary[aria-disabled=true].selected,.button.icon.secondary[aria-disabled=true][aria-current=true],.button.icon-before.secondary[aria-disabled=true][aria-current=true],.button.icon-after.secondary[aria-disabled=true][aria-current=true],.button.icon.secondary[aria-disabled=true].current,.button.icon-before.secondary[aria-disabled=true].current,.button.icon-after.secondary[aria-disabled=true].current,.button.icon.secondary.disabled,.button.icon-before.secondary.disabled,.button.icon-after.secondary.disabled,.button.icon.secondary.disabled:visited,.button.icon-before.secondary.disabled:visited,.button.icon-after.secondary.disabled:visited,.button.icon.secondary.disabled.visited,.button.icon-before.secondary.disabled.visited,.button.icon-after.secondary.disabled.visited,.button.icon.secondary.disabled:focus-visible,.button.icon-before.secondary.disabled:focus-visible,.button.icon-after.secondary.disabled:focus-visible,.button.icon.secondary.disabled.focus,.button.icon-before.secondary.disabled.focus,.button.icon-after.secondary.disabled.focus,.button.icon.secondary.disabled:hover,.button.icon-before.secondary.disabled:hover,.button.icon-after.secondary.disabled:hover,.button.icon.secondary.disabled.hover,.button.icon-before.secondary.disabled.hover,.button.icon-after.secondary.disabled.hover,.button.icon.secondary.disabled:active,.button.icon-before.secondary.disabled:active,.button.icon-after.secondary.disabled:active,.button.icon.secondary.disabled.active,.button.icon-before.secondary.disabled.active,.button.icon-after.secondary.disabled.active,.button.icon.secondary.disabled[aria-selected=true],.button.icon-before.secondary.disabled[aria-selected=true],.button.icon-after.secondary.disabled[aria-selected=true],.button.icon.secondary.disabled.selected,.button.icon-before.secondary.disabled.selected,.button.icon-after.secondary.disabled.selected,.button.icon.secondary.disabled[aria-current=true],.button.icon-before.secondary.disabled[aria-current=true],.button.icon-after.secondary.disabled[aria-current=true],.button.icon.secondary.disabled.current,.button.icon-before.secondary.disabled.current,.button.icon-after.secondary.disabled.current{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.icon.secondary[aria-selected=true],.button.icon-before.secondary[aria-selected=true],.button.icon-after.secondary[aria-selected=true],.button.icon.secondary.selected,.button.icon-before.secondary.selected,.button.icon-after.secondary.selected,.button.icon.secondary[aria-current=true],.button.icon-before.secondary[aria-current=true],.button.icon-after.secondary[aria-current=true],.button.icon.secondary.current,.button.icon-before.secondary.current,.button.icon-after.secondary.current{--graupl-icon-color: }.button.icon.tertiary,.button.icon-before.tertiary,.button.icon-after.tertiary{--graupl-icon-color:var(--graupl-button-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))))))}.button.icon.tertiary:visited,.button.icon-before.tertiary:visited,.button.icon-after.tertiary:visited,.button.icon.tertiary.visited,.button.icon-before.tertiary.visited,.button.icon-after.tertiary.visited{--graupl-icon-color:var(--graupl-button-visited-color,var(--graupl-button-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)))))))}.button.icon.tertiary:focus-visible,.button.icon-before.tertiary:focus-visible,.button.icon-after.tertiary:focus-visible,.button.icon.tertiary.focus,.button.icon-before.tertiary.focus,.button.icon-after.tertiary.focus{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-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)))))))}.button.icon.tertiary:hover,.button.icon-before.tertiary:hover,.button.icon-after.tertiary:hover,.button.icon.tertiary.hover,.button.icon-before.tertiary.hover,.button.icon-after.tertiary.hover{--graupl-icon-color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))}.button.icon.tertiary:active,.button.icon-before.tertiary:active,.button.icon-after.tertiary:active,.button.icon.tertiary.active,.button.icon-before.tertiary.active,.button.icon-after.tertiary.active{--graupl-icon-color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.button.icon.tertiary:disabled,.button.icon-before.tertiary:disabled,.button.icon-after.tertiary:disabled,.button.icon.tertiary:disabled:visited,.button.icon-before.tertiary:disabled:visited,.button.icon-after.tertiary:disabled:visited,.button.icon.tertiary:disabled.visited,.button.icon-before.tertiary:disabled.visited,.button.icon-after.tertiary:disabled.visited,.button.icon.tertiary:disabled:focus-visible,.button.icon-before.tertiary:disabled:focus-visible,.button.icon-after.tertiary:disabled:focus-visible,.button.icon.tertiary:disabled.focus,.button.icon-before.tertiary:disabled.focus,.button.icon-after.tertiary:disabled.focus,.button.icon.tertiary:disabled:hover,.button.icon-before.tertiary:disabled:hover,.button.icon-after.tertiary:disabled:hover,.button.icon.tertiary:disabled.hover,.button.icon-before.tertiary:disabled.hover,.button.icon-after.tertiary:disabled.hover,.button.icon.tertiary:disabled:active,.button.icon-before.tertiary:disabled:active,.button.icon-after.tertiary:disabled:active,.button.icon.tertiary:disabled.active,.button.icon-before.tertiary:disabled.active,.button.icon-after.tertiary:disabled.active,.button.icon.tertiary:disabled[aria-selected=true],.button.icon-before.tertiary:disabled[aria-selected=true],.button.icon-after.tertiary:disabled[aria-selected=true],.button.icon.tertiary:disabled.selected,.button.icon-before.tertiary:disabled.selected,.button.icon-after.tertiary:disabled.selected,.button.icon.tertiary:disabled[aria-current=true],.button.icon-before.tertiary:disabled[aria-current=true],.button.icon-after.tertiary:disabled[aria-current=true],.button.icon.tertiary:disabled.current,.button.icon-before.tertiary:disabled.current,.button.icon-after.tertiary:disabled.current,.button.icon.tertiary[disabled],.button.icon-before.tertiary[disabled],.button.icon-after.tertiary[disabled],.button.icon.tertiary[disabled]:visited,.button.icon-before.tertiary[disabled]:visited,.button.icon-after.tertiary[disabled]:visited,.button.icon.tertiary[disabled].visited,.button.icon-before.tertiary[disabled].visited,.button.icon-after.tertiary[disabled].visited,.button.icon.tertiary[disabled]:focus-visible,.button.icon-before.tertiary[disabled]:focus-visible,.button.icon-after.tertiary[disabled]:focus-visible,.button.icon.tertiary[disabled].focus,.button.icon-before.tertiary[disabled].focus,.button.icon-after.tertiary[disabled].focus,.button.icon.tertiary[disabled]:hover,.button.icon-before.tertiary[disabled]:hover,.button.icon-after.tertiary[disabled]:hover,.button.icon.tertiary[disabled].hover,.button.icon-before.tertiary[disabled].hover,.button.icon-after.tertiary[disabled].hover,.button.icon.tertiary[disabled]:active,.button.icon-before.tertiary[disabled]:active,.button.icon-after.tertiary[disabled]:active,.button.icon.tertiary[disabled].active,.button.icon-before.tertiary[disabled].active,.button.icon-after.tertiary[disabled].active,.button.icon.tertiary[disabled][aria-selected=true],.button.icon-before.tertiary[disabled][aria-selected=true],.button.icon-after.tertiary[disabled][aria-selected=true],.button.icon.tertiary[disabled].selected,.button.icon-before.tertiary[disabled].selected,.button.icon-after.tertiary[disabled].selected,.button.icon.tertiary[disabled][aria-current=true],.button.icon-before.tertiary[disabled][aria-current=true],.button.icon-after.tertiary[disabled][aria-current=true],.button.icon.tertiary[disabled].current,.button.icon-before.tertiary[disabled].current,.button.icon-after.tertiary[disabled].current,.button.icon.tertiary[aria-disabled=true],.button.icon-before.tertiary[aria-disabled=true],.button.icon-after.tertiary[aria-disabled=true],.button.icon.tertiary[aria-disabled=true]:visited,.button.icon-before.tertiary[aria-disabled=true]:visited,.button.icon-after.tertiary[aria-disabled=true]:visited,.button.icon.tertiary[aria-disabled=true].visited,.button.icon-before.tertiary[aria-disabled=true].visited,.button.icon-after.tertiary[aria-disabled=true].visited,.button.icon.tertiary[aria-disabled=true]:focus-visible,.button.icon-before.tertiary[aria-disabled=true]:focus-visible,.button.icon-after.tertiary[aria-disabled=true]:focus-visible,.button.icon.tertiary[aria-disabled=true].focus,.button.icon-before.tertiary[aria-disabled=true].focus,.button.icon-after.tertiary[aria-disabled=true].focus,.button.icon.tertiary[aria-disabled=true]:hover,.button.icon-before.tertiary[aria-disabled=true]:hover,.button.icon-after.tertiary[aria-disabled=true]:hover,.button.icon.tertiary[aria-disabled=true].hover,.button.icon-before.tertiary[aria-disabled=true].hover,.button.icon-after.tertiary[aria-disabled=true].hover,.button.icon.tertiary[aria-disabled=true]:active,.button.icon-before.tertiary[aria-disabled=true]:active,.button.icon-after.tertiary[aria-disabled=true]:active,.button.icon.tertiary[aria-disabled=true].active,.button.icon-before.tertiary[aria-disabled=true].active,.button.icon-after.tertiary[aria-disabled=true].active,.button.icon.tertiary[aria-disabled=true][aria-selected=true],.button.icon-before.tertiary[aria-disabled=true][aria-selected=true],.button.icon-after.tertiary[aria-disabled=true][aria-selected=true],.button.icon.tertiary[aria-disabled=true].selected,.button.icon-before.tertiary[aria-disabled=true].selected,.button.icon-after.tertiary[aria-disabled=true].selected,.button.icon.tertiary[aria-disabled=true][aria-current=true],.button.icon-before.tertiary[aria-disabled=true][aria-current=true],.button.icon-after.tertiary[aria-disabled=true][aria-current=true],.button.icon.tertiary[aria-disabled=true].current,.button.icon-before.tertiary[aria-disabled=true].current,.button.icon-after.tertiary[aria-disabled=true].current,.button.icon.tertiary.disabled,.button.icon-before.tertiary.disabled,.button.icon-after.tertiary.disabled,.button.icon.tertiary.disabled:visited,.button.icon-before.tertiary.disabled:visited,.button.icon-after.tertiary.disabled:visited,.button.icon.tertiary.disabled.visited,.button.icon-before.tertiary.disabled.visited,.button.icon-after.tertiary.disabled.visited,.button.icon.tertiary.disabled:focus-visible,.button.icon-before.tertiary.disabled:focus-visible,.button.icon-after.tertiary.disabled:focus-visible,.button.icon.tertiary.disabled.focus,.button.icon-before.tertiary.disabled.focus,.button.icon-after.tertiary.disabled.focus,.button.icon.tertiary.disabled:hover,.button.icon-before.tertiary.disabled:hover,.button.icon-after.tertiary.disabled:hover,.button.icon.tertiary.disabled.hover,.button.icon-before.tertiary.disabled.hover,.button.icon-after.tertiary.disabled.hover,.button.icon.tertiary.disabled:active,.button.icon-before.tertiary.disabled:active,.button.icon-after.tertiary.disabled:active,.button.icon.tertiary.disabled.active,.button.icon-before.tertiary.disabled.active,.button.icon-after.tertiary.disabled.active,.button.icon.tertiary.disabled[aria-selected=true],.button.icon-before.tertiary.disabled[aria-selected=true],.button.icon-after.tertiary.disabled[aria-selected=true],.button.icon.tertiary.disabled.selected,.button.icon-before.tertiary.disabled.selected,.button.icon-after.tertiary.disabled.selected,.button.icon.tertiary.disabled[aria-current=true],.button.icon-before.tertiary.disabled[aria-current=true],.button.icon-after.tertiary.disabled[aria-current=true],.button.icon.tertiary.disabled.current,.button.icon-before.tertiary.disabled.current,.button.icon-after.tertiary.disabled.current{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.icon.tertiary[aria-selected=true],.button.icon-before.tertiary[aria-selected=true],.button.icon-after.tertiary[aria-selected=true],.button.icon.tertiary.selected,.button.icon-before.tertiary.selected,.button.icon-after.tertiary.selected,.button.icon.tertiary[aria-current=true],.button.icon-before.tertiary[aria-current=true],.button.icon-after.tertiary[aria-current=true],.button.icon.tertiary.current,.button.icon-before.tertiary.current,.button.icon-after.tertiary.current{--graupl-icon-color: }a.icon,a.icon-before,a.icon-after{--graupl-icon-color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a.icon:visited,a.icon-before:visited,a.icon-after:visited,a.icon.visited,a.icon-before.visited,a.icon-after.visited{--graupl-icon-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)))))}a.icon:focus-visible,a.icon-before:focus-visible,a.icon-after:focus-visible,a.icon.focus,a.icon-before.focus,a.icon-after.focus{--graupl-icon-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)))))}a.icon:hover,a.icon-before:hover,a.icon-after:hover,a.icon.hover,a.icon-before.hover,a.icon-after.hover{--graupl-icon-color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a.icon:active,a.icon-before:active,a.icon-after:active,a.icon.active,a.icon-before.active,a.icon-after.active{--graupl-icon-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)))))}a.icon:disabled,a.icon-before:disabled,a.icon-after:disabled,a.icon:disabled:visited,a.icon-before:disabled:visited,a.icon-after:disabled:visited,a.icon:disabled.visited,a.icon-before:disabled.visited,a.icon-after:disabled.visited,a.icon:disabled:focus-visible,a.icon-before:disabled:focus-visible,a.icon-after:disabled:focus-visible,a.icon:disabled.focus,a.icon-before:disabled.focus,a.icon-after:disabled.focus,a.icon:disabled:hover,a.icon-before:disabled:hover,a.icon-after:disabled:hover,a.icon:disabled.hover,a.icon-before:disabled.hover,a.icon-after:disabled.hover,a.icon:disabled:active,a.icon-before:disabled:active,a.icon-after:disabled:active,a.icon:disabled.active,a.icon-before:disabled.active,a.icon-after:disabled.active,a.icon:disabled[aria-selected=true],a.icon-before:disabled[aria-selected=true],a.icon-after:disabled[aria-selected=true],a.icon:disabled.selected,a.icon-before:disabled.selected,a.icon-after:disabled.selected,a.icon:disabled[aria-current=true],a.icon-before:disabled[aria-current=true],a.icon-after:disabled[aria-current=true],a.icon:disabled.current,a.icon-before:disabled.current,a.icon-after:disabled.current,a.icon[disabled],a.icon-before[disabled],a.icon-after[disabled],a.icon[disabled]:visited,a.icon-before[disabled]:visited,a.icon-after[disabled]:visited,a.icon[disabled].visited,a.icon-before[disabled].visited,a.icon-after[disabled].visited,a.icon[disabled]:focus-visible,a.icon-before[disabled]:focus-visible,a.icon-after[disabled]:focus-visible,a.icon[disabled].focus,a.icon-before[disabled].focus,a.icon-after[disabled].focus,a.icon[disabled]:hover,a.icon-before[disabled]:hover,a.icon-after[disabled]:hover,a.icon[disabled].hover,a.icon-before[disabled].hover,a.icon-after[disabled].hover,a.icon[disabled]:active,a.icon-before[disabled]:active,a.icon-after[disabled]:active,a.icon[disabled].active,a.icon-before[disabled].active,a.icon-after[disabled].active,a.icon[disabled][aria-selected=true],a.icon-before[disabled][aria-selected=true],a.icon-after[disabled][aria-selected=true],a.icon[disabled].selected,a.icon-before[disabled].selected,a.icon-after[disabled].selected,a.icon[disabled][aria-current=true],a.icon-before[disabled][aria-current=true],a.icon-after[disabled][aria-current=true],a.icon[disabled].current,a.icon-before[disabled].current,a.icon-after[disabled].current,a.icon[aria-disabled=true],a.icon-before[aria-disabled=true],a.icon-after[aria-disabled=true],a.icon[aria-disabled=true]:visited,a.icon-before[aria-disabled=true]:visited,a.icon-after[aria-disabled=true]:visited,a.icon[aria-disabled=true].visited,a.icon-before[aria-disabled=true].visited,a.icon-after[aria-disabled=true].visited,a.icon[aria-disabled=true]:focus-visible,a.icon-before[aria-disabled=true]:focus-visible,a.icon-after[aria-disabled=true]:focus-visible,a.icon[aria-disabled=true].focus,a.icon-before[aria-disabled=true].focus,a.icon-after[aria-disabled=true].focus,a.icon[aria-disabled=true]:hover,a.icon-before[aria-disabled=true]:hover,a.icon-after[aria-disabled=true]:hover,a.icon[aria-disabled=true].hover,a.icon-before[aria-disabled=true].hover,a.icon-after[aria-disabled=true].hover,a.icon[aria-disabled=true]:active,a.icon-before[aria-disabled=true]:active,a.icon-after[aria-disabled=true]:active,a.icon[aria-disabled=true].active,a.icon-before[aria-disabled=true].active,a.icon-after[aria-disabled=true].active,a.icon[aria-disabled=true][aria-selected=true],a.icon-before[aria-disabled=true][aria-selected=true],a.icon-after[aria-disabled=true][aria-selected=true],a.icon[aria-disabled=true].selected,a.icon-before[aria-disabled=true].selected,a.icon-after[aria-disabled=true].selected,a.icon[aria-disabled=true][aria-current=true],a.icon-before[aria-disabled=true][aria-current=true],a.icon-after[aria-disabled=true][aria-current=true],a.icon[aria-disabled=true].current,a.icon-before[aria-disabled=true].current,a.icon-after[aria-disabled=true].current,a.icon.disabled,a.icon-before.disabled,a.icon-after.disabled,a.icon.disabled:visited,a.icon-before.disabled:visited,a.icon-after.disabled:visited,a.icon.disabled.visited,a.icon-before.disabled.visited,a.icon-after.disabled.visited,a.icon.disabled:focus-visible,a.icon-before.disabled:focus-visible,a.icon-after.disabled:focus-visible,a.icon.disabled.focus,a.icon-before.disabled.focus,a.icon-after.disabled.focus,a.icon.disabled:hover,a.icon-before.disabled:hover,a.icon-after.disabled:hover,a.icon.disabled.hover,a.icon-before.disabled.hover,a.icon-after.disabled.hover,a.icon.disabled:active,a.icon-before.disabled:active,a.icon-after.disabled:active,a.icon.disabled.active,a.icon-before.disabled.active,a.icon-after.disabled.active,a.icon.disabled[aria-selected=true],a.icon-before.disabled[aria-selected=true],a.icon-after.disabled[aria-selected=true],a.icon.disabled.selected,a.icon-before.disabled.selected,a.icon-after.disabled.selected,a.icon.disabled[aria-current=true],a.icon-before.disabled[aria-current=true],a.icon-after.disabled[aria-current=true],a.icon.disabled.current,a.icon-before.disabled.current,a.icon-after.disabled.current{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a.icon[aria-selected=true],a.icon-before[aria-selected=true],a.icon-after[aria-selected=true],a.icon.selected,a.icon-before.selected,a.icon-after.selected,a.icon[aria-current=true],a.icon-before[aria-current=true],a.icon-after[aria-current=true],a.icon.current,a.icon-before.current,a.icon-after.current{--graupl-icon-color: }.icon.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon{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,#001233))))))}.icon-before.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-before.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-before.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-before:before{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,#001233))))))}.icon-after.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-after.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-after.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-after:after{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,#001233))))))}}@layer graupl.component{.icon{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-before:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-after:after{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}
|
|
1
|
+
@layer graupl.theme{.button.icon,.button.icon-before,.button.icon-after{--graupl-icon-color:var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.button.icon:visited,.button.icon-before:visited,.button.icon-after:visited,.button.icon.visited,.button.icon-before.visited,.button.icon-after.visited{--graupl-icon-color:var(--graupl-button-visited-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff))))))))}.button.icon:focus-visible,.button.icon-before:focus-visible,.button.icon-after:focus-visible,.button.icon.focus,.button.icon-before.focus,.button.icon-after.focus{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff))))))))}.button.icon:hover,.button.icon-before:hover,.button.icon-after:hover,.button.icon.hover,.button.icon-before.hover,.button.icon-after.hover{--graupl-icon-color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-default--primary--100,light-dark(var(--graupl-primary--100,#e6eeff),var(--graupl-primary--900,#001233)))))))}.button.icon:active,.button.icon-before:active,.button.icon-after:active,.button.icon.active,.button.icon-before.active,.button.icon-after.active{--graupl-icon-color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-default--primary--100,light-dark(var(--graupl-primary--100,#e6eeff),var(--graupl-primary--900,#001233))))))))}.button.icon:disabled,.button.icon-before:disabled,.button.icon-after:disabled,.button.icon:disabled:visited,.button.icon-before:disabled:visited,.button.icon-after:disabled:visited,.button.icon:disabled.visited,.button.icon-before:disabled.visited,.button.icon-after:disabled.visited,.button.icon:disabled:focus-visible,.button.icon-before:disabled:focus-visible,.button.icon-after:disabled:focus-visible,.button.icon:disabled.focus,.button.icon-before:disabled.focus,.button.icon-after:disabled.focus,.button.icon:disabled:hover,.button.icon-before:disabled:hover,.button.icon-after:disabled:hover,.button.icon:disabled.hover,.button.icon-before:disabled.hover,.button.icon-after:disabled.hover,.button.icon:disabled:active,.button.icon-before:disabled:active,.button.icon-after:disabled:active,.button.icon:disabled.active,.button.icon-before:disabled.active,.button.icon-after:disabled.active,.button.icon:disabled[aria-selected=true],.button.icon-before:disabled[aria-selected=true],.button.icon-after:disabled[aria-selected=true],.button.icon:disabled.selected,.button.icon-before:disabled.selected,.button.icon-after:disabled.selected,.button.icon:disabled[aria-current=true],.button.icon-before:disabled[aria-current=true],.button.icon-after:disabled[aria-current=true],.button.icon:disabled.current,.button.icon-before:disabled.current,.button.icon-after:disabled.current,.button.icon[disabled],.button.icon-before[disabled],.button.icon-after[disabled],.button.icon[disabled]:visited,.button.icon-before[disabled]:visited,.button.icon-after[disabled]:visited,.button.icon[disabled].visited,.button.icon-before[disabled].visited,.button.icon-after[disabled].visited,.button.icon[disabled]:focus-visible,.button.icon-before[disabled]:focus-visible,.button.icon-after[disabled]:focus-visible,.button.icon[disabled].focus,.button.icon-before[disabled].focus,.button.icon-after[disabled].focus,.button.icon[disabled]:hover,.button.icon-before[disabled]:hover,.button.icon-after[disabled]:hover,.button.icon[disabled].hover,.button.icon-before[disabled].hover,.button.icon-after[disabled].hover,.button.icon[disabled]:active,.button.icon-before[disabled]:active,.button.icon-after[disabled]:active,.button.icon[disabled].active,.button.icon-before[disabled].active,.button.icon-after[disabled].active,.button.icon[disabled][aria-selected=true],.button.icon-before[disabled][aria-selected=true],.button.icon-after[disabled][aria-selected=true],.button.icon[disabled].selected,.button.icon-before[disabled].selected,.button.icon-after[disabled].selected,.button.icon[disabled][aria-current=true],.button.icon-before[disabled][aria-current=true],.button.icon-after[disabled][aria-current=true],.button.icon[disabled].current,.button.icon-before[disabled].current,.button.icon-after[disabled].current,.button.icon[aria-disabled=true],.button.icon-before[aria-disabled=true],.button.icon-after[aria-disabled=true],.button.icon[aria-disabled=true]:visited,.button.icon-before[aria-disabled=true]:visited,.button.icon-after[aria-disabled=true]:visited,.button.icon[aria-disabled=true].visited,.button.icon-before[aria-disabled=true].visited,.button.icon-after[aria-disabled=true].visited,.button.icon[aria-disabled=true]:focus-visible,.button.icon-before[aria-disabled=true]:focus-visible,.button.icon-after[aria-disabled=true]:focus-visible,.button.icon[aria-disabled=true].focus,.button.icon-before[aria-disabled=true].focus,.button.icon-after[aria-disabled=true].focus,.button.icon[aria-disabled=true]:hover,.button.icon-before[aria-disabled=true]:hover,.button.icon-after[aria-disabled=true]:hover,.button.icon[aria-disabled=true].hover,.button.icon-before[aria-disabled=true].hover,.button.icon-after[aria-disabled=true].hover,.button.icon[aria-disabled=true]:active,.button.icon-before[aria-disabled=true]:active,.button.icon-after[aria-disabled=true]:active,.button.icon[aria-disabled=true].active,.button.icon-before[aria-disabled=true].active,.button.icon-after[aria-disabled=true].active,.button.icon[aria-disabled=true][aria-selected=true],.button.icon-before[aria-disabled=true][aria-selected=true],.button.icon-after[aria-disabled=true][aria-selected=true],.button.icon[aria-disabled=true].selected,.button.icon-before[aria-disabled=true].selected,.button.icon-after[aria-disabled=true].selected,.button.icon[aria-disabled=true][aria-current=true],.button.icon-before[aria-disabled=true][aria-current=true],.button.icon-after[aria-disabled=true][aria-current=true],.button.icon[aria-disabled=true].current,.button.icon-before[aria-disabled=true].current,.button.icon-after[aria-disabled=true].current,.button.icon.disabled,.button.icon-before.disabled,.button.icon-after.disabled,.button.icon.disabled:visited,.button.icon-before.disabled:visited,.button.icon-after.disabled:visited,.button.icon.disabled.visited,.button.icon-before.disabled.visited,.button.icon-after.disabled.visited,.button.icon.disabled:focus-visible,.button.icon-before.disabled:focus-visible,.button.icon-after.disabled:focus-visible,.button.icon.disabled.focus,.button.icon-before.disabled.focus,.button.icon-after.disabled.focus,.button.icon.disabled:hover,.button.icon-before.disabled:hover,.button.icon-after.disabled:hover,.button.icon.disabled.hover,.button.icon-before.disabled.hover,.button.icon-after.disabled.hover,.button.icon.disabled:active,.button.icon-before.disabled:active,.button.icon-after.disabled:active,.button.icon.disabled.active,.button.icon-before.disabled.active,.button.icon-after.disabled.active,.button.icon.disabled[aria-selected=true],.button.icon-before.disabled[aria-selected=true],.button.icon-after.disabled[aria-selected=true],.button.icon.disabled.selected,.button.icon-before.disabled.selected,.button.icon-after.disabled.selected,.button.icon.disabled[aria-current=true],.button.icon-before.disabled[aria-current=true],.button.icon-after.disabled[aria-current=true],.button.icon.disabled.current,.button.icon-before.disabled.current,.button.icon-after.disabled.current{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-default--primary--200,light-dark(var(--graupl-primary--200,#9ebefa),var(--graupl-primary--800,#052561)))))}.button.icon[aria-selected=true],.button.icon-before[aria-selected=true],.button.icon-after[aria-selected=true],.button.icon.selected,.button.icon-before.selected,.button.icon-after.selected,.button.icon[aria-current=true],.button.icon-before[aria-current=true],.button.icon-after[aria-current=true],.button.icon.current,.button.icon-before.current,.button.icon-after.current{--graupl-icon-color: }.button.icon.primary,.button.icon-before.primary,.button.icon-after.primary{--graupl-icon-color:var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.button.icon.primary:visited,.button.icon-before.primary:visited,.button.icon-after.primary:visited,.button.icon.primary.visited,.button.icon-before.primary.visited,.button.icon-after.primary.visited{--graupl-icon-color:var(--graupl-button-visited-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff))))))))}.button.icon.primary:focus-visible,.button.icon-before.primary:focus-visible,.button.icon-after.primary:focus-visible,.button.icon.primary.focus,.button.icon-before.primary.focus,.button.icon-after.primary.focus{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff))))))))}.button.icon.primary:hover,.button.icon-before.primary:hover,.button.icon-after.primary:hover,.button.icon.primary.hover,.button.icon-before.primary.hover,.button.icon-after.primary.hover{--graupl-icon-color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-default--primary--100,light-dark(var(--graupl-primary--100,#e6eeff),var(--graupl-primary--900,#001233)))))))}.button.icon.primary:active,.button.icon-before.primary:active,.button.icon-after.primary:active,.button.icon.primary.active,.button.icon-before.primary.active,.button.icon-after.primary.active{--graupl-icon-color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-default--primary--100,light-dark(var(--graupl-primary--100,#e6eeff),var(--graupl-primary--900,#001233))))))))}.button.icon.primary:disabled,.button.icon-before.primary:disabled,.button.icon-after.primary:disabled,.button.icon.primary:disabled:visited,.button.icon-before.primary:disabled:visited,.button.icon-after.primary:disabled:visited,.button.icon.primary:disabled.visited,.button.icon-before.primary:disabled.visited,.button.icon-after.primary:disabled.visited,.button.icon.primary:disabled:focus-visible,.button.icon-before.primary:disabled:focus-visible,.button.icon-after.primary:disabled:focus-visible,.button.icon.primary:disabled.focus,.button.icon-before.primary:disabled.focus,.button.icon-after.primary:disabled.focus,.button.icon.primary:disabled:hover,.button.icon-before.primary:disabled:hover,.button.icon-after.primary:disabled:hover,.button.icon.primary:disabled.hover,.button.icon-before.primary:disabled.hover,.button.icon-after.primary:disabled.hover,.button.icon.primary:disabled:active,.button.icon-before.primary:disabled:active,.button.icon-after.primary:disabled:active,.button.icon.primary:disabled.active,.button.icon-before.primary:disabled.active,.button.icon-after.primary:disabled.active,.button.icon.primary:disabled[aria-selected=true],.button.icon-before.primary:disabled[aria-selected=true],.button.icon-after.primary:disabled[aria-selected=true],.button.icon.primary:disabled.selected,.button.icon-before.primary:disabled.selected,.button.icon-after.primary:disabled.selected,.button.icon.primary:disabled[aria-current=true],.button.icon-before.primary:disabled[aria-current=true],.button.icon-after.primary:disabled[aria-current=true],.button.icon.primary:disabled.current,.button.icon-before.primary:disabled.current,.button.icon-after.primary:disabled.current,.button.icon.primary[disabled],.button.icon-before.primary[disabled],.button.icon-after.primary[disabled],.button.icon.primary[disabled]:visited,.button.icon-before.primary[disabled]:visited,.button.icon-after.primary[disabled]:visited,.button.icon.primary[disabled].visited,.button.icon-before.primary[disabled].visited,.button.icon-after.primary[disabled].visited,.button.icon.primary[disabled]:focus-visible,.button.icon-before.primary[disabled]:focus-visible,.button.icon-after.primary[disabled]:focus-visible,.button.icon.primary[disabled].focus,.button.icon-before.primary[disabled].focus,.button.icon-after.primary[disabled].focus,.button.icon.primary[disabled]:hover,.button.icon-before.primary[disabled]:hover,.button.icon-after.primary[disabled]:hover,.button.icon.primary[disabled].hover,.button.icon-before.primary[disabled].hover,.button.icon-after.primary[disabled].hover,.button.icon.primary[disabled]:active,.button.icon-before.primary[disabled]:active,.button.icon-after.primary[disabled]:active,.button.icon.primary[disabled].active,.button.icon-before.primary[disabled].active,.button.icon-after.primary[disabled].active,.button.icon.primary[disabled][aria-selected=true],.button.icon-before.primary[disabled][aria-selected=true],.button.icon-after.primary[disabled][aria-selected=true],.button.icon.primary[disabled].selected,.button.icon-before.primary[disabled].selected,.button.icon-after.primary[disabled].selected,.button.icon.primary[disabled][aria-current=true],.button.icon-before.primary[disabled][aria-current=true],.button.icon-after.primary[disabled][aria-current=true],.button.icon.primary[disabled].current,.button.icon-before.primary[disabled].current,.button.icon-after.primary[disabled].current,.button.icon.primary[aria-disabled=true],.button.icon-before.primary[aria-disabled=true],.button.icon-after.primary[aria-disabled=true],.button.icon.primary[aria-disabled=true]:visited,.button.icon-before.primary[aria-disabled=true]:visited,.button.icon-after.primary[aria-disabled=true]:visited,.button.icon.primary[aria-disabled=true].visited,.button.icon-before.primary[aria-disabled=true].visited,.button.icon-after.primary[aria-disabled=true].visited,.button.icon.primary[aria-disabled=true]:focus-visible,.button.icon-before.primary[aria-disabled=true]:focus-visible,.button.icon-after.primary[aria-disabled=true]:focus-visible,.button.icon.primary[aria-disabled=true].focus,.button.icon-before.primary[aria-disabled=true].focus,.button.icon-after.primary[aria-disabled=true].focus,.button.icon.primary[aria-disabled=true]:hover,.button.icon-before.primary[aria-disabled=true]:hover,.button.icon-after.primary[aria-disabled=true]:hover,.button.icon.primary[aria-disabled=true].hover,.button.icon-before.primary[aria-disabled=true].hover,.button.icon-after.primary[aria-disabled=true].hover,.button.icon.primary[aria-disabled=true]:active,.button.icon-before.primary[aria-disabled=true]:active,.button.icon-after.primary[aria-disabled=true]:active,.button.icon.primary[aria-disabled=true].active,.button.icon-before.primary[aria-disabled=true].active,.button.icon-after.primary[aria-disabled=true].active,.button.icon.primary[aria-disabled=true][aria-selected=true],.button.icon-before.primary[aria-disabled=true][aria-selected=true],.button.icon-after.primary[aria-disabled=true][aria-selected=true],.button.icon.primary[aria-disabled=true].selected,.button.icon-before.primary[aria-disabled=true].selected,.button.icon-after.primary[aria-disabled=true].selected,.button.icon.primary[aria-disabled=true][aria-current=true],.button.icon-before.primary[aria-disabled=true][aria-current=true],.button.icon-after.primary[aria-disabled=true][aria-current=true],.button.icon.primary[aria-disabled=true].current,.button.icon-before.primary[aria-disabled=true].current,.button.icon-after.primary[aria-disabled=true].current,.button.icon.primary.disabled,.button.icon-before.primary.disabled,.button.icon-after.primary.disabled,.button.icon.primary.disabled:visited,.button.icon-before.primary.disabled:visited,.button.icon-after.primary.disabled:visited,.button.icon.primary.disabled.visited,.button.icon-before.primary.disabled.visited,.button.icon-after.primary.disabled.visited,.button.icon.primary.disabled:focus-visible,.button.icon-before.primary.disabled:focus-visible,.button.icon-after.primary.disabled:focus-visible,.button.icon.primary.disabled.focus,.button.icon-before.primary.disabled.focus,.button.icon-after.primary.disabled.focus,.button.icon.primary.disabled:hover,.button.icon-before.primary.disabled:hover,.button.icon-after.primary.disabled:hover,.button.icon.primary.disabled.hover,.button.icon-before.primary.disabled.hover,.button.icon-after.primary.disabled.hover,.button.icon.primary.disabled:active,.button.icon-before.primary.disabled:active,.button.icon-after.primary.disabled:active,.button.icon.primary.disabled.active,.button.icon-before.primary.disabled.active,.button.icon-after.primary.disabled.active,.button.icon.primary.disabled[aria-selected=true],.button.icon-before.primary.disabled[aria-selected=true],.button.icon-after.primary.disabled[aria-selected=true],.button.icon.primary.disabled.selected,.button.icon-before.primary.disabled.selected,.button.icon-after.primary.disabled.selected,.button.icon.primary.disabled[aria-current=true],.button.icon-before.primary.disabled[aria-current=true],.button.icon-after.primary.disabled[aria-current=true],.button.icon.primary.disabled.current,.button.icon-before.primary.disabled.current,.button.icon-after.primary.disabled.current{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-default--primary--200,light-dark(var(--graupl-primary--200,#9ebefa),var(--graupl-primary--800,#052561)))))}.button.icon.primary[aria-selected=true],.button.icon-before.primary[aria-selected=true],.button.icon-after.primary[aria-selected=true],.button.icon.primary.selected,.button.icon-before.primary.selected,.button.icon-after.primary.selected,.button.icon.primary[aria-current=true],.button.icon-before.primary[aria-current=true],.button.icon-after.primary[aria-current=true],.button.icon.primary.current,.button.icon-before.primary.current,.button.icon-after.primary.current{--graupl-icon-color: }.button.icon.secondary,.button.icon-before.secondary,.button.icon-after.secondary{--graupl-icon-color:var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.button.icon.secondary:visited,.button.icon-before.secondary:visited,.button.icon-after.secondary:visited,.button.icon.secondary.visited,.button.icon-before.secondary.visited,.button.icon-after.secondary.visited{--graupl-icon-color:var(--graupl-button-visited-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff))))))))}.button.icon.secondary:focus-visible,.button.icon-before.secondary:focus-visible,.button.icon-after.secondary:focus-visible,.button.icon.secondary.focus,.button.icon-before.secondary.focus,.button.icon-after.secondary.focus{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff))))))))}.button.icon.secondary:hover,.button.icon-before.secondary:hover,.button.icon-after.secondary:hover,.button.icon.secondary.hover,.button.icon-before.secondary.hover,.button.icon-after.secondary.hover{--graupl-icon-color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-default--primary--100,light-dark(var(--graupl-primary--100,#e6eeff),var(--graupl-primary--900,#001233)))))))}.button.icon.secondary:active,.button.icon-before.secondary:active,.button.icon-after.secondary:active,.button.icon.secondary.active,.button.icon-before.secondary.active,.button.icon-after.secondary.active{--graupl-icon-color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-default--primary--100,light-dark(var(--graupl-primary--100,#e6eeff),var(--graupl-primary--900,#001233))))))))}.button.icon.secondary:disabled,.button.icon-before.secondary:disabled,.button.icon-after.secondary:disabled,.button.icon.secondary:disabled:visited,.button.icon-before.secondary:disabled:visited,.button.icon-after.secondary:disabled:visited,.button.icon.secondary:disabled.visited,.button.icon-before.secondary:disabled.visited,.button.icon-after.secondary:disabled.visited,.button.icon.secondary:disabled:focus-visible,.button.icon-before.secondary:disabled:focus-visible,.button.icon-after.secondary:disabled:focus-visible,.button.icon.secondary:disabled.focus,.button.icon-before.secondary:disabled.focus,.button.icon-after.secondary:disabled.focus,.button.icon.secondary:disabled:hover,.button.icon-before.secondary:disabled:hover,.button.icon-after.secondary:disabled:hover,.button.icon.secondary:disabled.hover,.button.icon-before.secondary:disabled.hover,.button.icon-after.secondary:disabled.hover,.button.icon.secondary:disabled:active,.button.icon-before.secondary:disabled:active,.button.icon-after.secondary:disabled:active,.button.icon.secondary:disabled.active,.button.icon-before.secondary:disabled.active,.button.icon-after.secondary:disabled.active,.button.icon.secondary:disabled[aria-selected=true],.button.icon-before.secondary:disabled[aria-selected=true],.button.icon-after.secondary:disabled[aria-selected=true],.button.icon.secondary:disabled.selected,.button.icon-before.secondary:disabled.selected,.button.icon-after.secondary:disabled.selected,.button.icon.secondary:disabled[aria-current=true],.button.icon-before.secondary:disabled[aria-current=true],.button.icon-after.secondary:disabled[aria-current=true],.button.icon.secondary:disabled.current,.button.icon-before.secondary:disabled.current,.button.icon-after.secondary:disabled.current,.button.icon.secondary[disabled],.button.icon-before.secondary[disabled],.button.icon-after.secondary[disabled],.button.icon.secondary[disabled]:visited,.button.icon-before.secondary[disabled]:visited,.button.icon-after.secondary[disabled]:visited,.button.icon.secondary[disabled].visited,.button.icon-before.secondary[disabled].visited,.button.icon-after.secondary[disabled].visited,.button.icon.secondary[disabled]:focus-visible,.button.icon-before.secondary[disabled]:focus-visible,.button.icon-after.secondary[disabled]:focus-visible,.button.icon.secondary[disabled].focus,.button.icon-before.secondary[disabled].focus,.button.icon-after.secondary[disabled].focus,.button.icon.secondary[disabled]:hover,.button.icon-before.secondary[disabled]:hover,.button.icon-after.secondary[disabled]:hover,.button.icon.secondary[disabled].hover,.button.icon-before.secondary[disabled].hover,.button.icon-after.secondary[disabled].hover,.button.icon.secondary[disabled]:active,.button.icon-before.secondary[disabled]:active,.button.icon-after.secondary[disabled]:active,.button.icon.secondary[disabled].active,.button.icon-before.secondary[disabled].active,.button.icon-after.secondary[disabled].active,.button.icon.secondary[disabled][aria-selected=true],.button.icon-before.secondary[disabled][aria-selected=true],.button.icon-after.secondary[disabled][aria-selected=true],.button.icon.secondary[disabled].selected,.button.icon-before.secondary[disabled].selected,.button.icon-after.secondary[disabled].selected,.button.icon.secondary[disabled][aria-current=true],.button.icon-before.secondary[disabled][aria-current=true],.button.icon-after.secondary[disabled][aria-current=true],.button.icon.secondary[disabled].current,.button.icon-before.secondary[disabled].current,.button.icon-after.secondary[disabled].current,.button.icon.secondary[aria-disabled=true],.button.icon-before.secondary[aria-disabled=true],.button.icon-after.secondary[aria-disabled=true],.button.icon.secondary[aria-disabled=true]:visited,.button.icon-before.secondary[aria-disabled=true]:visited,.button.icon-after.secondary[aria-disabled=true]:visited,.button.icon.secondary[aria-disabled=true].visited,.button.icon-before.secondary[aria-disabled=true].visited,.button.icon-after.secondary[aria-disabled=true].visited,.button.icon.secondary[aria-disabled=true]:focus-visible,.button.icon-before.secondary[aria-disabled=true]:focus-visible,.button.icon-after.secondary[aria-disabled=true]:focus-visible,.button.icon.secondary[aria-disabled=true].focus,.button.icon-before.secondary[aria-disabled=true].focus,.button.icon-after.secondary[aria-disabled=true].focus,.button.icon.secondary[aria-disabled=true]:hover,.button.icon-before.secondary[aria-disabled=true]:hover,.button.icon-after.secondary[aria-disabled=true]:hover,.button.icon.secondary[aria-disabled=true].hover,.button.icon-before.secondary[aria-disabled=true].hover,.button.icon-after.secondary[aria-disabled=true].hover,.button.icon.secondary[aria-disabled=true]:active,.button.icon-before.secondary[aria-disabled=true]:active,.button.icon-after.secondary[aria-disabled=true]:active,.button.icon.secondary[aria-disabled=true].active,.button.icon-before.secondary[aria-disabled=true].active,.button.icon-after.secondary[aria-disabled=true].active,.button.icon.secondary[aria-disabled=true][aria-selected=true],.button.icon-before.secondary[aria-disabled=true][aria-selected=true],.button.icon-after.secondary[aria-disabled=true][aria-selected=true],.button.icon.secondary[aria-disabled=true].selected,.button.icon-before.secondary[aria-disabled=true].selected,.button.icon-after.secondary[aria-disabled=true].selected,.button.icon.secondary[aria-disabled=true][aria-current=true],.button.icon-before.secondary[aria-disabled=true][aria-current=true],.button.icon-after.secondary[aria-disabled=true][aria-current=true],.button.icon.secondary[aria-disabled=true].current,.button.icon-before.secondary[aria-disabled=true].current,.button.icon-after.secondary[aria-disabled=true].current,.button.icon.secondary.disabled,.button.icon-before.secondary.disabled,.button.icon-after.secondary.disabled,.button.icon.secondary.disabled:visited,.button.icon-before.secondary.disabled:visited,.button.icon-after.secondary.disabled:visited,.button.icon.secondary.disabled.visited,.button.icon-before.secondary.disabled.visited,.button.icon-after.secondary.disabled.visited,.button.icon.secondary.disabled:focus-visible,.button.icon-before.secondary.disabled:focus-visible,.button.icon-after.secondary.disabled:focus-visible,.button.icon.secondary.disabled.focus,.button.icon-before.secondary.disabled.focus,.button.icon-after.secondary.disabled.focus,.button.icon.secondary.disabled:hover,.button.icon-before.secondary.disabled:hover,.button.icon-after.secondary.disabled:hover,.button.icon.secondary.disabled.hover,.button.icon-before.secondary.disabled.hover,.button.icon-after.secondary.disabled.hover,.button.icon.secondary.disabled:active,.button.icon-before.secondary.disabled:active,.button.icon-after.secondary.disabled:active,.button.icon.secondary.disabled.active,.button.icon-before.secondary.disabled.active,.button.icon-after.secondary.disabled.active,.button.icon.secondary.disabled[aria-selected=true],.button.icon-before.secondary.disabled[aria-selected=true],.button.icon-after.secondary.disabled[aria-selected=true],.button.icon.secondary.disabled.selected,.button.icon-before.secondary.disabled.selected,.button.icon-after.secondary.disabled.selected,.button.icon.secondary.disabled[aria-current=true],.button.icon-before.secondary.disabled[aria-current=true],.button.icon-after.secondary.disabled[aria-current=true],.button.icon.secondary.disabled.current,.button.icon-before.secondary.disabled.current,.button.icon-after.secondary.disabled.current{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-default--primary--200,light-dark(var(--graupl-primary--200,#9ebefa),var(--graupl-primary--800,#052561)))))}.button.icon.secondary[aria-selected=true],.button.icon-before.secondary[aria-selected=true],.button.icon-after.secondary[aria-selected=true],.button.icon.secondary.selected,.button.icon-before.secondary.selected,.button.icon-after.secondary.selected,.button.icon.secondary[aria-current=true],.button.icon-before.secondary[aria-current=true],.button.icon-after.secondary[aria-current=true],.button.icon.secondary.current,.button.icon-before.secondary.current,.button.icon-after.secondary.current{--graupl-icon-color: }.button.icon.tertiary,.button.icon-before.tertiary,.button.icon-after.tertiary{--graupl-icon-color:var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.button.icon.tertiary:visited,.button.icon-before.tertiary:visited,.button.icon-after.tertiary:visited,.button.icon.tertiary.visited,.button.icon-before.tertiary.visited,.button.icon-after.tertiary.visited{--graupl-icon-color:var(--graupl-button-visited-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff))))))))}.button.icon.tertiary:focus-visible,.button.icon-before.tertiary:focus-visible,.button.icon-after.tertiary:focus-visible,.button.icon.tertiary.focus,.button.icon-before.tertiary.focus,.button.icon-after.tertiary.focus{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff))))))))}.button.icon.tertiary:hover,.button.icon-before.tertiary:hover,.button.icon-after.tertiary:hover,.button.icon.tertiary.hover,.button.icon-before.tertiary.hover,.button.icon-after.tertiary.hover{--graupl-icon-color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-default--primary--100,light-dark(var(--graupl-primary--100,#e6eeff),var(--graupl-primary--900,#001233)))))))}.button.icon.tertiary:active,.button.icon-before.tertiary:active,.button.icon-after.tertiary:active,.button.icon.tertiary.active,.button.icon-before.tertiary.active,.button.icon-after.tertiary.active{--graupl-icon-color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-default--primary--100,light-dark(var(--graupl-primary--100,#e6eeff),var(--graupl-primary--900,#001233))))))))}.button.icon.tertiary:disabled,.button.icon-before.tertiary:disabled,.button.icon-after.tertiary:disabled,.button.icon.tertiary:disabled:visited,.button.icon-before.tertiary:disabled:visited,.button.icon-after.tertiary:disabled:visited,.button.icon.tertiary:disabled.visited,.button.icon-before.tertiary:disabled.visited,.button.icon-after.tertiary:disabled.visited,.button.icon.tertiary:disabled:focus-visible,.button.icon-before.tertiary:disabled:focus-visible,.button.icon-after.tertiary:disabled:focus-visible,.button.icon.tertiary:disabled.focus,.button.icon-before.tertiary:disabled.focus,.button.icon-after.tertiary:disabled.focus,.button.icon.tertiary:disabled:hover,.button.icon-before.tertiary:disabled:hover,.button.icon-after.tertiary:disabled:hover,.button.icon.tertiary:disabled.hover,.button.icon-before.tertiary:disabled.hover,.button.icon-after.tertiary:disabled.hover,.button.icon.tertiary:disabled:active,.button.icon-before.tertiary:disabled:active,.button.icon-after.tertiary:disabled:active,.button.icon.tertiary:disabled.active,.button.icon-before.tertiary:disabled.active,.button.icon-after.tertiary:disabled.active,.button.icon.tertiary:disabled[aria-selected=true],.button.icon-before.tertiary:disabled[aria-selected=true],.button.icon-after.tertiary:disabled[aria-selected=true],.button.icon.tertiary:disabled.selected,.button.icon-before.tertiary:disabled.selected,.button.icon-after.tertiary:disabled.selected,.button.icon.tertiary:disabled[aria-current=true],.button.icon-before.tertiary:disabled[aria-current=true],.button.icon-after.tertiary:disabled[aria-current=true],.button.icon.tertiary:disabled.current,.button.icon-before.tertiary:disabled.current,.button.icon-after.tertiary:disabled.current,.button.icon.tertiary[disabled],.button.icon-before.tertiary[disabled],.button.icon-after.tertiary[disabled],.button.icon.tertiary[disabled]:visited,.button.icon-before.tertiary[disabled]:visited,.button.icon-after.tertiary[disabled]:visited,.button.icon.tertiary[disabled].visited,.button.icon-before.tertiary[disabled].visited,.button.icon-after.tertiary[disabled].visited,.button.icon.tertiary[disabled]:focus-visible,.button.icon-before.tertiary[disabled]:focus-visible,.button.icon-after.tertiary[disabled]:focus-visible,.button.icon.tertiary[disabled].focus,.button.icon-before.tertiary[disabled].focus,.button.icon-after.tertiary[disabled].focus,.button.icon.tertiary[disabled]:hover,.button.icon-before.tertiary[disabled]:hover,.button.icon-after.tertiary[disabled]:hover,.button.icon.tertiary[disabled].hover,.button.icon-before.tertiary[disabled].hover,.button.icon-after.tertiary[disabled].hover,.button.icon.tertiary[disabled]:active,.button.icon-before.tertiary[disabled]:active,.button.icon-after.tertiary[disabled]:active,.button.icon.tertiary[disabled].active,.button.icon-before.tertiary[disabled].active,.button.icon-after.tertiary[disabled].active,.button.icon.tertiary[disabled][aria-selected=true],.button.icon-before.tertiary[disabled][aria-selected=true],.button.icon-after.tertiary[disabled][aria-selected=true],.button.icon.tertiary[disabled].selected,.button.icon-before.tertiary[disabled].selected,.button.icon-after.tertiary[disabled].selected,.button.icon.tertiary[disabled][aria-current=true],.button.icon-before.tertiary[disabled][aria-current=true],.button.icon-after.tertiary[disabled][aria-current=true],.button.icon.tertiary[disabled].current,.button.icon-before.tertiary[disabled].current,.button.icon-after.tertiary[disabled].current,.button.icon.tertiary[aria-disabled=true],.button.icon-before.tertiary[aria-disabled=true],.button.icon-after.tertiary[aria-disabled=true],.button.icon.tertiary[aria-disabled=true]:visited,.button.icon-before.tertiary[aria-disabled=true]:visited,.button.icon-after.tertiary[aria-disabled=true]:visited,.button.icon.tertiary[aria-disabled=true].visited,.button.icon-before.tertiary[aria-disabled=true].visited,.button.icon-after.tertiary[aria-disabled=true].visited,.button.icon.tertiary[aria-disabled=true]:focus-visible,.button.icon-before.tertiary[aria-disabled=true]:focus-visible,.button.icon-after.tertiary[aria-disabled=true]:focus-visible,.button.icon.tertiary[aria-disabled=true].focus,.button.icon-before.tertiary[aria-disabled=true].focus,.button.icon-after.tertiary[aria-disabled=true].focus,.button.icon.tertiary[aria-disabled=true]:hover,.button.icon-before.tertiary[aria-disabled=true]:hover,.button.icon-after.tertiary[aria-disabled=true]:hover,.button.icon.tertiary[aria-disabled=true].hover,.button.icon-before.tertiary[aria-disabled=true].hover,.button.icon-after.tertiary[aria-disabled=true].hover,.button.icon.tertiary[aria-disabled=true]:active,.button.icon-before.tertiary[aria-disabled=true]:active,.button.icon-after.tertiary[aria-disabled=true]:active,.button.icon.tertiary[aria-disabled=true].active,.button.icon-before.tertiary[aria-disabled=true].active,.button.icon-after.tertiary[aria-disabled=true].active,.button.icon.tertiary[aria-disabled=true][aria-selected=true],.button.icon-before.tertiary[aria-disabled=true][aria-selected=true],.button.icon-after.tertiary[aria-disabled=true][aria-selected=true],.button.icon.tertiary[aria-disabled=true].selected,.button.icon-before.tertiary[aria-disabled=true].selected,.button.icon-after.tertiary[aria-disabled=true].selected,.button.icon.tertiary[aria-disabled=true][aria-current=true],.button.icon-before.tertiary[aria-disabled=true][aria-current=true],.button.icon-after.tertiary[aria-disabled=true][aria-current=true],.button.icon.tertiary[aria-disabled=true].current,.button.icon-before.tertiary[aria-disabled=true].current,.button.icon-after.tertiary[aria-disabled=true].current,.button.icon.tertiary.disabled,.button.icon-before.tertiary.disabled,.button.icon-after.tertiary.disabled,.button.icon.tertiary.disabled:visited,.button.icon-before.tertiary.disabled:visited,.button.icon-after.tertiary.disabled:visited,.button.icon.tertiary.disabled.visited,.button.icon-before.tertiary.disabled.visited,.button.icon-after.tertiary.disabled.visited,.button.icon.tertiary.disabled:focus-visible,.button.icon-before.tertiary.disabled:focus-visible,.button.icon-after.tertiary.disabled:focus-visible,.button.icon.tertiary.disabled.focus,.button.icon-before.tertiary.disabled.focus,.button.icon-after.tertiary.disabled.focus,.button.icon.tertiary.disabled:hover,.button.icon-before.tertiary.disabled:hover,.button.icon-after.tertiary.disabled:hover,.button.icon.tertiary.disabled.hover,.button.icon-before.tertiary.disabled.hover,.button.icon-after.tertiary.disabled.hover,.button.icon.tertiary.disabled:active,.button.icon-before.tertiary.disabled:active,.button.icon-after.tertiary.disabled:active,.button.icon.tertiary.disabled.active,.button.icon-before.tertiary.disabled.active,.button.icon-after.tertiary.disabled.active,.button.icon.tertiary.disabled[aria-selected=true],.button.icon-before.tertiary.disabled[aria-selected=true],.button.icon-after.tertiary.disabled[aria-selected=true],.button.icon.tertiary.disabled.selected,.button.icon-before.tertiary.disabled.selected,.button.icon-after.tertiary.disabled.selected,.button.icon.tertiary.disabled[aria-current=true],.button.icon-before.tertiary.disabled[aria-current=true],.button.icon-after.tertiary.disabled[aria-current=true],.button.icon.tertiary.disabled.current,.button.icon-before.tertiary.disabled.current,.button.icon-after.tertiary.disabled.current{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-default--primary--200,light-dark(var(--graupl-primary--200,#9ebefa),var(--graupl-primary--800,#052561)))))}.button.icon.tertiary[aria-selected=true],.button.icon-before.tertiary[aria-selected=true],.button.icon-after.tertiary[aria-selected=true],.button.icon.tertiary.selected,.button.icon-before.tertiary.selected,.button.icon-after.tertiary.selected,.button.icon.tertiary[aria-current=true],.button.icon-before.tertiary[aria-current=true],.button.icon-after.tertiary[aria-current=true],.button.icon.tertiary.current,.button.icon-before.tertiary.current,.button.icon-after.tertiary.current{--graupl-icon-color: }a.icon,a.icon-before,a.icon-after{--graupl-icon-color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-default--primary--700,light-dark(var(--graupl-primary--700,#1244a1),var(--graupl-primary--300,#5e90ed)))))}a.icon:visited,a.icon-before:visited,a.icon-after:visited,a.icon.visited,a.icon-before.visited,a.icon-after.visited{--graupl-icon-color:var(--graupl-link-visited-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-default--primary--700,light-dark(var(--graupl-primary--700,#1244a1),var(--graupl-primary--300,#5e90ed))))))}a.icon:focus-visible,a.icon-before:focus-visible,a.icon-after:focus-visible,a.icon.focus,a.icon-before.focus,a.icon-after.focus{--graupl-icon-color:var(--graupl-link-focus-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-default--primary--700,light-dark(var(--graupl-primary--700,#1244a1),var(--graupl-primary--300,#5e90ed))))))}a.icon:hover,a.icon-before:hover,a.icon-after:hover,a.icon.hover,a.icon-before.hover,a.icon-after.hover{--graupl-icon-color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-default--tertiary--700,light-dark(var(--graupl-tertiary--700,#931f46),var(--graupl-tertiary--300,#e06c92)))))}a.icon:active,a.icon-before:active,a.icon-after:active,a.icon.active,a.icon-before.active,a.icon-after.active{--graupl-icon-color:var(--graupl-link-active-color,var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-default--tertiary--700,light-dark(var(--graupl-tertiary--700,#931f46),var(--graupl-tertiary--300,#e06c92))))))}a.icon:disabled,a.icon-before:disabled,a.icon-after:disabled,a.icon:disabled:visited,a.icon-before:disabled:visited,a.icon-after:disabled:visited,a.icon:disabled.visited,a.icon-before:disabled.visited,a.icon-after:disabled.visited,a.icon:disabled:focus-visible,a.icon-before:disabled:focus-visible,a.icon-after:disabled:focus-visible,a.icon:disabled.focus,a.icon-before:disabled.focus,a.icon-after:disabled.focus,a.icon:disabled:hover,a.icon-before:disabled:hover,a.icon-after:disabled:hover,a.icon:disabled.hover,a.icon-before:disabled.hover,a.icon-after:disabled.hover,a.icon:disabled:active,a.icon-before:disabled:active,a.icon-after:disabled:active,a.icon:disabled.active,a.icon-before:disabled.active,a.icon-after:disabled.active,a.icon:disabled[aria-selected=true],a.icon-before:disabled[aria-selected=true],a.icon-after:disabled[aria-selected=true],a.icon:disabled.selected,a.icon-before:disabled.selected,a.icon-after:disabled.selected,a.icon:disabled[aria-current=true],a.icon-before:disabled[aria-current=true],a.icon-after:disabled[aria-current=true],a.icon:disabled.current,a.icon-before:disabled.current,a.icon-after:disabled.current,a.icon[disabled],a.icon-before[disabled],a.icon-after[disabled],a.icon[disabled]:visited,a.icon-before[disabled]:visited,a.icon-after[disabled]:visited,a.icon[disabled].visited,a.icon-before[disabled].visited,a.icon-after[disabled].visited,a.icon[disabled]:focus-visible,a.icon-before[disabled]:focus-visible,a.icon-after[disabled]:focus-visible,a.icon[disabled].focus,a.icon-before[disabled].focus,a.icon-after[disabled].focus,a.icon[disabled]:hover,a.icon-before[disabled]:hover,a.icon-after[disabled]:hover,a.icon[disabled].hover,a.icon-before[disabled].hover,a.icon-after[disabled].hover,a.icon[disabled]:active,a.icon-before[disabled]:active,a.icon-after[disabled]:active,a.icon[disabled].active,a.icon-before[disabled].active,a.icon-after[disabled].active,a.icon[disabled][aria-selected=true],a.icon-before[disabled][aria-selected=true],a.icon-after[disabled][aria-selected=true],a.icon[disabled].selected,a.icon-before[disabled].selected,a.icon-after[disabled].selected,a.icon[disabled][aria-current=true],a.icon-before[disabled][aria-current=true],a.icon-after[disabled][aria-current=true],a.icon[disabled].current,a.icon-before[disabled].current,a.icon-after[disabled].current,a.icon[aria-disabled=true],a.icon-before[aria-disabled=true],a.icon-after[aria-disabled=true],a.icon[aria-disabled=true]:visited,a.icon-before[aria-disabled=true]:visited,a.icon-after[aria-disabled=true]:visited,a.icon[aria-disabled=true].visited,a.icon-before[aria-disabled=true].visited,a.icon-after[aria-disabled=true].visited,a.icon[aria-disabled=true]:focus-visible,a.icon-before[aria-disabled=true]:focus-visible,a.icon-after[aria-disabled=true]:focus-visible,a.icon[aria-disabled=true].focus,a.icon-before[aria-disabled=true].focus,a.icon-after[aria-disabled=true].focus,a.icon[aria-disabled=true]:hover,a.icon-before[aria-disabled=true]:hover,a.icon-after[aria-disabled=true]:hover,a.icon[aria-disabled=true].hover,a.icon-before[aria-disabled=true].hover,a.icon-after[aria-disabled=true].hover,a.icon[aria-disabled=true]:active,a.icon-before[aria-disabled=true]:active,a.icon-after[aria-disabled=true]:active,a.icon[aria-disabled=true].active,a.icon-before[aria-disabled=true].active,a.icon-after[aria-disabled=true].active,a.icon[aria-disabled=true][aria-selected=true],a.icon-before[aria-disabled=true][aria-selected=true],a.icon-after[aria-disabled=true][aria-selected=true],a.icon[aria-disabled=true].selected,a.icon-before[aria-disabled=true].selected,a.icon-after[aria-disabled=true].selected,a.icon[aria-disabled=true][aria-current=true],a.icon-before[aria-disabled=true][aria-current=true],a.icon-after[aria-disabled=true][aria-current=true],a.icon[aria-disabled=true].current,a.icon-before[aria-disabled=true].current,a.icon-after[aria-disabled=true].current,a.icon.disabled,a.icon-before.disabled,a.icon-after.disabled,a.icon.disabled:visited,a.icon-before.disabled:visited,a.icon-after.disabled:visited,a.icon.disabled.visited,a.icon-before.disabled.visited,a.icon-after.disabled.visited,a.icon.disabled:focus-visible,a.icon-before.disabled:focus-visible,a.icon-after.disabled:focus-visible,a.icon.disabled.focus,a.icon-before.disabled.focus,a.icon-after.disabled.focus,a.icon.disabled:hover,a.icon-before.disabled:hover,a.icon-after.disabled:hover,a.icon.disabled.hover,a.icon-before.disabled.hover,a.icon-after.disabled.hover,a.icon.disabled:active,a.icon-before.disabled:active,a.icon-after.disabled:active,a.icon.disabled.active,a.icon-before.disabled.active,a.icon-after.disabled.active,a.icon.disabled[aria-selected=true],a.icon-before.disabled[aria-selected=true],a.icon-after.disabled[aria-selected=true],a.icon.disabled.selected,a.icon-before.disabled.selected,a.icon-after.disabled.selected,a.icon.disabled[aria-current=true],a.icon-before.disabled[aria-current=true],a.icon-after.disabled[aria-current=true],a.icon.disabled.current,a.icon-before.disabled.current,a.icon-after.disabled.current{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-default--primary--200,light-dark(var(--graupl-primary--200,#9ebefa),var(--graupl-primary--800,#052561)))))}a.icon[aria-selected=true],a.icon-before[aria-selected=true],a.icon-after[aria-selected=true],a.icon.selected,a.icon-before.selected,a.icon-after.selected,a.icon[aria-current=true],a.icon-before[aria-current=true],a.icon-after[aria-current=true],a.icon.current,a.icon-before.current,a.icon-after.current{--graupl-icon-color: }.icon.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.icon.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.icon.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.icon{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.icon-before.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.icon-before.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.icon-before.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.icon-before:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}.icon-after.primary{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-default--primary--500,light-dark(var(--graupl-primary--500,#2063df),var(--graupl-primary--500,#2063df))))}.icon-after.secondary{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-default--secondary--500,light-dark(var(--graupl-secondary--500,#6c7093),var(--graupl-secondary--500,#6c7093))))}.icon-after.tertiary{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-default--tertiary--500,light-dark(var(--graupl-tertiary--500,#c36),var(--graupl-tertiary--500,#c36))))}.icon-after:after{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-default--primary--900,light-dark(var(--graupl-primary--900,#001233),var(--graupl-primary--100,#e6eeff)))))))}}@layer graupl.component{.icon{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));background-position:50%;background-repeat:no-repeat;background-size:contain;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-before:before{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}.icon-after:after{display:var(--graupl-icon-display,inline-block);width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em));height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));vertical-align:sub;mask-image:var(--graupl-icon,none);content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem))));mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}
|
|
2
2
|
/*# sourceMappingURL=icon.css.map */
|