@graupl/icons 1.0.0-beta.25 → 1.0.0-beta.26

package/dist/css/icon.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":null,"mappings":"AESI,oBCkBF,wNAMM,mRAAA,qRAAA,4PAAA,gSAAA,opEAAA,8GCN8B,mKAM9B,sNAAA,wNAAA,0LAAA,4NAAA,0vDAAA,sFCEN,uPAyBM,8MHnDJ,wBGEF,uiBCaE,gfAOA","sources":["dist/css/icon.css","var/www/html/node_modules/@graupl/core/src/scss/theme/typography/_defaults.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/packages/icons/src/scss/base/button/_index.scss","var/www/html/packages/icons/src/scss/base/link/_index.scss","var/www/html/packages/icons/src/scss/component/icon/_index.scss","var/www/html/packages/icons/src/scss/component/icon/_mixins.scss","var/www/html/packages/icons/src/scss/component/icon/_variables.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.theme {\n  .button {\n    --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, hsl(219, 100%, 10%)))))));\n  }\n  .button:visited {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.visited {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button:focus-visible {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.focus {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button:hover {\n    --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, hsl(219, 100%, 95%)))))));\n  }\n  .button.hover {\n    --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, hsl(219, 100%, 95%)))))));\n  }\n  .button:active {\n    --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, hsl(219, 100%, 95%))))))));\n  }\n  .button.active {\n    --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, hsl(219, 100%, 95%))))))));\n  }\n  .button:disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled.visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled.focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled.hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled.active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled:disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled[disabled] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled[aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled.disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled.selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button:disabled.current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled]:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled].visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled]:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled].focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled]:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled].hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled]:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled].active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled]:disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled][disabled] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled][aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled].disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled][aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled].selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled][aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[disabled].current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true]:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true].visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true]:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true].focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true]:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true].hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true]:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true].active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true]:disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true][disabled] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true][aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true].disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true][aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true].selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true][aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-disabled=true].current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled.visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled.focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled.hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled.active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled:disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled[disabled] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled[aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled.disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled.selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.disabled.current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button[aria-selected=true] {\n    --graupl-icon-color: ;\n  }\n  .button.selected {\n    --graupl-icon-color: ;\n  }\n  .button[aria-current=true] {\n    --graupl-icon-color: ;\n  }\n  .button.current {\n    --graupl-icon-color: ;\n  }\n}\n@layer graupl.theme {\n  a {\n    --graupl-icon-color: var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));\n  }\n  a:visited {\n    --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, hsl(219, 80%, 35%))))));\n  }\n  a.visited {\n    --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, hsl(219, 80%, 35%))))));\n  }\n  a:focus-visible {\n    --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, hsl(219, 80%, 35%))))));\n  }\n  a.focus {\n    --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, hsl(219, 80%, 35%))))));\n  }\n  a:hover {\n    --graupl-icon-color: var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));\n  }\n  a.hover {\n    --graupl-icon-color: var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));\n  }\n  a:active {\n    --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, hsl(340, 65%, 35%))))));\n  }\n  a.active {\n    --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, hsl(340, 65%, 35%))))));\n  }\n  a:disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled:visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled.visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled.focus {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled:hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled.hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled:active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled.active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled:disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled[disabled] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled[aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled.disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled.selected {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a:disabled.current {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled]:visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled].visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled]:focus-visible {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled].focus {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled]:hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled].hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled]:active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled].active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled]:disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled][disabled] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled][aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled].disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled][aria-selected=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled].selected {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled][aria-current=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[disabled].current {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true]:visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true].visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true]:focus-visible {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true].focus {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true]:hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true].hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true]:active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true].active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true]:disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true][disabled] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true][aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true].disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true][aria-selected=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true].selected {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true][aria-current=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-disabled=true].current {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled:visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled.visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled.focus {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled:hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled.hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled:active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled.active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled:disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled[disabled] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled[aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled.disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled.selected {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.disabled.current {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a[aria-selected=true] {\n    --graupl-icon-color: ;\n  }\n  a.selected {\n    --graupl-icon-color: ;\n  }\n  a[aria-current=true] {\n    --graupl-icon-color: ;\n  }\n  a.current {\n    --graupl-icon-color: ;\n  }\n}\n@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)))) 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 {\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::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::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  .icon.primary-,\n  .icon-before.primary-,\n  .icon-after.primary- {\n    --graupl-icon-color: ;\n  }\n  .icon.secondary-,\n  .icon-before.secondary-,\n  .icon-after.secondary- {\n    --graupl-icon-color: ;\n  }\n  .icon.tertiary-,\n  .icon-before.tertiary-,\n  .icon-after.tertiary- {\n    --graupl-icon-color: ;\n  }\n}","// @graupl/core typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: \":\" !default;\n$root-selector: \"root\" !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$body-selector-base: $selector-base !default;\n$body-selector: \"body\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$line-height: 1.2em !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n  xs: 0.694,\n  sm: 0.833,\n  base: 1,\n  lg: 1.2,\n  xl: 1.44,\n  2xl: 1.728,\n  3xl: 2.074,\n  4xl: 2.488,\n  5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n  $font-size-multipliers: map.merge(\n    $-font-size-multipliers,\n    $font-size-multipliers\n  );\n}\n\n// Weights.\n$-font-weights: (\n  light: 300,\n  normal: 400,\n  bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n  $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n  system-ui,\n  -apple-system,\n  blinkmacsystemfont,\n  \"Segoe UI\",\n  roboto,\n  \"Helvetica Neue\",\n  arial,\n  sans-serif !default;\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n  @if root-defaults.$use-layers {\n    @layer #{root-defaults.$id}.#{$layer} {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n","// @gruapl/icons button base styles.\n//\n// This module provides icon component integration for the button component.\n//\n// It sets the `--graupl-icon-color` custom property to the appropriate `--graupl-button-color` property.\n//\n// The following selectors are generated by default:\n// - `.button`: The button component.\n//\n// The following custom properties control the generated selectors:\n// - N/A\n//\n// The following variables control the generated selectors:\n// - N/A\n//\n// @example\n// <button class=\"button icon-after\">Button</button>\n\n@use \"pkg:@graupl/core/src/base/button/defaults\" as button-defaults;\n@use \"pkg:@graupl/core/src/base/button/variables\" as button;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/layer\" as *;\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(theme) {\n  // .button\n  #{button-defaults.$button-selector-base}#{button-defaults.$button-selector} {\n    --#{root-defaults.$prefix}icon-color: #{button.$button-color};\n\n    @each $state, $selectors in root-defaults.$state-selectors {\n      @each $selector in $selectors {\n        // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled\n        &#{$selector} {\n          --#{root-defaults.$prefix}icon-color: #{map.get(\n              button.$button-color-states,\n              $state\n            )};\n\n          // If the state is disabled, we want that to supersede all other states.\n          @if $state == \"disabled\" {\n            @each $sub-state, $sub-selectors in root-defaults.$state-selectors {\n              @each $sub-selector in $sub-selectors {\n                // e.g &:visited, &:focus-visible, &:hover, &:active\n                &#{$sub-selector} {\n                  --#{root-defaults.$prefix}icon-color: #{map.get(\n                      button.$button-color-states,\n                      $state\n                    )};\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","// @gruapl/icons link base styles.\n//\n// This module provides icon component integration for the link component.\n//\n// It sets the `--graupl-icon-color` custom property to the appropriate `--graupl-link-color` property.\n//\n// The following selectors are generated by default:\n// - `a`: The link component.\n//\n// The following custom properties control the generated selectors:\n// - N/A\n//\n// The following variables control the generated selectors:\n// - N/A\n//\n// @example\n// <a href=\"#\" class=\"icon-after\">Link</a>\n\n@use \"pkg:@graupl/core/src/base/link/defaults\" as link-defaults;\n@use \"pkg:@graupl/core/src/base/link/variables\" as link;\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/mixins/layer\" as *;\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(theme) {\n  // a\n  #{link-defaults.$link-selector-base}#{link-defaults.$link-selector} {\n    --#{root-defaults.$prefix}icon-color: #{link.$link-color};\n\n    @each $state, $selectors in root-defaults.$state-selectors {\n      @each $selector in $selectors {\n        // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled\n        &#{$selector} {\n          --#{root-defaults.$prefix}icon-color: #{map.get(\n              link.$link-color-states,\n              $state\n            )};\n\n          // If the state is disabled, we want that to supersede all other states.\n          @if $state == \"disabled\" {\n            @each $sub-state, $sub-selectors in root-defaults.$state-selectors {\n              @each $sub-selector in $sub-selectors {\n                // e.g &:visited, &:focus-visible, &:hover, &:active\n                &#{$sub-selector} {\n                  --#{root-defaults.$prefix}icon-color: #{map.get(\n                      link.$link-color-states,\n                      $state\n                    )};\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","// @gruapl/icons icon component styles.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/functions/theme\";\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/mixins/layer\" as *;\n@use \"mixins\" as *;\n@use \"sass:map\";\n\n@include layer(component) {\n  #{defaults.$icon-selector-base}#{defaults.$icon-selector} {\n    @include apply-component;\n  }\n\n  #{defaults.$icon-selector-base}#{defaults.$icon-before-selector} {\n    @include apply-component(\"before\");\n  }\n\n  #{defaults.$icon-selector-base}#{defaults.$icon-after-selector} {\n    @include apply-component(\"after\");\n  }\n\n  #{defaults.$icon-selector-base}#{defaults.$icon-selector},\n  #{defaults.$icon-selector-base}#{defaults.$icon-before-selector},\n  #{defaults.$icon-selector-base}#{defaults.$icon-after-selector} {\n    @each $name, $icon in defaults.$icons {\n      &#{defaults.$icon-prefix-selector-base}#{defaults.$icon-prefix-selector}#{$name} {\n        --#{root-defaults.$prefix}icon: #{$icon};\n      }\n    }\n  }\n}\n\n@include layer(theme) {\n  #{defaults.$icon-selector-base}#{defaults.$icon-selector} {\n    @include apply-theme;\n  }\n\n  #{defaults.$icon-selector-base}#{defaults.$icon-before-selector} {\n    @include apply-theme(\"before\");\n  }\n\n  #{defaults.$icon-selector-base}#{defaults.$icon-after-selector} {\n    @include apply-theme(\"after\");\n  }\n\n  #{defaults.$icon-selector-base}#{defaults.$icon-selector},\n  #{defaults.$icon-selector-base}#{defaults.$icon-before-selector},\n  #{defaults.$icon-selector-base}#{defaults.$icon-after-selector} {\n    @each $color, $map in theme.get-colors() {\n      @each $shade, $value in $map {\n        $name: null;\n\n        @if $shade == \"_default\" {\n          $name: #{$color};\n        } @else {\n          $name: #{$color}-#{$shade};\n        }\n\n        &#{defaults.$icon-color-prefix-selector-base}#{defaults.$icon-color-prefix-selector}#{$name} {\n          --#{root-defaults.$prefix}icon-color: #{$value};\n        }\n      }\n    }\n  }\n}\n","// @graupl/icons icon mixins.\n\n@use \"variables\" as *;\n\n@mixin _component() {\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\n@mixin _theme() {\n  background-color: $icon-color;\n}\n\n@mixin apply-component($target: \"self\") {\n  @if $target == \"before\" {\n    &::before {\n      @include _component;\n\n      content: \"\";\n      margin-inline-end: $icon-spacer;\n    }\n  } @else if $target == \"after\" {\n    &::after {\n      @include _component;\n\n      content: \"\";\n      margin-inline-start: $icon-spacer;\n    }\n  } @else {\n    @include _component;\n\n    margin-inline: $icon-spacer $icon-spacer;\n  }\n}\n\n@mixin apply-theme($target: \"self\") {\n  @if $target == \"before\" {\n    &::before {\n      @include _theme;\n    }\n  } @else if $target == \"after\" {\n    &::after {\n      @include _theme;\n    }\n  } @else {\n    @include _theme;\n  }\n}\n\n@mixin apply($target: \"self\") {\n  @include apply-component($target);\n  @include apply-theme($target);\n}\n","// @graupl/icons icon componet variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"sass:map\";\n\n$icon-display: var(\n  --#{root-defaults.$prefix}icon-display,\n  #{defaults.$icon-display}\n);\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n$icon: var(--#{root-defaults.$prefix}icon, none);\n$icon-spacer: var(\n  --#{root-defaults.$prefix}icon-spacer,\n  #{map.get(root-variables.$spacers, 2)}\n);\n"],"names":[]}
+{"version":3,"sourceRoot":null,"mappings":"AESI,oBCsBA,oQEAE,2YAAA,qZAAA,4WAAA,oZAAA,ohMAAA,8YFQI,4RERJ,2bAAA,qcAAA,4ZAAA,ocAAA,ovOAAA,8eFQI,kSERJ,ucAAA,idAAA,waAAA,gdAAA,4iPAAA,sgBFQI,+RERJ,icAAA,2cAAA,kaAAA,0cAAA,g5OAAA,0fCAF,mMDAE,sTAAA,gUAAA,kRAAA,wTAAA,0mKAAA,sUGSF,sJAAA,8JAAA,uJJOF,iNIPE,6JAAA,qKAAA,8JJOF,+NIPE,4JAAA,oKAAA,6JJOF,8NFtCE,wBEQF,gXAAA","sources":["dist/css/icon.css","var/www/html/node_modules/@graupl/core/src/scss/theme/typography/_defaults.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/packages/icons/src/scss/base/button/_index.scss","var/www/html/packages/icons/src/scss/component/icon/_mixins.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_state.scss","var/www/html/packages/icons/src/scss/base/link/_index.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":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.theme {\n  .button.icon, .button.icon-before, .button.icon-after {\n    --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, hsl(219, 100%, 10%)))))));\n  }\n  .button.icon:visited, .button.icon-before:visited, .button.icon-after:visited {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.visited, .button.icon-before.visited, .button.icon-after.visited {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon:focus-visible, .button.icon-before:focus-visible, .button.icon-after:focus-visible {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.focus, .button.icon-before.focus, .button.icon-after.focus {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon:hover, .button.icon-before:hover, .button.icon-after:hover {\n    --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, hsl(219, 100%, 95%)))))));\n  }\n  .button.icon.hover, .button.icon-before.hover, .button.icon-after.hover {\n    --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, hsl(219, 100%, 95%)))))));\n  }\n  .button.icon:active, .button.icon-before:active, .button.icon-after:active {\n    --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, hsl(219, 100%, 95%))))))));\n  }\n  .button.icon.active, .button.icon-before.active, .button.icon-after.active {\n    --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, hsl(219, 100%, 95%))))))));\n  }\n  .button.icon:disabled, .button.icon-before:disabled, .button.icon-after:disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled:visited, .button.icon-before:disabled:visited, .button.icon-after:disabled:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled.visited, .button.icon-before:disabled.visited, .button.icon-after:disabled.visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled:focus-visible, .button.icon-before:disabled:focus-visible, .button.icon-after:disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled.focus, .button.icon-before:disabled.focus, .button.icon-after:disabled.focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled:hover, .button.icon-before:disabled:hover, .button.icon-after:disabled:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled.hover, .button.icon-before:disabled.hover, .button.icon-after:disabled.hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled:active, .button.icon-before:disabled:active, .button.icon-after:disabled:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled.active, .button.icon-before:disabled.active, .button.icon-after:disabled.active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled[aria-selected=true], .button.icon-before:disabled[aria-selected=true], .button.icon-after:disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled.selected, .button.icon-before:disabled.selected, .button.icon-after:disabled.selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled[aria-current=true], .button.icon-before:disabled[aria-current=true], .button.icon-after:disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon:disabled.current, .button.icon-before:disabled.current, .button.icon-after:disabled.current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled], .button.icon-before[disabled], .button.icon-after[disabled] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled]:visited, .button.icon-before[disabled]:visited, .button.icon-after[disabled]:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled].visited, .button.icon-before[disabled].visited, .button.icon-after[disabled].visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled]:focus-visible, .button.icon-before[disabled]:focus-visible, .button.icon-after[disabled]:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled].focus, .button.icon-before[disabled].focus, .button.icon-after[disabled].focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled]:hover, .button.icon-before[disabled]:hover, .button.icon-after[disabled]:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled].hover, .button.icon-before[disabled].hover, .button.icon-after[disabled].hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled]:active, .button.icon-before[disabled]:active, .button.icon-after[disabled]:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled].active, .button.icon-before[disabled].active, .button.icon-after[disabled].active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled][aria-selected=true], .button.icon-before[disabled][aria-selected=true], .button.icon-after[disabled][aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled].selected, .button.icon-before[disabled].selected, .button.icon-after[disabled].selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled][aria-current=true], .button.icon-before[disabled][aria-current=true], .button.icon-after[disabled][aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[disabled].current, .button.icon-before[disabled].current, .button.icon-after[disabled].current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-disabled=true], .button.icon-before[aria-disabled=true], .button.icon-after[aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-disabled=true]:visited, .button.icon-before[aria-disabled=true]:visited, .button.icon-after[aria-disabled=true]:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-disabled=true].visited, .button.icon-before[aria-disabled=true].visited, .button.icon-after[aria-disabled=true].visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-disabled=true]:focus-visible, .button.icon-before[aria-disabled=true]:focus-visible, .button.icon-after[aria-disabled=true]:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-disabled=true].focus, .button.icon-before[aria-disabled=true].focus, .button.icon-after[aria-disabled=true].focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-disabled=true]:hover, .button.icon-before[aria-disabled=true]:hover, .button.icon-after[aria-disabled=true]:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-disabled=true].hover, .button.icon-before[aria-disabled=true].hover, .button.icon-after[aria-disabled=true].hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-disabled=true]:active, .button.icon-before[aria-disabled=true]:active, .button.icon-after[aria-disabled=true]:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-disabled=true].active, .button.icon-before[aria-disabled=true].active, .button.icon-after[aria-disabled=true].active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .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] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-disabled=true].selected, .button.icon-before[aria-disabled=true].selected, .button.icon-after[aria-disabled=true].selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .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] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-disabled=true].current, .button.icon-before[aria-disabled=true].current, .button.icon-after[aria-disabled=true].current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled, .button.icon-before.disabled, .button.icon-after.disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled:visited, .button.icon-before.disabled:visited, .button.icon-after.disabled:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled.visited, .button.icon-before.disabled.visited, .button.icon-after.disabled.visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled:focus-visible, .button.icon-before.disabled:focus-visible, .button.icon-after.disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled.focus, .button.icon-before.disabled.focus, .button.icon-after.disabled.focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled:hover, .button.icon-before.disabled:hover, .button.icon-after.disabled:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled.hover, .button.icon-before.disabled.hover, .button.icon-after.disabled.hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled:active, .button.icon-before.disabled:active, .button.icon-after.disabled:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled.active, .button.icon-before.disabled.active, .button.icon-after.disabled.active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled[aria-selected=true], .button.icon-before.disabled[aria-selected=true], .button.icon-after.disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled.selected, .button.icon-before.disabled.selected, .button.icon-after.disabled.selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled[aria-current=true], .button.icon-before.disabled[aria-current=true], .button.icon-after.disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.disabled.current, .button.icon-before.disabled.current, .button.icon-after.disabled.current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon[aria-selected=true], .button.icon-before[aria-selected=true], .button.icon-after[aria-selected=true] {\n    --graupl-icon-color: ;\n  }\n  .button.icon.selected, .button.icon-before.selected, .button.icon-after.selected {\n    --graupl-icon-color: ;\n  }\n  .button.icon[aria-current=true], .button.icon-before[aria-current=true], .button.icon-after[aria-current=true] {\n    --graupl-icon-color: ;\n  }\n  .button.icon.current, .button.icon-before.current, .button.icon-after.current {\n    --graupl-icon-color: ;\n  }\n  .button.icon.primary, .button.icon-before.primary, .button.icon-after.primary {\n    --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, hsl(219, 100%, 10%)))))));\n  }\n  .button.icon.primary:visited, .button.icon-before.primary:visited, .button.icon-after.primary:visited {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.primary.visited, .button.icon-before.primary.visited, .button.icon-after.primary.visited {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.primary:focus-visible, .button.icon-before.primary:focus-visible, .button.icon-after.primary:focus-visible {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.primary.focus, .button.icon-before.primary.focus, .button.icon-after.primary.focus {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.primary:hover, .button.icon-before.primary:hover, .button.icon-after.primary:hover {\n    --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, hsl(219, 100%, 95%)))))));\n  }\n  .button.icon.primary.hover, .button.icon-before.primary.hover, .button.icon-after.primary.hover {\n    --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, hsl(219, 100%, 95%)))))));\n  }\n  .button.icon.primary:active, .button.icon-before.primary:active, .button.icon-after.primary:active {\n    --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, hsl(219, 100%, 95%))))))));\n  }\n  .button.icon.primary.active, .button.icon-before.primary.active, .button.icon-after.primary.active {\n    --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, hsl(219, 100%, 95%))))))));\n  }\n  .button.icon.primary:disabled, .button.icon-before.primary:disabled, .button.icon-after.primary:disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled:visited, .button.icon-before.primary:disabled:visited, .button.icon-after.primary:disabled:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled.visited, .button.icon-before.primary:disabled.visited, .button.icon-after.primary:disabled.visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled:focus-visible, .button.icon-before.primary:disabled:focus-visible, .button.icon-after.primary:disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled.focus, .button.icon-before.primary:disabled.focus, .button.icon-after.primary:disabled.focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled:hover, .button.icon-before.primary:disabled:hover, .button.icon-after.primary:disabled:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled.hover, .button.icon-before.primary:disabled.hover, .button.icon-after.primary:disabled.hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled:active, .button.icon-before.primary:disabled:active, .button.icon-after.primary:disabled:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled.active, .button.icon-before.primary:disabled.active, .button.icon-after.primary:disabled.active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled[aria-selected=true], .button.icon-before.primary:disabled[aria-selected=true], .button.icon-after.primary:disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled.selected, .button.icon-before.primary:disabled.selected, .button.icon-after.primary:disabled.selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled[aria-current=true], .button.icon-before.primary:disabled[aria-current=true], .button.icon-after.primary:disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary:disabled.current, .button.icon-before.primary:disabled.current, .button.icon-after.primary:disabled.current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled], .button.icon-before.primary[disabled], .button.icon-after.primary[disabled] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled]:visited, .button.icon-before.primary[disabled]:visited, .button.icon-after.primary[disabled]:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled].visited, .button.icon-before.primary[disabled].visited, .button.icon-after.primary[disabled].visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled]:focus-visible, .button.icon-before.primary[disabled]:focus-visible, .button.icon-after.primary[disabled]:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled].focus, .button.icon-before.primary[disabled].focus, .button.icon-after.primary[disabled].focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled]:hover, .button.icon-before.primary[disabled]:hover, .button.icon-after.primary[disabled]:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled].hover, .button.icon-before.primary[disabled].hover, .button.icon-after.primary[disabled].hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled]:active, .button.icon-before.primary[disabled]:active, .button.icon-after.primary[disabled]:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled].active, .button.icon-before.primary[disabled].active, .button.icon-after.primary[disabled].active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled][aria-selected=true], .button.icon-before.primary[disabled][aria-selected=true], .button.icon-after.primary[disabled][aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled].selected, .button.icon-before.primary[disabled].selected, .button.icon-after.primary[disabled].selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled][aria-current=true], .button.icon-before.primary[disabled][aria-current=true], .button.icon-after.primary[disabled][aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[disabled].current, .button.icon-before.primary[disabled].current, .button.icon-after.primary[disabled].current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[aria-disabled=true], .button.icon-before.primary[aria-disabled=true], .button.icon-after.primary[aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[aria-disabled=true]:visited, .button.icon-before.primary[aria-disabled=true]:visited, .button.icon-after.primary[aria-disabled=true]:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[aria-disabled=true].visited, .button.icon-before.primary[aria-disabled=true].visited, .button.icon-after.primary[aria-disabled=true].visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .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 {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[aria-disabled=true].focus, .button.icon-before.primary[aria-disabled=true].focus, .button.icon-after.primary[aria-disabled=true].focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[aria-disabled=true]:hover, .button.icon-before.primary[aria-disabled=true]:hover, .button.icon-after.primary[aria-disabled=true]:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[aria-disabled=true].hover, .button.icon-before.primary[aria-disabled=true].hover, .button.icon-after.primary[aria-disabled=true].hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[aria-disabled=true]:active, .button.icon-before.primary[aria-disabled=true]:active, .button.icon-after.primary[aria-disabled=true]:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[aria-disabled=true].active, .button.icon-before.primary[aria-disabled=true].active, .button.icon-after.primary[aria-disabled=true].active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .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] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[aria-disabled=true].selected, .button.icon-before.primary[aria-disabled=true].selected, .button.icon-after.primary[aria-disabled=true].selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .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] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[aria-disabled=true].current, .button.icon-before.primary[aria-disabled=true].current, .button.icon-after.primary[aria-disabled=true].current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled, .button.icon-before.primary.disabled, .button.icon-after.primary.disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled:visited, .button.icon-before.primary.disabled:visited, .button.icon-after.primary.disabled:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled.visited, .button.icon-before.primary.disabled.visited, .button.icon-after.primary.disabled.visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled:focus-visible, .button.icon-before.primary.disabled:focus-visible, .button.icon-after.primary.disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled.focus, .button.icon-before.primary.disabled.focus, .button.icon-after.primary.disabled.focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled:hover, .button.icon-before.primary.disabled:hover, .button.icon-after.primary.disabled:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled.hover, .button.icon-before.primary.disabled.hover, .button.icon-after.primary.disabled.hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled:active, .button.icon-before.primary.disabled:active, .button.icon-after.primary.disabled:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled.active, .button.icon-before.primary.disabled.active, .button.icon-after.primary.disabled.active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled[aria-selected=true], .button.icon-before.primary.disabled[aria-selected=true], .button.icon-after.primary.disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled.selected, .button.icon-before.primary.disabled.selected, .button.icon-after.primary.disabled.selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled[aria-current=true], .button.icon-before.primary.disabled[aria-current=true], .button.icon-after.primary.disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary.disabled.current, .button.icon-before.primary.disabled.current, .button.icon-after.primary.disabled.current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.primary[aria-selected=true], .button.icon-before.primary[aria-selected=true], .button.icon-after.primary[aria-selected=true] {\n    --graupl-icon-color: ;\n  }\n  .button.icon.primary.selected, .button.icon-before.primary.selected, .button.icon-after.primary.selected {\n    --graupl-icon-color: ;\n  }\n  .button.icon.primary[aria-current=true], .button.icon-before.primary[aria-current=true], .button.icon-after.primary[aria-current=true] {\n    --graupl-icon-color: ;\n  }\n  .button.icon.primary.current, .button.icon-before.primary.current, .button.icon-after.primary.current {\n    --graupl-icon-color: ;\n  }\n  .button.icon.secondary, .button.icon-before.secondary, .button.icon-after.secondary {\n    --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, hsl(219, 100%, 10%)))))));\n  }\n  .button.icon.secondary:visited, .button.icon-before.secondary:visited, .button.icon-after.secondary:visited {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.secondary.visited, .button.icon-before.secondary.visited, .button.icon-after.secondary.visited {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.secondary:focus-visible, .button.icon-before.secondary:focus-visible, .button.icon-after.secondary:focus-visible {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.secondary.focus, .button.icon-before.secondary.focus, .button.icon-after.secondary.focus {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.secondary:hover, .button.icon-before.secondary:hover, .button.icon-after.secondary:hover {\n    --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, hsl(219, 100%, 95%)))))));\n  }\n  .button.icon.secondary.hover, .button.icon-before.secondary.hover, .button.icon-after.secondary.hover {\n    --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, hsl(219, 100%, 95%)))))));\n  }\n  .button.icon.secondary:active, .button.icon-before.secondary:active, .button.icon-after.secondary:active {\n    --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, hsl(219, 100%, 95%))))))));\n  }\n  .button.icon.secondary.active, .button.icon-before.secondary.active, .button.icon-after.secondary.active {\n    --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, hsl(219, 100%, 95%))))))));\n  }\n  .button.icon.secondary:disabled, .button.icon-before.secondary:disabled, .button.icon-after.secondary:disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled:visited, .button.icon-before.secondary:disabled:visited, .button.icon-after.secondary:disabled:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled.visited, .button.icon-before.secondary:disabled.visited, .button.icon-after.secondary:disabled.visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled:focus-visible, .button.icon-before.secondary:disabled:focus-visible, .button.icon-after.secondary:disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled.focus, .button.icon-before.secondary:disabled.focus, .button.icon-after.secondary:disabled.focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled:hover, .button.icon-before.secondary:disabled:hover, .button.icon-after.secondary:disabled:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled.hover, .button.icon-before.secondary:disabled.hover, .button.icon-after.secondary:disabled.hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled:active, .button.icon-before.secondary:disabled:active, .button.icon-after.secondary:disabled:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled.active, .button.icon-before.secondary:disabled.active, .button.icon-after.secondary:disabled.active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled[aria-selected=true], .button.icon-before.secondary:disabled[aria-selected=true], .button.icon-after.secondary:disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled.selected, .button.icon-before.secondary:disabled.selected, .button.icon-after.secondary:disabled.selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled[aria-current=true], .button.icon-before.secondary:disabled[aria-current=true], .button.icon-after.secondary:disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary:disabled.current, .button.icon-before.secondary:disabled.current, .button.icon-after.secondary:disabled.current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled], .button.icon-before.secondary[disabled], .button.icon-after.secondary[disabled] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled]:visited, .button.icon-before.secondary[disabled]:visited, .button.icon-after.secondary[disabled]:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled].visited, .button.icon-before.secondary[disabled].visited, .button.icon-after.secondary[disabled].visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled]:focus-visible, .button.icon-before.secondary[disabled]:focus-visible, .button.icon-after.secondary[disabled]:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled].focus, .button.icon-before.secondary[disabled].focus, .button.icon-after.secondary[disabled].focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled]:hover, .button.icon-before.secondary[disabled]:hover, .button.icon-after.secondary[disabled]:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled].hover, .button.icon-before.secondary[disabled].hover, .button.icon-after.secondary[disabled].hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled]:active, .button.icon-before.secondary[disabled]:active, .button.icon-after.secondary[disabled]:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled].active, .button.icon-before.secondary[disabled].active, .button.icon-after.secondary[disabled].active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled][aria-selected=true], .button.icon-before.secondary[disabled][aria-selected=true], .button.icon-after.secondary[disabled][aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled].selected, .button.icon-before.secondary[disabled].selected, .button.icon-after.secondary[disabled].selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled][aria-current=true], .button.icon-before.secondary[disabled][aria-current=true], .button.icon-after.secondary[disabled][aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[disabled].current, .button.icon-before.secondary[disabled].current, .button.icon-after.secondary[disabled].current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[aria-disabled=true], .button.icon-before.secondary[aria-disabled=true], .button.icon-after.secondary[aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[aria-disabled=true]:visited, .button.icon-before.secondary[aria-disabled=true]:visited, .button.icon-after.secondary[aria-disabled=true]:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[aria-disabled=true].visited, .button.icon-before.secondary[aria-disabled=true].visited, .button.icon-after.secondary[aria-disabled=true].visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .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 {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[aria-disabled=true].focus, .button.icon-before.secondary[aria-disabled=true].focus, .button.icon-after.secondary[aria-disabled=true].focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[aria-disabled=true]:hover, .button.icon-before.secondary[aria-disabled=true]:hover, .button.icon-after.secondary[aria-disabled=true]:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[aria-disabled=true].hover, .button.icon-before.secondary[aria-disabled=true].hover, .button.icon-after.secondary[aria-disabled=true].hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[aria-disabled=true]:active, .button.icon-before.secondary[aria-disabled=true]:active, .button.icon-after.secondary[aria-disabled=true]:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[aria-disabled=true].active, .button.icon-before.secondary[aria-disabled=true].active, .button.icon-after.secondary[aria-disabled=true].active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .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] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[aria-disabled=true].selected, .button.icon-before.secondary[aria-disabled=true].selected, .button.icon-after.secondary[aria-disabled=true].selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .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] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[aria-disabled=true].current, .button.icon-before.secondary[aria-disabled=true].current, .button.icon-after.secondary[aria-disabled=true].current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled, .button.icon-before.secondary.disabled, .button.icon-after.secondary.disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled:visited, .button.icon-before.secondary.disabled:visited, .button.icon-after.secondary.disabled:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled.visited, .button.icon-before.secondary.disabled.visited, .button.icon-after.secondary.disabled.visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled:focus-visible, .button.icon-before.secondary.disabled:focus-visible, .button.icon-after.secondary.disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled.focus, .button.icon-before.secondary.disabled.focus, .button.icon-after.secondary.disabled.focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled:hover, .button.icon-before.secondary.disabled:hover, .button.icon-after.secondary.disabled:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled.hover, .button.icon-before.secondary.disabled.hover, .button.icon-after.secondary.disabled.hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled:active, .button.icon-before.secondary.disabled:active, .button.icon-after.secondary.disabled:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled.active, .button.icon-before.secondary.disabled.active, .button.icon-after.secondary.disabled.active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled[aria-selected=true], .button.icon-before.secondary.disabled[aria-selected=true], .button.icon-after.secondary.disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled.selected, .button.icon-before.secondary.disabled.selected, .button.icon-after.secondary.disabled.selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled[aria-current=true], .button.icon-before.secondary.disabled[aria-current=true], .button.icon-after.secondary.disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary.disabled.current, .button.icon-before.secondary.disabled.current, .button.icon-after.secondary.disabled.current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.secondary[aria-selected=true], .button.icon-before.secondary[aria-selected=true], .button.icon-after.secondary[aria-selected=true] {\n    --graupl-icon-color: ;\n  }\n  .button.icon.secondary.selected, .button.icon-before.secondary.selected, .button.icon-after.secondary.selected {\n    --graupl-icon-color: ;\n  }\n  .button.icon.secondary[aria-current=true], .button.icon-before.secondary[aria-current=true], .button.icon-after.secondary[aria-current=true] {\n    --graupl-icon-color: ;\n  }\n  .button.icon.secondary.current, .button.icon-before.secondary.current, .button.icon-after.secondary.current {\n    --graupl-icon-color: ;\n  }\n  .button.icon.tertiary, .button.icon-before.tertiary, .button.icon-after.tertiary {\n    --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, hsl(219, 100%, 10%)))))));\n  }\n  .button.icon.tertiary:visited, .button.icon-before.tertiary:visited, .button.icon-after.tertiary:visited {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.tertiary.visited, .button.icon-before.tertiary.visited, .button.icon-after.tertiary.visited {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.tertiary:focus-visible, .button.icon-before.tertiary:focus-visible, .button.icon-after.tertiary:focus-visible {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.tertiary.focus, .button.icon-before.tertiary.focus, .button.icon-after.tertiary.focus {\n    --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, hsl(219, 100%, 10%))))))));\n  }\n  .button.icon.tertiary:hover, .button.icon-before.tertiary:hover, .button.icon-after.tertiary:hover {\n    --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, hsl(219, 100%, 95%)))))));\n  }\n  .button.icon.tertiary.hover, .button.icon-before.tertiary.hover, .button.icon-after.tertiary.hover {\n    --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, hsl(219, 100%, 95%)))))));\n  }\n  .button.icon.tertiary:active, .button.icon-before.tertiary:active, .button.icon-after.tertiary:active {\n    --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, hsl(219, 100%, 95%))))))));\n  }\n  .button.icon.tertiary.active, .button.icon-before.tertiary.active, .button.icon-after.tertiary.active {\n    --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, hsl(219, 100%, 95%))))))));\n  }\n  .button.icon.tertiary:disabled, .button.icon-before.tertiary:disabled, .button.icon-after.tertiary:disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled:visited, .button.icon-before.tertiary:disabled:visited, .button.icon-after.tertiary:disabled:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled.visited, .button.icon-before.tertiary:disabled.visited, .button.icon-after.tertiary:disabled.visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled:focus-visible, .button.icon-before.tertiary:disabled:focus-visible, .button.icon-after.tertiary:disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled.focus, .button.icon-before.tertiary:disabled.focus, .button.icon-after.tertiary:disabled.focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled:hover, .button.icon-before.tertiary:disabled:hover, .button.icon-after.tertiary:disabled:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled.hover, .button.icon-before.tertiary:disabled.hover, .button.icon-after.tertiary:disabled.hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled:active, .button.icon-before.tertiary:disabled:active, .button.icon-after.tertiary:disabled:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled.active, .button.icon-before.tertiary:disabled.active, .button.icon-after.tertiary:disabled.active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled[aria-selected=true], .button.icon-before.tertiary:disabled[aria-selected=true], .button.icon-after.tertiary:disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled.selected, .button.icon-before.tertiary:disabled.selected, .button.icon-after.tertiary:disabled.selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled[aria-current=true], .button.icon-before.tertiary:disabled[aria-current=true], .button.icon-after.tertiary:disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary:disabled.current, .button.icon-before.tertiary:disabled.current, .button.icon-after.tertiary:disabled.current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled], .button.icon-before.tertiary[disabled], .button.icon-after.tertiary[disabled] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled]:visited, .button.icon-before.tertiary[disabled]:visited, .button.icon-after.tertiary[disabled]:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled].visited, .button.icon-before.tertiary[disabled].visited, .button.icon-after.tertiary[disabled].visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled]:focus-visible, .button.icon-before.tertiary[disabled]:focus-visible, .button.icon-after.tertiary[disabled]:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled].focus, .button.icon-before.tertiary[disabled].focus, .button.icon-after.tertiary[disabled].focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled]:hover, .button.icon-before.tertiary[disabled]:hover, .button.icon-after.tertiary[disabled]:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled].hover, .button.icon-before.tertiary[disabled].hover, .button.icon-after.tertiary[disabled].hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled]:active, .button.icon-before.tertiary[disabled]:active, .button.icon-after.tertiary[disabled]:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled].active, .button.icon-before.tertiary[disabled].active, .button.icon-after.tertiary[disabled].active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled][aria-selected=true], .button.icon-before.tertiary[disabled][aria-selected=true], .button.icon-after.tertiary[disabled][aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled].selected, .button.icon-before.tertiary[disabled].selected, .button.icon-after.tertiary[disabled].selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled][aria-current=true], .button.icon-before.tertiary[disabled][aria-current=true], .button.icon-after.tertiary[disabled][aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[disabled].current, .button.icon-before.tertiary[disabled].current, .button.icon-after.tertiary[disabled].current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[aria-disabled=true], .button.icon-before.tertiary[aria-disabled=true], .button.icon-after.tertiary[aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[aria-disabled=true]:visited, .button.icon-before.tertiary[aria-disabled=true]:visited, .button.icon-after.tertiary[aria-disabled=true]:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[aria-disabled=true].visited, .button.icon-before.tertiary[aria-disabled=true].visited, .button.icon-after.tertiary[aria-disabled=true].visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .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 {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[aria-disabled=true].focus, .button.icon-before.tertiary[aria-disabled=true].focus, .button.icon-after.tertiary[aria-disabled=true].focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[aria-disabled=true]:hover, .button.icon-before.tertiary[aria-disabled=true]:hover, .button.icon-after.tertiary[aria-disabled=true]:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[aria-disabled=true].hover, .button.icon-before.tertiary[aria-disabled=true].hover, .button.icon-after.tertiary[aria-disabled=true].hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[aria-disabled=true]:active, .button.icon-before.tertiary[aria-disabled=true]:active, .button.icon-after.tertiary[aria-disabled=true]:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[aria-disabled=true].active, .button.icon-before.tertiary[aria-disabled=true].active, .button.icon-after.tertiary[aria-disabled=true].active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .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] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[aria-disabled=true].selected, .button.icon-before.tertiary[aria-disabled=true].selected, .button.icon-after.tertiary[aria-disabled=true].selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .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] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[aria-disabled=true].current, .button.icon-before.tertiary[aria-disabled=true].current, .button.icon-after.tertiary[aria-disabled=true].current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled, .button.icon-before.tertiary.disabled, .button.icon-after.tertiary.disabled {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled:visited, .button.icon-before.tertiary.disabled:visited, .button.icon-after.tertiary.disabled:visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled.visited, .button.icon-before.tertiary.disabled.visited, .button.icon-after.tertiary.disabled.visited {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled:focus-visible, .button.icon-before.tertiary.disabled:focus-visible, .button.icon-after.tertiary.disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled.focus, .button.icon-before.tertiary.disabled.focus, .button.icon-after.tertiary.disabled.focus {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled:hover, .button.icon-before.tertiary.disabled:hover, .button.icon-after.tertiary.disabled:hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled.hover, .button.icon-before.tertiary.disabled.hover, .button.icon-after.tertiary.disabled.hover {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled:active, .button.icon-before.tertiary.disabled:active, .button.icon-after.tertiary.disabled:active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled.active, .button.icon-before.tertiary.disabled.active, .button.icon-after.tertiary.disabled.active {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled[aria-selected=true], .button.icon-before.tertiary.disabled[aria-selected=true], .button.icon-after.tertiary.disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled.selected, .button.icon-before.tertiary.disabled.selected, .button.icon-after.tertiary.disabled.selected {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled[aria-current=true], .button.icon-before.tertiary.disabled[aria-current=true], .button.icon-after.tertiary.disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary.disabled.current, .button.icon-before.tertiary.disabled.current, .button.icon-after.tertiary.disabled.current {\n    --graupl-icon-color: var(--graupl-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  .button.icon.tertiary[aria-selected=true], .button.icon-before.tertiary[aria-selected=true], .button.icon-after.tertiary[aria-selected=true] {\n    --graupl-icon-color: ;\n  }\n  .button.icon.tertiary.selected, .button.icon-before.tertiary.selected, .button.icon-after.tertiary.selected {\n    --graupl-icon-color: ;\n  }\n  .button.icon.tertiary[aria-current=true], .button.icon-before.tertiary[aria-current=true], .button.icon-after.tertiary[aria-current=true] {\n    --graupl-icon-color: ;\n  }\n  .button.icon.tertiary.current, .button.icon-before.tertiary.current, .button.icon-after.tertiary.current {\n    --graupl-icon-color: ;\n  }\n}\n@layer graupl.theme {\n  a.icon, a.icon-before, a.icon-after {\n    --graupl-icon-color: var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));\n  }\n  a.icon:visited, a.icon-before:visited, a.icon-after:visited {\n    --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, hsl(219, 80%, 35%))))));\n  }\n  a.icon.visited, a.icon-before.visited, a.icon-after.visited {\n    --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, hsl(219, 80%, 35%))))));\n  }\n  a.icon:focus-visible, a.icon-before:focus-visible, a.icon-after:focus-visible {\n    --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, hsl(219, 80%, 35%))))));\n  }\n  a.icon.focus, a.icon-before.focus, a.icon-after.focus {\n    --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, hsl(219, 80%, 35%))))));\n  }\n  a.icon:hover, a.icon-before:hover, a.icon-after:hover {\n    --graupl-icon-color: var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));\n  }\n  a.icon.hover, a.icon-before.hover, a.icon-after.hover {\n    --graupl-icon-color: var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));\n  }\n  a.icon:active, a.icon-before:active, a.icon-after:active {\n    --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, hsl(340, 65%, 35%))))));\n  }\n  a.icon.active, a.icon-before.active, a.icon-after.active {\n    --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, hsl(340, 65%, 35%))))));\n  }\n  a.icon:disabled, a.icon-before:disabled, a.icon-after:disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled:visited, a.icon-before:disabled:visited, a.icon-after:disabled:visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled.visited, a.icon-before:disabled.visited, a.icon-after:disabled.visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled:focus-visible, a.icon-before:disabled:focus-visible, a.icon-after:disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled.focus, a.icon-before:disabled.focus, a.icon-after:disabled.focus {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled:hover, a.icon-before:disabled:hover, a.icon-after:disabled:hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled.hover, a.icon-before:disabled.hover, a.icon-after:disabled.hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled:active, a.icon-before:disabled:active, a.icon-after:disabled:active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled.active, a.icon-before:disabled.active, a.icon-after:disabled.active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled[aria-selected=true], a.icon-before:disabled[aria-selected=true], a.icon-after:disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled.selected, a.icon-before:disabled.selected, a.icon-after:disabled.selected {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled[aria-current=true], a.icon-before:disabled[aria-current=true], a.icon-after:disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon:disabled.current, a.icon-before:disabled.current, a.icon-after:disabled.current {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled], a.icon-before[disabled], a.icon-after[disabled] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled]:visited, a.icon-before[disabled]:visited, a.icon-after[disabled]:visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled].visited, a.icon-before[disabled].visited, a.icon-after[disabled].visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled]:focus-visible, a.icon-before[disabled]:focus-visible, a.icon-after[disabled]:focus-visible {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled].focus, a.icon-before[disabled].focus, a.icon-after[disabled].focus {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled]:hover, a.icon-before[disabled]:hover, a.icon-after[disabled]:hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled].hover, a.icon-before[disabled].hover, a.icon-after[disabled].hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled]:active, a.icon-before[disabled]:active, a.icon-after[disabled]:active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled].active, a.icon-before[disabled].active, a.icon-after[disabled].active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled][aria-selected=true], a.icon-before[disabled][aria-selected=true], a.icon-after[disabled][aria-selected=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled].selected, a.icon-before[disabled].selected, a.icon-after[disabled].selected {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled][aria-current=true], a.icon-before[disabled][aria-current=true], a.icon-after[disabled][aria-current=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[disabled].current, a.icon-before[disabled].current, a.icon-after[disabled].current {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-disabled=true], a.icon-before[aria-disabled=true], a.icon-after[aria-disabled=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-disabled=true]:visited, a.icon-before[aria-disabled=true]:visited, a.icon-after[aria-disabled=true]:visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-disabled=true].visited, a.icon-before[aria-disabled=true].visited, a.icon-after[aria-disabled=true].visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-disabled=true]:focus-visible, a.icon-before[aria-disabled=true]:focus-visible, a.icon-after[aria-disabled=true]:focus-visible {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-disabled=true].focus, a.icon-before[aria-disabled=true].focus, a.icon-after[aria-disabled=true].focus {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-disabled=true]:hover, a.icon-before[aria-disabled=true]:hover, a.icon-after[aria-disabled=true]:hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-disabled=true].hover, a.icon-before[aria-disabled=true].hover, a.icon-after[aria-disabled=true].hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-disabled=true]:active, a.icon-before[aria-disabled=true]:active, a.icon-after[aria-disabled=true]:active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-disabled=true].active, a.icon-before[aria-disabled=true].active, a.icon-after[aria-disabled=true].active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  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] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-disabled=true].selected, a.icon-before[aria-disabled=true].selected, a.icon-after[aria-disabled=true].selected {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  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] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-disabled=true].current, a.icon-before[aria-disabled=true].current, a.icon-after[aria-disabled=true].current {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled, a.icon-before.disabled, a.icon-after.disabled {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled:visited, a.icon-before.disabled:visited, a.icon-after.disabled:visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled.visited, a.icon-before.disabled.visited, a.icon-after.disabled.visited {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled:focus-visible, a.icon-before.disabled:focus-visible, a.icon-after.disabled:focus-visible {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled.focus, a.icon-before.disabled.focus, a.icon-after.disabled.focus {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled:hover, a.icon-before.disabled:hover, a.icon-after.disabled:hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled.hover, a.icon-before.disabled.hover, a.icon-after.disabled.hover {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled:active, a.icon-before.disabled:active, a.icon-after.disabled:active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled.active, a.icon-before.disabled.active, a.icon-after.disabled.active {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled[aria-selected=true], a.icon-before.disabled[aria-selected=true], a.icon-after.disabled[aria-selected=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled.selected, a.icon-before.disabled.selected, a.icon-after.disabled.selected {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled[aria-current=true], a.icon-before.disabled[aria-current=true], a.icon-after.disabled[aria-current=true] {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon.disabled.current, a.icon-before.disabled.current, a.icon-after.disabled.current {\n    --graupl-icon-color: var(--graupl-link-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n  }\n  a.icon[aria-selected=true], a.icon-before[aria-selected=true], a.icon-after[aria-selected=true] {\n    --graupl-icon-color: ;\n  }\n  a.icon.selected, a.icon-before.selected, a.icon-after.selected {\n    --graupl-icon-color: ;\n  }\n  a.icon[aria-current=true], a.icon-before[aria-current=true], a.icon-after[aria-current=true] {\n    --graupl-icon-color: ;\n  }\n  a.icon.current, a.icon-before.current, a.icon-after.current {\n    --graupl-icon-color: ;\n  }\n}\n@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  }\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  }\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  }\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 typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: \":\" !default;\n$root-selector: \"root\" !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$body-selector-base: $selector-base !default;\n$body-selector: \"body\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$line-height: 1.2em !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n  xs: 0.694,\n  sm: 0.833,\n  base: 1,\n  lg: 1.2,\n  xl: 1.44,\n  2xl: 1.728,\n  3xl: 2.074,\n  4xl: 2.488,\n  5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n  $font-size-multipliers: map.merge(\n    $-font-size-multipliers,\n    $font-size-multipliers\n  );\n}\n\n// Weights.\n$-font-weights: (\n  light: 300,\n  normal: 400,\n  bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n  $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n  system-ui,\n  -apple-system,\n  blinkmacsystemfont,\n  \"Segoe UI\",\n  roboto,\n  \"Helvetica Neue\",\n  arial,\n  sans-serif !default;\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n  @if root-defaults.$use-layers {\n    @layer #{root-defaults.$id}.#{$layer} {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n","// @gruapl/icons button base styles.\n//\n// This module provides icon component integration for the button component.\n//\n// It sets the `--graupl-icon-color` custom property to the appropriate `--graupl-button-color` property.\n//\n// The following selectors are generated by default:\n// - `.button`: The button component.\n//\n// The following custom properties control the generated selectors:\n// - N/A\n//\n// The following variables control the generated selectors:\n// - N/A\n//\n// @example\n// <button class=\"button icon-after\">Button</button>\n\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/base/button/defaults\" as button-defaults;\n@use \"pkg:@graupl/core/src/base/button/variables\" as button;\n@use \"pkg:@graupl/core/src/mixins/layer\" as *;\n@use \"pkg:@graupl/core/src/mixins/theme\";\n@use \"../../component/icon/mixins\" as icon;\n@use \"../../component/icon/defaults\" as icon-defaults;\n@use \"variables\" as *;\n\n@include layer(theme) {\n  // .button\n  #{button-defaults.$button-selector-base}#{button-defaults.$button-selector} {\n    // &.icon, &.icon-before, &.icon-after\n    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-selector},\n    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-before-selector},\n    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-after-selector} {\n      @include icon.bind(button.$button-color, button.$button-color-states);\n\n      @if root-defaults.$themeable-components and button-defaults.$themeable {\n        @each $color, $map in button-defaults.$button-theme-map {\n          // &.primary, &.secondary, &.tertiary\n          &#{button-defaults.$button-theme-selector-base}#{button-defaults.$button-theme-selector-prefix}#{$color} {\n            @include icon.bind(\n              button.$button-color,\n              button.$button-color-states\n            );\n          }\n        }\n      }\n    }\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\" or $target == \"after\" {\n      content: \"\";\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/core state mixins.\n//\n// A series of mixins to tie styles to a state.\n\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific state.\n///\n/// @param {string} $state\n///   The name of the state to apply the styles to.\n@mixin state($state) {\n  @each $selector in map.get(root-defaults.$state-selectors, $state) {\n    &#{$selector} {\n      @content;\n    }\n  }\n}\n\n/// Generates state modifiers with properties.\n///\n/// @param {map} $state-map\n///   The map of props and states.\n/// @param {string} $selector-base\n///   The selector base for the state modifier.\n/// @param {string} $selector-prefix\n///   The selector prefix for the state modifer.\n@mixin generate-modifiers($state-map) {\n  @each $state, $selectors in root-defaults.$state-selectors {\n    @each $selector in $selectors {\n      // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled\n      &#{$selector} {\n        @each $prop, $map in $state-map {\n          #{$prop}: map.get($map, $state);\n        }\n\n        // If the state is disabled, we want that to supersede all other states.\n        @if $state == \"disabled\" {\n          @each $sub-state, $sub-selectors in root-defaults.$state-selectors {\n            @if $sub-state != $state {\n              @each $sub-selector in $sub-selectors {\n                // e.g &:visited, &:focus-visible, &:hover, &:active\n                &#{$sub-selector} {\n                  @each $prop, $map in $state-map {\n                    #{$prop}: map.get($map, $state);\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","// @gruapl/icons link base styles.\n//\n// This module provides icon component integration for the link component.\n//\n// It sets the `--graupl-icon-color` custom property to the appropriate `--graupl-link-color` property.\n//\n// The following selectors are generated by default:\n// - `a`: The link component.\n//\n// The following custom properties control the generated selectors:\n// - N/A\n//\n// The following variables control the generated selectors:\n// - N/A\n//\n// @example\n// <a href=\"#\" class=\"icon-after\">Link</a>\n\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/base/link/defaults\" as link-defaults;\n@use \"pkg:@graupl/core/src/base/link/variables\" as link;\n@use \"pkg:@graupl/core/src/mixins/layer\" as *;\n@use \"pkg:@graupl/core/src/mixins/theme\";\n@use \"../../component/icon/mixins\" as icon;\n@use \"../../component/icon/defaults\" as icon-defaults;\n@use \"variables\" as *;\n\n@include layer(theme) {\n  // a\n  #{link-defaults.$link-selector-base}#{link-defaults.$link-selector} {\n    // &.icon, &.icon-before, &.icon-after\n    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-selector},\n    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-before-selector},\n    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-after-selector} {\n      @include icon.bind(link.$link-color, link.$link-color-states);\n\n      @if root-defaults.$themeable-components and link-defaults.$themeable {\n        @each $color, $map in link-defaults.$link-theme-map {\n          // &.primary, &.secondary, &.tertiary\n          &#{link-defaults.$link-theme-selector-base}#{link-defaults.$link-theme-selector-prefix}#{$color} {\n            @include icon.bind(link.$link-color, link.$link-color-states);\n          }\n        }\n      }\n    }\n  }\n}\n","// @graupl/icons icon componet variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Property                  | Default                   |\n// | ------------------------- | ------------------------- |\n// | --graupl-icon-display     | inline-block              |\n// | --graupl-icon-size        | 1.25em                    |\n// | --graupl-icon-width       | var(--graupl-icon-size)   |\n// | --graupl-icon-height      | var(--graupl-icon-size)   |\n// | --graupl-icon-color       | var(--graupl-color)       |\n// | --graupl-icon             | none                      |\n// | --graupl-icon-spacer      | var(--graupl-spacer-2)    |\n\n@use \"defaults\";\n@use \"pkg:@graupl/core/src/defaults\" as root-defaults;\n@use \"pkg:@graupl/core/src/theme/color/variables\" as color;\n@use \"pkg:@graupl/core/src/variables\" as root-variables;\n@use \"sass:map\";\n\n$icon-display: var(\n  --#{root-defaults.$prefix}icon-display,\n  #{defaults.$icon-display}\n);\n$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});\n$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});\n$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});\n$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});\n$icon: var(--#{root-defaults.$prefix}icon, none);\n$icon-spacer: var(\n  --#{root-defaults.$prefix}icon-spacer,\n  #{map.get(root-variables.$spacers, 2)}\n);\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n///   The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n  #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n    @content;\n  }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n///   The map of custom props.\n/// @param {string} $selector-base\n///   The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n///   The selector prefix for the theme modifer.\n/// @param {string} $scope\n///   The scope of the custom properties.\n/// @param {string} $base\n///   The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n  $theme-map,\n  $selector-base,\n  $selector-prefix,\n  $scope: \"\",\n  $base: \"&\"\n) {\n  @each $color, $map in $theme-map {\n    // e.g. &.primary, &.secondary, &.tertiary\n    #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n      @each $prop, $value in $map {\n        --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n            map.get($value, color),\n            map.get($value, shade)\n          )};\n      }\n    }\n  }\n}\n"],"names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/icons",
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.26",
   "description": "A plugin for Graupl that provides bare-minimum icon components.",
   "type": "module",
   "files": [

package/src/scss/base/button/_index.scss

@@ -16,40 +16,32 @@
 // @example
 // <button class="button icon-after">Button</button>
 
+@use "pkg:@graupl/core/src/defaults" as root-defaults;
 @use "pkg:@graupl/core/src/base/button/defaults" as button-defaults;
 @use "pkg:@graupl/core/src/base/button/variables" as button;
-@use "pkg:@graupl/core/src/defaults" as root-defaults;
 @use "pkg:@graupl/core/src/mixins/layer" as *;
-@use "sass:map";
+@use "pkg:@graupl/core/src/mixins/theme";
+@use "../../component/icon/mixins" as icon;
+@use "../../component/icon/defaults" as icon-defaults;
 @use "variables" as *;
 
 @include layer(theme) {
   // .button
   #{button-defaults.$button-selector-base}#{button-defaults.$button-selector} {
-    --#{root-defaults.$prefix}icon-color: #{button.$button-color};
-
-    @each $state, $selectors in root-defaults.$state-selectors {
-      @each $selector in $selectors {
-        // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
-        &#{$selector} {
-          --#{root-defaults.$prefix}icon-color: #{map.get(
-              button.$button-color-states,
-              $state
-            )};
+    // &.icon, &.icon-before, &.icon-after
+    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-selector},
+    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-before-selector},
+    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-after-selector} {
+      @include icon.bind(button.$button-color, button.$button-color-states);
 
-          // If the state is disabled, we want that to supersede all other states.
-          @if $state == "disabled" {
-            @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
-              @each $sub-selector in $sub-selectors {
-                // e.g &:visited, &:focus-visible, &:hover, &:active
-                &#{$sub-selector} {
-                  --#{root-defaults.$prefix}icon-color: #{map.get(
-                      button.$button-color-states,
-                      $state
-                    )};
-                }
-              }
-            }
+      @if root-defaults.$themeable-components and button-defaults.$themeable {
+        @each $color, $map in button-defaults.$button-theme-map {
+          // &.primary, &.secondary, &.tertiary
+          &#{button-defaults.$button-theme-selector-base}#{button-defaults.$button-theme-selector-prefix}#{$color} {
+            @include icon.bind(
+              button.$button-color,
+              button.$button-color-states
+            );
           }
         }
       }

package/src/scss/base/link/_index.scss

@@ -16,40 +16,29 @@
 // @example
 // <a href="#" class="icon-after">Link</a>
 
+@use "pkg:@graupl/core/src/defaults" as root-defaults;
 @use "pkg:@graupl/core/src/base/link/defaults" as link-defaults;
 @use "pkg:@graupl/core/src/base/link/variables" as link;
-@use "pkg:@graupl/core/src/defaults" as root-defaults;
 @use "pkg:@graupl/core/src/mixins/layer" as *;
-@use "sass:map";
+@use "pkg:@graupl/core/src/mixins/theme";
+@use "../../component/icon/mixins" as icon;
+@use "../../component/icon/defaults" as icon-defaults;
 @use "variables" as *;
 
 @include layer(theme) {
   // a
   #{link-defaults.$link-selector-base}#{link-defaults.$link-selector} {
-    --#{root-defaults.$prefix}icon-color: #{link.$link-color};
-
-    @each $state, $selectors in root-defaults.$state-selectors {
-      @each $selector in $selectors {
-        // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
-        &#{$selector} {
-          --#{root-defaults.$prefix}icon-color: #{map.get(
-              link.$link-color-states,
-              $state
-            )};
+    // &.icon, &.icon-before, &.icon-after
+    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-selector},
+    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-before-selector},
+    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-after-selector} {
+      @include icon.bind(link.$link-color, link.$link-color-states);
 
-          // If the state is disabled, we want that to supersede all other states.
-          @if $state == "disabled" {
-            @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
-              @each $sub-selector in $sub-selectors {
-                // e.g &:visited, &:focus-visible, &:hover, &:active
-                &#{$sub-selector} {
-                  --#{root-defaults.$prefix}icon-color: #{map.get(
-                      link.$link-color-states,
-                      $state
-                    )};
-                }
-              }
-            }
+      @if root-defaults.$themeable-components and link-defaults.$themeable {
+        @each $color, $map in link-defaults.$link-theme-map {
+          // &.primary, &.secondary, &.tertiary
+          &#{link-defaults.$link-theme-selector-base}#{link-defaults.$link-theme-selector-prefix}#{$color} {
+            @include icon.bind(link.$link-color, link.$link-color-states);
           }
         }
       }

package/src/scss/component/icon/_defaults.scss

@@ -7,19 +7,22 @@
 // Those should be defined as custom properties in the `_variables.scss` file.
 
 @use "pkg:@graupl/core/src/scss/defaults" as root-defaults;
+@use "pkg:@graupl/core/src/functions/theme";
 @use "sass:map";
 
 // Icon selectors.
 $selector-base: root-defaults.$component-selector-base !default;
 $modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
+$themeable: true !default;
 $icon-selector-base: $selector-base !default;
 $icon-selector: "icon" !default;
 $icon-before-selector: "#{$icon-selector}-before" !default;
 $icon-after-selector: "#{$icon-selector}-after" !default;
+$icon-theme-selector-base: $modifier-selector-base !default;
+$icon-theme-selector-prefix: "" !default;
 $icon-prefix-selector-base: $modifier-selector-base !default;
 $icon-prefix-selector: "" !default;
-$icon-color-prefix-selector-base: $modifier-selector-base !default;
-$icon-color-prefix-selector: "" !default;
 
 // Icon properties.
 $icon-display: inline-block !default;
@@ -27,12 +30,26 @@ $icon-size: 1.25em !default;
 
 // Icons.
 // This should be a key/value pair for the name of the icon and the path to the icon's SVG.
-$custom-icons: () !default;
 $icons: () !default;
 
-// @todo remove this once $custom-icons is removed
-@if $custom-icons != () {
-  @warn "`$custom-icons` is deprecated and will be removed in a future release of Graupl. Use `$icons` instead.";
+// Button state theme defaults.
+// This map is used to define the default colour shades for the
+// themed icon bases.
+//
+// e.g.
+// Primary icons will use primary--900 as the colour.
+//
+// Secondary/tertiary icons will use the same shade for their respective colours.
+$-icon-theme-mappings: (
+  color: 500,
+);
+$icon-theme-mappings: () !default;
 
-  $icons: map.merge($icons, $custom-icons);
+// Merge the custom icon state theme map with the default one.
+@if $generate-base-theme-map {
+  $icon-theme-mappings: map.merge($-icon-theme-mappings, $icon-theme-mappings);
 }
+
+$-icon-theme-map: theme.generate-property-map($icon-theme-mappings);
+$icon-theme-map: () !default;
+$icon-theme-map: map.deep-merge($-icon-theme-map, $icon-theme-map);