@graupl/graupl 1.0.0-beta.48 → 1.0.0-beta.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/base/form.css.map +1 -1
- package/dist/css/base.css.map +1 -1
- package/dist/css/component/input-group.css +1 -1
- package/dist/css/component/input-group.css.map +1 -1
- package/dist/css/component.css +1 -1
- package/dist/css/component.css.map +1 -1
- package/dist/css/graupl.css +1 -1
- package/dist/css/graupl.css.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"AESI,mBC+L8B,6wDAW5B,2PAO4B,gJAKG,2hFAa7B,wWDnOJ,oBC+O8B,+3BAQ9B,mOAME,qYAIE,0SAJF,wYAIE,6SAJF,saAIE,2UAJF,qYAIE,0SElOJ,q5BAAA,+7BAAA,06BFmP8B,iOAK5B,seExPF,qbAAA,ycAAA,+bAAA,q3BAAA,25BAAA,w4BFkRiC,4uBAO/B,ybAIE,8NAJF,0bAIE,+NAJF,ocAIE,yOAJF,ybAIE,8NE7RJ,olBAAA,8mBAAA,imBAAA,wbAAA,4cAAA,kcAAA,w3BAAA,85BAAA","sources":["dist/css/base/form.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/node_modules/@graupl/core/src/scss/base/form/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/base/form/_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.base {\n input,\n textarea,\n select {\n padding: var(--graupl-input-padding, var(--graupl-input-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-input-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n border-width: var(--graupl-input-border-width, var(--graupl-input-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-input-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-input-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-input-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-input-border-style, var(--graupl-input-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-input-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-input-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-input-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-input-border-radius, var(--graupl-input-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-input-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-input-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-input-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n font-size: var(--graupl-input-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem))));\n }\n input:disabled,\n textarea:disabled,\n select:disabled {\n cursor: not-allowed;\n }\n input[disabled],\n textarea[disabled],\n select[disabled] {\n cursor: not-allowed;\n }\n input[aria-disabled=true],\n textarea[aria-disabled=true],\n select[aria-disabled=true] {\n cursor: not-allowed;\n }\n input.disabled,\n textarea.disabled,\n select.disabled {\n cursor: not-allowed;\n }\n label {\n font-size: var(--graupl-label-font-size, var(--graupl-input-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem)))));\n }\n fieldset {\n display: flex;\n flex-flow: var(--graupl-fieldset-direction, column) wrap;\n gap: var(--graupl-fieldset-gap, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n padding: var(--graupl-fieldset-padding, var(--graupl-fieldset-padding-y, var(--graupl-input-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))))) var(--graupl-fieldset-padding-x, var(--graupl-input-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n border-width: var(--graupl-fieldset-border-width, var(--graupl-fieldset-border-top-width, var(--graupl-input-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-fieldset-border-right-width, var(--graupl-input-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-fieldset-border-bottom-width, var(--graupl-input-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-fieldset-border-left-width, var(--graupl-input-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)))));\n border-style: var(--graupl-fieldset-border-style, var(--graupl-fieldset-border-top-style, var(--graupl-input-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid)))) var(--graupl-fieldset-border-right-style, var(--graupl-input-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid)))) var(--graupl-fieldset-border-bottom-style, var(--graupl-input-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid)))) var(--graupl-fieldset-border-left-style, var(--graupl-input-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid)))));\n border-radius: var(--graupl-fieldset-border-radius, var(--graupl-fieldset-border-top-left-radius, var(--graupl-input-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-fieldset-border-top-right-radius, var(--graupl-input-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-fieldset-border-bottom-right-radius, var(--graupl-input-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-fieldset-border-bottom-left-radius, var(--graupl-input-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem)))));\n font-size: var(--graupl-fieldset-font-size, var(--graupl-input-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem)))));\n }\n fieldset:disabled input,\n fieldset:disabled textarea,\n fieldset:disabled select {\n cursor: not-allowed;\n }\n fieldset[disabled] input,\n fieldset[disabled] textarea,\n fieldset[disabled] select {\n cursor: not-allowed;\n }\n fieldset[aria-disabled=true] input,\n fieldset[aria-disabled=true] textarea,\n fieldset[aria-disabled=true] select {\n cursor: not-allowed;\n }\n fieldset.disabled input,\n fieldset.disabled textarea,\n fieldset.disabled select {\n cursor: not-allowed;\n }\n}\n@layer graupl.theme {\n input,\n textarea,\n select {\n border-color: var(--graupl-input-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-input-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-input-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 accent-color: var(--graupl-input-accent-color, var(--graupl-input-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 input::placeholder,\n textarea::placeholder,\n select::placeholder {\n color: var(--graupl-input-placeholder-color, var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)))));\n }\n input:disabled,\n textarea:disabled,\n select:disabled {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input:disabled::placeholder,\n textarea:disabled::placeholder,\n select:disabled::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input[disabled],\n textarea[disabled],\n select[disabled] {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input[disabled]::placeholder,\n textarea[disabled]::placeholder,\n select[disabled]::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input[aria-disabled=true],\n textarea[aria-disabled=true],\n select[aria-disabled=true] {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input[aria-disabled=true]::placeholder,\n textarea[aria-disabled=true]::placeholder,\n select[aria-disabled=true]::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input.disabled,\n textarea.disabled,\n select.disabled {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input.disabled::placeholder,\n textarea.disabled::placeholder,\n select.disabled::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input.primary,\n textarea.primary,\n select.primary {\n --graupl-input-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--primary--600, var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n input.secondary,\n textarea.secondary,\n select.secondary {\n --graupl-input-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n input.tertiary,\n textarea.tertiary,\n select.tertiary {\n --graupl-input-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--tertiary--600, var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n label {\n color: var(--graupl-label-color, var(--graupl-input-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 label:has(+ input:disabled,\n + textarea:disabled,\n + select:disabled) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label:has(+ input[disabled],\n + textarea[disabled],\n + select[disabled]) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label:has(+ input[aria-disabled=true],\n + textarea[aria-disabled=true],\n + select[aria-disabled=true]) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label:has(+ input.disabled,\n + textarea.disabled,\n + select.disabled) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label.primary {\n --graupl-label-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n }\n label.secondary {\n --graupl-label-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n }\n label.tertiary {\n --graupl-label-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n }\n label.primary {\n --graupl-input-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--primary--600, var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n label.secondary {\n --graupl-input-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n label.tertiary {\n --graupl-input-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--tertiary--600, var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n fieldset {\n border-color: var(--graupl-fieldset-border-color, var(--graupl-input-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-fieldset-background, var(--graupl-input-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-fieldset-color, var(--graupl-input-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 fieldset:disabled {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset:disabled label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[disabled] {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[disabled] label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[aria-disabled=true] {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[aria-disabled=true] label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset.disabled {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset.disabled label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset.primary {\n --graupl-fieldset-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-fieldset-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-fieldset-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-fieldset-accent-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n }\n fieldset.secondary {\n --graupl-fieldset-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-fieldset-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-fieldset-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-fieldset-accent-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n }\n fieldset.tertiary {\n --graupl-fieldset-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-fieldset-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-fieldset-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-fieldset-accent-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n }\n fieldset.primary {\n --graupl-label-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n }\n fieldset.secondary {\n --graupl-label-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n }\n fieldset.tertiary {\n --graupl-label-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n }\n fieldset.primary {\n --graupl-input-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--primary--600, var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n fieldset.secondary {\n --graupl-input-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n fieldset.tertiary {\n --graupl-input-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--tertiary--600, var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n}","// @graupl/core typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: root-defaults.$root-selector-base !default;\n$root-selector: root-defaults.$root-selector !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$emphasis-selector-base: $selector-base !default;\n$emphasis-selector: \"em\" !default;\n$italic-selector-base: $selector-base !default;\n$italic-selector: \"i\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$root-line-height: 1.2em !default;\n$root-letter-spacing: normal !default;\n$root-word-spacing: normal !default;\n$root-font-style: normal !default;\n$root-font-variant: normal !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n xs: 0.694,\n sm: 0.833,\n base: 1,\n lg: 1.2,\n xl: 1.44,\n 2xl: 1.728,\n 3xl: 2.074,\n 4xl: 2.488,\n 5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n $font-size-multipliers: map.merge(\n $-font-size-multipliers,\n $font-size-multipliers\n );\n}\n\n// Weights.\n$-font-weights: (\n light: 300,\n normal: 400,\n bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n system-ui,\n -apple-system,\n blinkmacsystemfont,\n \"Segoe UI\",\n roboto,\n \"Helvetica Neue\",\n arial,\n sans-serif !default;\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core form base styles.\n//\n// This module provides the base styles for form components such as inputs, textareas, selects, labels, and fieldsets.\n//\n// The following selectors are generated by default:\n// - `input`: The input component.\n// - `textarea`: The textarea component.\n// - `select`: The select component.\n// - `label`: The label component.\n// - `fieldset`: The fieldset component.\n//\n// The following custom properties can be used to customize the form components:\n// | Property | Description | Default Value |\n// | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-input-padding-x` | The horizontal padding for input components. | `var(--graupl-spacer-5)` |\n// | `--graupl-input-padding-y` | The vertical padding for input components. | `var(--graupl-spacer-3)` |\n// | `--graupl-input-padding` | The padding for input components (combines x and y padding). | `var(--graupl-input-padding-y) var(--graupl-input-padding-x)` |\n// | `--graupl-input-font-size` | The font size for input components. | `var(--graupl-font-size-base)` |\n// | `--graupl-label-font-size` | The font size for label components. | `var(--graupl-input-font-size)` |\n// | `--graupl-fieldset-direction` | The direction of fieldset items- controls the `flex-direction` property. | `column` |\n// | `--graupl-fieldset-gap` | The gap between fieldset items. | `var(--graupl-spacer-2)` |\n// | `--graupl-fieldset-padding-x` | The horizontal padding for fieldset components. | `var(--graupl-input-padding-x)` |\n// | `--graupl-fieldset-padding-y` | The vertical padding for fieldset components. | `var(--graupl-input-padding-y)` |\n// | `--graupl-fieldset-padding` | The padding for fieldset components (combines x and y padding). | `var(--graupl-fieldset-padding-y) var(--graupl-fieldset-padding-x)` |\n// | `--graupl-fieldset-font-size` | The font size for fieldset components. | `var(--graupl-input-font-size)` |\n// | `--graupl-input-background` | The background color for input components. | `var(--graupl-background)` |\n// | `--graupl-fieldset-background` | The background color for fieldset components. | `var(--graupl-input-background)` |\n// | `--graupl-input-color` | The text color for input components. | `var(--graupl-color)` |\n// | `--graupl-input-placeholder-color` | The placeholder text color for input components. | `var(--graupl-theme-active--secondary--600)` |\n// | `--graupl-label-color` | The text color for label components. | `var(--graupl-input-color)` |\n// | `--graupl-fieldset-color` | The text color for fieldset components. | `var(--graupl-input-color)` |\n// | `--graupl-input-disabled-color` | The text color for disabled input components. | `var(--graupl-theme-active--secondary--400)` |\n// | `--graupl-input-placeholder-disabled-color` | The placeholder text color for disabled input components. | `var(--graupl-input-disabled-color)` |\n// | `--graupl-label-disabled-color` | The text color for labels for disabled components. | `var(--graupl-input-disabled-color)` |\n// | `--graupl-fieldset-disabled-color` | The text color for disabled fieldset components. | `var(--graupl-input-disabled-color)` |\n// | `--graupl-input-border-top-width` | The top border width for input components. | `var(--graupl-border-top-width)` |\n// | `--graupl-input-border-right-width` | The right border width for input components. | `var(--graupl-border-right-width)` |\n// | `--graupl-input-border-bottom-width` | The bottom border width for input components. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-input-border-left-width` | The left border width for input components. | `var(--graupl-border-left-width)` |\n// | `--graupl-input-border-width` | The border width for input components (combines top, right, bottom, and left widths). | `var(--graupl-input-border-top-width) var(--graupl-input-border-right-width) var(--graupl-input-border-bottom-width) var(--graupl-input-border-left-width)` |\n// | `--graupl-input-border-top-style` | The top border style for input components. | `var(--graupl-border-top-style)` |\n// | `--graupl-input-border-right-style` | The right border style for input components. | `var(--graupl-border-right-style)` |\n// | `--graupl-input-border-bottom-style` | The bottom border style for input components. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-input-border-left-style` | The left border style for input components. | `var(--graupl-border-left-style)` |\n// | `--graupl-input-border-style` | The border style for input components (combines top, right, bottom, and left styles). | `var(--graupl-input-border-top-style) var(--graupl-input-border-right-style) var(--graupl-input-border-bottom-style) var(--graupl-input-border-left-style)` |\n// | `--graupl-input-border-top-left-radius` | The top-left border radius for input components. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-input-border-top-right-radius` | The top-right border radius for input components. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-input-border-bottom-right-radius` | The bottom-right border radius for input components. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-input-border-bottom-left-radius` | The bottom-left border radius for input components. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-input-border-radius` | The border radius for input components (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-input-border-top-left-radius) var(--graupl-input-border-top-right-radius) var(--graupl-input-border-bottom-right-radius) var(--graupl-input-border-bottom-left-radius)` |\n// | `--graupl-fieldset-border-top-width` | The top border width for fieldset components. | `var(--graupl-input-border-top-width)` |\n// | `--graupl-fieldset-border-right-width` | The right border width for fieldset components. | `var(--graupl-input-border-right-width)` |\n// | `--graupl-fieldset-border-bottom-width` | The bottom border width for fieldset components. | `var(--graupl-input-border-bottom-width)` |\n// | `--graupl-fieldset-border-left-width` | The left border width for fieldset components. | `var(--graupl-input-border-left-width)` |\n// | `--graupl-fieldset-border-width` | The border width for fieldset components (combines top, right, bottom, and left widths). | `var(--graupl-fieldset-border-top-width) var(--graupl-fieldset-border-right-width) var(--graupl-fieldset-border-bottom-width) var(--graupl-fieldset-border-left-width)` |\n// | `--graupl-fieldset-border-top-style` | The top border style for fieldset components. | `var(--graupl-input-border-top-style)` |\n// | `--graupl-fieldset-border-right-style` | The right border style for fieldset components. | `var(--graupl-input-border-right-style)` |\n// | `--graupl-fieldset-border-bottom-style` | The bottom border style for fieldset components. | `var(--graupl-input-border-bottom-style)` |\n// | `--graupl-fieldset-border-left-style` | The left border style for fieldset components. | `var(--graupl-input-border-left-style)` |\n// | `--graupl-fieldset-border-style` | The border style for fieldset components (combines top, right, bottom, and left styles). | `var(--graupl-fieldset-border-top-style) var(--graupl-fieldset-border-right-style) var(--graupl-fieldset-border-bottom-style) var(--graupl-fieldset-border-left-style)` |\n// | `--graupl-fieldset-border-top-left-radius` | The top-left border radius for fieldset components. | `var(--graupl-input-border-top-left-radius)` |\n// | `--graupl-fieldset-border-top-right-radius` | The top-right border radius for fieldset components. | `var(--graupl-input-border-top-right-radius)` |\n// | `--graupl-fieldset-border-bottom-right-radius` | The bottom-right border radius for fieldset components. | `var(--graupl-input-border-bottom-right-radius)` |\n// | `--graupl-fieldset-border-bottom-left-radius` | The bottom-left border radius for fieldset components. | `var(--graupl-input-border-bottom-left-radius)` |\n// | `--graupl-fieldset-border-radius` | The border radius for fieldset components (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-fieldset-border-top-left-radius) var(--graupl-fieldset-border-top-right-radius) var(--graupl-fieldset-border-bottom-right-radius) var(--graupl-fieldset-border-bottom-left-radius)` |\n// | `--graupl-input-border-color` | The border color for input components. | `var(--graupl-border-color)` |\n// | `--graupl-input-disabled-border-color` | The border color for disabled input components. | `var(--graupl-theme-active--secondary--200)` |\n// | `--graupl-fieldset-border-color` | The border color for fieldset components. | `var(--graupl-input-border-color)` |\n// | `--graupl-fieldset-disabled-border-color` | The border color for disabled fieldset components. | `var(--graupl-input-disabled-border-color)` |\n// | `--graupl-input-accent-color` | The accent color for input components. | `var(--graupl-input-color)` |\n//\n// The following sass variables can be used to customize the generation of the form components:\n// | Variable | Description | Default Value |\n// | -------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------- |\n// | `$selector-base` | The selector base for the component. | `\"\"` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme maps for form elements. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `true` |\n// | `$input-selector-base` | The base selector for the input component. | `\"\"` |\n// | `$input-selector` | The input component selector. | `\"input\"` |\n// | `$input-theme-prefix-selector-base` | Selector base used for input theme modifiers. | `\".\"` |\n// | `$input-theme-prefix-selector` | Selector prefix used for input theme modifiers. | `\"\"` |\n// | `$textarea-selector-base` | The base selector for the textarea component. | `\"\"` |\n// | `$textarea-selector` | The textarea component selector. | `\"textarea\"` |\n// | `$select-selector-base` | The base selector for the select component. | `\"\"` |\n// | `$select-selector` | The select component selector. | `\"select\"` |\n// | `$label-selector-base` | The base selector for the label component. | `\"\"` |\n// | `$label-selector` | The label component selector. | `\"label\"` |\n// | `$label-theme-prefix-selector-base` | Selector base used for label theme modifiers. | `\".\"` |\n// | `$label-theme-prefix-selector` | Selector prefix used for label theme modifiers. | `\"\"` |\n// | `$fieldset-selector-base` | The base selector for the fieldset component. | `\"\"` |\n// | `$fieldset-selector` | The fieldset component selector. | `\"fieldset\"` |\n// | `$fieldset-theme-prefix-selector-base` | Selector base used for fieldset theme modifiers. | `\".\"` |\n// | `$fieldset-theme-prefix-selector` | Selector prefix used for fieldset theme modifiers. | `\"\"` |\n// | `$fieldset-direction` | The direction of fieldset component items. | `column` |\n// | `$input-theme-mappings` | Map of properties and shade values applied to themed input variants. | `()` |\n// | `$input-theme-map` | Fully expanded property map used to generate themed input variants. | `map.deep-merge($-input-theme-map, $input-theme-map)` |\n// | `$label-theme-mappings` | Map of properties and shade values applied to themed label variants. | `()` |\n// | `$label-theme-map` | Fully expanded property map used to generate themed label variants. | `map.deep-merge($-label-theme-map, $label-theme-map)` |\n// | `$fieldset-theme-mappings` | Map of properties and shade values applied to themed fieldset variants. | `()` |\n// | `$fieldset-theme-map` | Fully expanded property map used to generate themed fieldset variants. | `map.deep-merge($-fieldset-theme-map, $fieldset-theme-map)` |\n//\n// ## Using `$input-theme-mappings`, `$label-theme-mappings`, and `$fieldset-theme-mappings`\n//\n// Each of these variables is a single-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $input-theme-mappings: (\n// color: 900,\n// background: 100,\n// border-color: 700,\n// );\n// ```\n//\n// This directly[1] informs all input variants what shade to use for each property key.\n// Based on the example above:\n// - Primary inputs expose `--graupl-input-color`, `--graupl-input-background`, and `--graupl-input-border-color` as `var(--graupl-theme-active--primary--900/100/700)`,\n// - Secondary inputs expose those properties via the secondary palette, and\n// - Tertiary inputs expose those properties via the tertiary palette.\n//\n// The same pattern applies to `$label-theme-mappings` and `$fieldset-theme-mappings`, ensuring every form element stays in sync across variants.\n//\n// ```scss\n// $label-theme-mappings: (\n// color: 800,\n// );\n// $fieldset-theme-mappings: (\n// background: 50,\n// border-color: 600,\n// );\n// ```\n//\n// - Primary labels use `--graupl-theme-active--primary--800` for `--graupl-label-color`,\n// - Primary fieldsets use `--graupl-theme-active--primary--50` / `--graupl-theme-active--primary--600` for their background/border colours, and other variants follow suit using their palettes.\n//\n// [1] Each `*-theme-mappings` map gets parsed into a larger, more explicit map: the corresponding `*-theme-map`.\n//\n// ## Using `$input-theme-map`, `$label-theme-map`, and `$fieldset-theme-map`\n//\n// These variables are multi-level maps of properties, colours, and shade values, allowing you to override individual variants without affecting the others.\n//\n// e.g.\n// ```scss\n// $input-theme-map: (\n// primary: (\n// border-color: (\n// color: primary,\n// shade: 950,\n// ),\n// ),\n// secondary: (\n// background: (\n// color: secondary,\n// shade: 200,\n// ),\n// ),\n// );\n// ```\n//\n// This example deepens the primary input border colour while lightening the secondary input background. You can mix and match overrides for labels and fieldsets in their respective maps to target variants independently.\n//\n// @example\n// <label for=\"input-id\">Input Label</label>\n// <input id=\"input-id\" type=\"text\" placeholder=\"Enter text\" />\n//\n// @example\n// <label for=\"textarea-id\">Textarea Label</label>\n// <textarea id=\"textarea-id\" placeholder=\"Enter text\"></textarea>\n//\n// @example\n// <label for=\"select-id\">Select Label</label>\n// <select id=\"select-id\">\n// <option value=\"1\">Option 1</option>\n// <option value=\"2\">Option 2</option>\n// </select>\n//\n// @example\n// <fieldset>\n// <legend>Fieldset Legend</legend>\n// <label for=\"input-id\">Input Label</label>\n// <input id=\"input-id\" type=\"text\" placeholder=\"Enter text\" />\n// <label for=\"textarea-id\">Textarea Label</label>\n// <textarea id=\"textarea-id\" placeholder=\"Enter text\"></textarea>\n// <label for=\"select-id\">Select Label</label>\n// <select id=\"select-id\">\n// <option value=\"1\">Option 1</option>\n// <option value=\"2\">Option 2</option>\n// </select>\n// </fieldset>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/theme\";\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(base) {\n // input, textarea, select\n #{defaults.$input-selector-base}#{defaults.$input-selector},\n #{defaults.$textarea-selector-base}#{defaults.$textarea-selector},\n #{defaults.$select-selector-base}#{defaults.$select-selector} {\n padding: $input-padding;\n border-width: $input-border-width;\n border-style: $input-border-style;\n border-radius: $input-border-radius;\n font-size: $input-font-size;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n cursor: not-allowed;\n }\n }\n }\n\n // label\n #{defaults.$label-selector-base}#{defaults.$label-selector} {\n font-size: $label-font-size;\n }\n\n // fieldset\n #{defaults.$fieldset-selector-base}#{defaults.$fieldset-selector} {\n display: flex;\n flex-flow: $fieldset-direction wrap;\n gap: $fieldset-gap;\n padding: $fieldset-padding;\n border-width: $fieldset-border-width;\n border-style: $fieldset-border-style;\n border-radius: $fieldset-border-radius;\n font-size: $fieldset-font-size;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n #{defaults.$input-selector},\n #{defaults.$textarea-selector},\n #{defaults.$select-selector} {\n cursor: not-allowed;\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // input, textarea, select\n #{defaults.$input-selector-base}#{defaults.$input-selector},\n #{defaults.$textarea-selector-base}#{defaults.$textarea-selector},\n #{defaults.$select-selector-base}#{defaults.$select-selector} {\n border-color: $input-border-color;\n background: $input-background;\n color: $input-color;\n accent-color: $input-accent-color;\n\n &::placeholder {\n color: $input-placeholder-color;\n }\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n border-color: $input-disabled-border-color;\n color: $input-disabled-color;\n\n &::placeholder {\n color: $input-placeholder-disabled-color;\n }\n }\n }\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$input-theme-map,\n defaults.$input-theme-prefix-selector-base,\n defaults.$input-theme-prefix-selector,\n \"input-\"\n );\n }\n }\n\n // label\n #{defaults.$label-selector-base}#{defaults.$label-selector} {\n color: $label-color;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // &:has(:disabled, .disabled)\n &:has(\n + #{defaults.$input-selector-base}#{defaults.$input-selector}#{$selector},\n + #{defaults.$textarea-selector-base}#{defaults.$textarea-selector}#{$selector},\n + #{defaults.$select-selector-base}#{defaults.$select-selector}#{$selector}\n ) {\n color: $label-disabled-color;\n }\n }\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$label-theme-map,\n defaults.$label-theme-prefix-selector-base,\n defaults.$label-theme-prefix-selector,\n \"label-\"\n );\n @include theme.generate-modifiers(\n defaults.$input-theme-map,\n defaults.$input-theme-prefix-selector-base,\n defaults.$input-theme-prefix-selector,\n \"input-\"\n );\n }\n }\n\n // fieldset\n #{defaults.$fieldset-selector-base}#{defaults.$fieldset-selector} {\n border-color: $fieldset-border-color;\n background: $fieldset-background;\n color: $fieldset-color;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n border-color: $fieldset-disabled-border-color;\n color: $fieldset-disabled-color;\n\n #{defaults.$label-selector} {\n color: $label-disabled-color;\n }\n }\n }\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$fieldset-theme-map,\n defaults.$fieldset-theme-prefix-selector-base,\n defaults.$fieldset-theme-prefix-selector,\n \"fieldset-\"\n );\n @include theme.generate-modifiers(\n defaults.$label-theme-map,\n defaults.$label-theme-prefix-selector-base,\n defaults.$label-theme-prefix-selector,\n \"label-\"\n );\n @include theme.generate-modifiers(\n defaults.$input-theme-map,\n defaults.$input-theme-prefix-selector-base,\n defaults.$input-theme-prefix-selector,\n \"input-\"\n );\n }\n }\n}\n","// @graupl/core form base variables.\n//\n// These values are to be used to directly style bases and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-input-padding-x | var(--graupl-spacer-5) |\n// | --graupl-input-padding-y | var(--graupl-spacer-3) |\n// | --graupl-input-padding | var(--graupl-input-padding-y) var(--graupl-input-padding-x) |\n// | --graupl-input-font-size | var(--graupl-font-base) |\n// | --graupl-label-font-size | var(--graupl-input-font-size) |\n// | --graupl-fieldset-direction | column |\n// | --graupl-fieldset-gap | var(--graupl-spacer-2) |\n// | --graupl-fieldset-padding-x | var(--graupl-input-padding-x) |\n// | --graupl-fieldset-padding-y | var(--graupl-input-padding-y) |\n// | --graupl-fieldset-padding | var(--graupl-fieldset-padding-y) var(--graupl-fieldset-padding-x) |\n// | --graupl-fieldset-font-size | var(--graupl-input-font-size) |\n// | --graupl-input-background | var(--graupl-background) |\n// | --graupl-fieldset-background | var(--graupl-input-background) |\n// | --graupl-input-color | var(--graupl-color) |\n// | --graupl-input-placeholder-color | var(--graupl-theme-active--secondary--600) |\n// | --graupl-label-color | var(--graupl-input-color) |\n// | --graupl-fieldset-color | var(--graupl-input-color) |\n// | --graupl-input-disabled-color | var(--graupl-theme-active--secondary--400) |\n// | --graupl-input-placeholder-disabled-color | var(--graupl-input-disabled-color) |\n// | --graupl-label-disabled-color | var(--graupl-input-disabled-color) |\n// | --graupl-fieldset-disabled-color | var(--graupl-input-disabled-color) |\n// | --graupl-input-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-input-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-input-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-input-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-input-border-width | var(--graupl-input-border-top-width) var(--graupl-input-border-right-width) var(--graupl-input-border-bottom-width) var(--graupl-input-border-left-width) |\n// | --graupl-input-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-input-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-input-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-input-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-input-border-style | var(--graupl-input-border-top-style) var(--graupl-input-border-right-style) var(--graupl-input-border-bottom-style) var(--graupl-input-border-left-style) |\n// | --graupl-input-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-input-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-input-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-input-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-input-border-radius | var(--graupl-input-border-top-left-radius) var(--graupl-input-border-top-right-radius) var(--graupl-input-border-bottom-right-radius) var(--graupl-input-border-bottom-left-radius) |\n// | --graupl-fieldset-border-top-width | var(--graupl-input-border-top-width) |\n// | --graupl-fieldset-border-right-width | var(--graupl-input-border-right-width) |\n// | --graupl-fieldset-border-bottom-width | var(--graupl-input-border-bottom-width) |\n// | --graupl-fieldset-border-left-width | var(--graupl-input-border-left-width) |\n// | --graupl-fieldset-border-width | var(--graupl-fieldset-border-top-width) var(--graupl-fieldset-border-right-width) var(--graupl-fieldset-border-bottom-width) var(--graupl-fieldset-border-left-width) |\n// | --graupl-fieldset-border-top-style | var(--graupl-input-border-top-style) |\n// | --graupl-fieldset-border-right-style | var(--graupl-input-border-right-style) |\n// | --graupl-fieldset-border-bottom-style | var(--graupl-input-border-bottom-style) |\n// | --graupl-fieldset-border-left-style | var(--graupl-input-border-left-style) |\n// | --graupl-fieldset-border-style | var(--graupl-fieldset-border-top-style) var(--graupl-fieldset-border-right-style) var(--graupl-fieldset-border-bottom-style) var(--graupl-fieldset-border-left-style) |\n// | --graupl-fieldset-border-top-left-radius | var(--graupl-input-border-top-left-radius) |\n// | --graupl-fieldset-border-top-right-radius | var(--graupl-input-border-top-right-radius) |\n// | --graupl-fieldset-border-bottom-left-radius | var(--graupl-input-border-bottom-left-radius) |\n// | --graupl-fieldset-border-bottom-right-radius | var(--graupl-input-border-bottom-right-radius) |\n// | --graupl-fieldset-border-radius | var(--graupl-fieldset-border-top-left-radius) var(--graupl-fieldset-border-top-right-radius) var(--graupl-fieldset-border-bottom-right-radius) var(--graupl-fieldset-border-bottom-left-radius) |\n// | --graupl-input-border-color | var(--graupl-border-color) |\n// | --graupl-input-disabled-border-color | var(--graupl-theme-active--secondary--200) |\n// | --graupl-fieldset-border-color | var(--graupl-input-border-color) |\n// | --graupl-fieldset-disabled-border-color | var(--graupl-input-disabled-border-color) |\n// | --graupl-input-accent-color | var(--graupl-input-color) |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../theme/color/variables\" as color;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// --graupl-input-padding-x\n$input-padding-x: var(\n --#{root-defaults.$prefix}input-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-input-padding-y\n$input-padding-y: var(\n --#{root-defaults.$prefix}input-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-input-padding\n$input-padding: var(\n --#{root-defaults.$prefix}input-padding,\n #{$input-padding-y} #{$input-padding-x}\n);\n\n// --graupl-input-font-size\n$input-font-size: var(\n --#{root-defaults.$prefix}input-font-size,\n #{map.get(typography.$font-sizes, base)}\n);\n\n// --graupl-label-font-size\n$label-font-size: var(\n --#{root-defaults.$prefix}label-font-size,\n #{$input-font-size}\n);\n\n// --graupl-fieldset-direction\n$fieldset-direction: var(\n --#{root-defaults.$prefix}fieldset-direction,\n #{defaults.$fieldset-direction}\n);\n\n// --graupl-fieldset-gap\n$fieldset-gap: var(\n --#{root-defaults.$prefix}fieldset-gap,\n map.get(root-variables.$spacers, 2)\n);\n\n// --graupl-fieldset-padding-x\n$fieldset-padding-x: var(\n --#{root-defaults.$prefix}fieldset-padding-x,\n #{$input-padding-x}\n);\n\n// --graupl-fieldset-padding-y\n$fieldset-padding-y: var(\n --#{root-defaults.$prefix}fieldset-padding-y,\n #{$input-padding-y}\n);\n\n// --graupl-fieldset-padding\n$fieldset-padding: var(\n --#{root-defaults.$prefix}fieldset-padding,\n #{$fieldset-padding-y} #{$fieldset-padding-x}\n);\n\n// --graupl-fieldset-font-size\n$fieldset-font-size: var(\n --#{root-defaults.$prefix}fieldset-font-size,\n #{$input-font-size}\n);\n\n// Background properties.\n// --graupl-input-background\n$input-background: var(\n --#{root-defaults.$prefix}input-background,\n #{color.$background}\n);\n\n// --graupl-fieldset-background\n$fieldset-background: var(\n --#{root-defaults.$prefix}fieldset-background,\n #{$input-background}\n);\n\n// Text properties.\n// --graupl-input-color\n$input-color: var(--#{root-defaults.$prefix}input-color, #{color.$color});\n\n// --graupl-input-placeholder-color\n$input-placeholder-color: var(\n --#{root-defaults.$prefix}input-placeholder-color,\n #{theme.get(secondary, 600)}\n);\n\n// --graupl-label-color\n$label-color: var(--#{root-defaults.$prefix}label-color, #{$input-color});\n\n// --graupl-fieldset-color\n$fieldset-color: var(--#{root-defaults.$prefix}fieldset-color, #{$input-color});\n\n// --graupl-input-disabled-color\n$input-disabled-color: var(\n --#{root-defaults.$prefix}input-disabled-color,\n #{theme.get(secondary, 400)}\n);\n\n// --graupl-input-placeholder-disabled-color\n$input-placeholder-disabled-color: var(\n --#{root-defaults.$prefix}input-placeholder-disabled-color,\n #{$input-disabled-color}\n);\n\n// --graupl-label-disabled-color\n$label-disabled-color: var(\n --#{root-defaults.$prefix}label-disabled-color,\n #{$input-disabled-color}\n);\n\n// --graupl-fieldset-disabled-color\n$fieldset-disabled-color: var(\n --#{root-defaults.$prefix}fieldset-disabled-color,\n #{$input-disabled-color}\n);\n\n// Border properties.\n// --graupl-input-border-top-width\n$input-border-top-width: var(\n --#{root-defaults.$prefix}input-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-input-border-right-width\n$input-border-right-width: var(\n --#{root-defaults.$prefix}input-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-input-border-bottom-width\n$input-border-bottom-width: var(\n --#{root-defaults.$prefix}input-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-input-border-left-width\n$input-border-left-width: var(\n --#{root-defaults.$prefix}input-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-input-border-width\n$input-border-width: var(\n --#{root-defaults.$prefix}input-border-width,\n #{$input-border-top-width} #{$input-border-right-width}\n #{$input-border-bottom-width} #{$input-border-left-width}\n);\n\n// --graupl-input-border-top-style\n$input-border-top-style: var(\n --#{root-defaults.$prefix}input-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-input-border-right-style\n$input-border-right-style: var(\n --#{root-defaults.$prefix}input-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-input-border-bottom-style\n$input-border-bottom-style: var(\n --#{root-defaults.$prefix}input-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-input-border-left-style\n$input-border-left-style: var(\n --#{root-defaults.$prefix}input-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-input-border-style\n$input-border-style: var(\n --#{root-defaults.$prefix}input-border-style,\n #{$input-border-top-style} #{$input-border-right-style}\n #{$input-border-bottom-style} #{$input-border-left-style}\n);\n\n// --graupl-input-border-top-left-radius\n$input-border-top-left-radius: var(\n --#{root-defaults.$prefix}input-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-input-border-top-right-radius\n$input-border-top-right-radius: var(\n --#{root-defaults.$prefix}input-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-input-border-bottom-left-radius\n$input-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}input-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-input-border-bottom-right-radius\n$input-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}input-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-input-border-radius\n$input-border-radius: var(\n --#{root-defaults.$prefix}input-border-radius,\n #{$input-border-top-left-radius} #{$input-border-top-right-radius}\n #{$input-border-bottom-right-radius} #{$input-border-bottom-left-radius}\n);\n\n// --graupl-fieldset-border-top-width\n$fieldset-border-top-width: var(\n --#{root-defaults.$prefix}fieldset-border-top-width,\n #{$input-border-top-width}\n);\n\n// --graupl-fieldset-border-right-width\n$fieldset-border-right-width: var(\n --#{root-defaults.$prefix}fieldset-border-right-width,\n #{$input-border-right-width}\n);\n\n// --graupl-fieldset-border-bottom-width\n$fieldset-border-bottom-width: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-width,\n #{$input-border-bottom-width}\n);\n\n// --graupl-fieldset-border-left-width\n$fieldset-border-left-width: var(\n --#{root-defaults.$prefix}fieldset-border-left-width,\n #{$input-border-left-width}\n);\n\n// --graupl-fieldset-border-width\n$fieldset-border-width: var(\n --#{root-defaults.$prefix}fieldset-border-width,\n #{$fieldset-border-top-width} #{$fieldset-border-right-width}\n #{$fieldset-border-bottom-width} #{$fieldset-border-left-width}\n);\n\n// --graupl-fieldset-border-top-style\n$fieldset-border-top-style: var(\n --#{root-defaults.$prefix}fieldset-border-top-style,\n #{$input-border-top-style}\n);\n\n// --graupl-fieldset-border-right-style\n$fieldset-border-right-style: var(\n --#{root-defaults.$prefix}fieldset-border-right-style,\n #{$input-border-right-style}\n);\n\n// --graupl-fieldset-border-bottom-style\n$fieldset-border-bottom-style: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-style,\n #{$input-border-bottom-style}\n);\n\n// --graupl-fieldset-border-left-style\n$fieldset-border-left-style: var(\n --#{root-defaults.$prefix}fieldset-border-left-style,\n #{$input-border-left-style}\n);\n\n// --graupl-fieldset-border-style\n$fieldset-border-style: var(\n --#{root-defaults.$prefix}fieldset-border-style,\n #{$fieldset-border-top-style} #{$fieldset-border-right-style}\n #{$fieldset-border-bottom-style} #{$fieldset-border-left-style}\n);\n\n// --graupl-fieldset-border-top-left-radius\n$fieldset-border-top-left-radius: var(\n --#{root-defaults.$prefix}fieldset-border-top-left-radius,\n #{$input-border-top-left-radius}\n);\n\n// --graupl-fieldset-border-top-right-radius\n$fieldset-border-top-right-radius: var(\n --#{root-defaults.$prefix}fieldset-border-top-right-radius,\n #{$input-border-top-right-radius}\n);\n\n// --graupl-fieldset-border-bottom-left-radius\n$fieldset-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-left-radius,\n #{$input-border-bottom-left-radius}\n);\n\n// --graupl-fieldset-border-bottom-right-radius\n$fieldset-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-right-radius,\n #{$input-border-bottom-right-radius}\n);\n\n// --graupl-fieldset-border-radius\n$fieldset-border-radius: var(\n --#{root-defaults.$prefix}fieldset-border-radius,\n #{$fieldset-border-top-left-radius} #{$fieldset-border-top-right-radius}\n #{$fieldset-border-bottom-right-radius}\n #{$fieldset-border-bottom-left-radius}\n);\n\n// Border colour properties.\n// --graupl-input-border-color\n$input-border-color: var(\n --#{root-defaults.$prefix}input-border-color,\n #{color.$border-color}\n);\n\n// --graupl-input-disabled-border-color\n$input-disabled-border-color: var(\n --#{root-defaults.$prefix}input-disabled-border-color,\n #{theme.get(secondary, 200)}\n);\n\n// --graupl-fieldset-border-color\n$fieldset-border-color: var(\n --#{root-defaults.$prefix}fieldset-border-color,\n #{$input-border-color}\n);\n\n// --graupl-fieldset-disabled-border-color\n$fieldset-disabled-border-color: var(\n --#{root-defaults.$prefix}fieldset-disabled-border-color,\n #{$input-disabled-border-color}\n);\n\n// Accent color properties.\n// --graupl-input-accent-color\n$input-accent-color: var(\n --#{root-defaults.$prefix}input-accent-color,\n #{$input-color}\n);\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n/// The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n @content;\n }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n/// The map of custom props.\n/// @param {string} $selector-base\n/// The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the theme modifer.\n/// @param {string} $scope\n/// The scope of the custom properties.\n/// @param {string} $base\n/// The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n $theme-map,\n $selector-base,\n $selector-prefix,\n $scope: \"\",\n $base: \"&\"\n) {\n @each $color, $map in $theme-map {\n // e.g. &.primary, &.secondary, &.tertiary\n #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n @each $prop, $value in $map {\n --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n map.get($value, color),\n map.get($value, shade)\n )};\n }\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AESI,mBCgM8B,6wDAW5B,2PAO4B,gJAKG,2hFAa7B,wWDpOJ,oBCgP8B,+3BAQ9B,mOAME,qYAIE,0SAJF,wYAIE,6SAJF,saAIE,2UAJF,qYAIE,0SEnOJ,q5BAAA,+7BAAA,06BFoP8B,iOAK5B,seEzPF,qbAAA,ycAAA,+bAAA,q3BAAA,25BAAA,w4BFmRiC,4uBAO/B,ybAIE,8NAJF,0bAIE,+NAJF,ocAIE,yOAJF,ybAIE,8NE9RJ,olBAAA,8mBAAA,imBAAA,wbAAA,4cAAA,kcAAA,w3BAAA,85BAAA","sources":["dist/css/base/form.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/node_modules/@graupl/core/src/scss/base/form/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/base/form/_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.base {\n input,\n textarea,\n select {\n padding: var(--graupl-input-padding, var(--graupl-input-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-input-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n border-width: var(--graupl-input-border-width, var(--graupl-input-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-input-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-input-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-input-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-input-border-style, var(--graupl-input-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-input-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-input-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-input-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-input-border-radius, var(--graupl-input-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-input-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-input-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-input-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n font-size: var(--graupl-input-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem))));\n }\n input:disabled,\n textarea:disabled,\n select:disabled {\n cursor: not-allowed;\n }\n input[disabled],\n textarea[disabled],\n select[disabled] {\n cursor: not-allowed;\n }\n input[aria-disabled=true],\n textarea[aria-disabled=true],\n select[aria-disabled=true] {\n cursor: not-allowed;\n }\n input.disabled,\n textarea.disabled,\n select.disabled {\n cursor: not-allowed;\n }\n label {\n font-size: var(--graupl-label-font-size, var(--graupl-input-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem)))));\n }\n fieldset {\n display: flex;\n flex-flow: var(--graupl-fieldset-direction, column) wrap;\n gap: var(--graupl-fieldset-gap, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))));\n padding: var(--graupl-fieldset-padding, var(--graupl-fieldset-padding-y, var(--graupl-input-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))))) var(--graupl-fieldset-padding-x, var(--graupl-input-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))))));\n border-width: var(--graupl-fieldset-border-width, var(--graupl-fieldset-border-top-width, var(--graupl-input-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-fieldset-border-right-width, var(--graupl-input-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-fieldset-border-bottom-width, var(--graupl-input-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem)))) var(--graupl-fieldset-border-left-width, var(--graupl-input-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)))));\n border-style: var(--graupl-fieldset-border-style, var(--graupl-fieldset-border-top-style, var(--graupl-input-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid)))) var(--graupl-fieldset-border-right-style, var(--graupl-input-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid)))) var(--graupl-fieldset-border-bottom-style, var(--graupl-input-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid)))) var(--graupl-fieldset-border-left-style, var(--graupl-input-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid)))));\n border-radius: var(--graupl-fieldset-border-radius, var(--graupl-fieldset-border-top-left-radius, var(--graupl-input-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-fieldset-border-top-right-radius, var(--graupl-input-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-fieldset-border-bottom-right-radius, var(--graupl-input-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem)))) var(--graupl-fieldset-border-bottom-left-radius, var(--graupl-input-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem)))));\n font-size: var(--graupl-fieldset-font-size, var(--graupl-input-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem)))));\n }\n fieldset:disabled input,\n fieldset:disabled textarea,\n fieldset:disabled select {\n cursor: not-allowed;\n }\n fieldset[disabled] input,\n fieldset[disabled] textarea,\n fieldset[disabled] select {\n cursor: not-allowed;\n }\n fieldset[aria-disabled=true] input,\n fieldset[aria-disabled=true] textarea,\n fieldset[aria-disabled=true] select {\n cursor: not-allowed;\n }\n fieldset.disabled input,\n fieldset.disabled textarea,\n fieldset.disabled select {\n cursor: not-allowed;\n }\n}\n@layer graupl.theme {\n input,\n textarea,\n select {\n border-color: var(--graupl-input-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n background: var(--graupl-input-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-input-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 accent-color: var(--graupl-input-accent-color, var(--graupl-input-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 input::placeholder,\n textarea::placeholder,\n select::placeholder {\n color: var(--graupl-input-placeholder-color, var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)))));\n }\n input:disabled,\n textarea:disabled,\n select:disabled {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input:disabled::placeholder,\n textarea:disabled::placeholder,\n select:disabled::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input[disabled],\n textarea[disabled],\n select[disabled] {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input[disabled]::placeholder,\n textarea[disabled]::placeholder,\n select[disabled]::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input[aria-disabled=true],\n textarea[aria-disabled=true],\n select[aria-disabled=true] {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input[aria-disabled=true]::placeholder,\n textarea[aria-disabled=true]::placeholder,\n select[aria-disabled=true]::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input.disabled,\n textarea.disabled,\n select.disabled {\n border-color: var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));\n color: var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));\n }\n input.disabled::placeholder,\n textarea.disabled::placeholder,\n select.disabled::placeholder {\n color: var(--graupl-input-placeholder-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n input.primary,\n textarea.primary,\n select.primary {\n --graupl-input-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--primary--600, var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n input.secondary,\n textarea.secondary,\n select.secondary {\n --graupl-input-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n input.tertiary,\n textarea.tertiary,\n select.tertiary {\n --graupl-input-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--tertiary--600, var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n label {\n color: var(--graupl-label-color, var(--graupl-input-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 label:has(+ input:disabled,\n + textarea:disabled,\n + select:disabled) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label:has(+ input[disabled],\n + textarea[disabled],\n + select[disabled]) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label:has(+ input[aria-disabled=true],\n + textarea[aria-disabled=true],\n + select[aria-disabled=true]) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label:has(+ input.disabled,\n + textarea.disabled,\n + select.disabled) {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n label.primary {\n --graupl-label-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n }\n label.secondary {\n --graupl-label-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n }\n label.tertiary {\n --graupl-label-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n }\n label.primary {\n --graupl-input-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--primary--600, var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n label.secondary {\n --graupl-input-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n label.tertiary {\n --graupl-input-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--tertiary--600, var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n fieldset {\n border-color: var(--graupl-fieldset-border-color, var(--graupl-input-border-color, var(--graupl-border-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))));\n background: var(--graupl-fieldset-background, var(--graupl-input-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n color: var(--graupl-fieldset-color, var(--graupl-input-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 fieldset:disabled {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset:disabled label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[disabled] {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[disabled] label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[aria-disabled=true] {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset[aria-disabled=true] label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset.disabled {\n border-color: var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));\n color: var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset.disabled label {\n color: var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));\n }\n fieldset.primary {\n --graupl-fieldset-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-fieldset-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-fieldset-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-fieldset-accent-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n }\n fieldset.secondary {\n --graupl-fieldset-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-fieldset-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-fieldset-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-fieldset-accent-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n }\n fieldset.tertiary {\n --graupl-fieldset-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-fieldset-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-fieldset-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-fieldset-accent-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n }\n fieldset.primary {\n --graupl-label-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n }\n fieldset.secondary {\n --graupl-label-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n }\n fieldset.tertiary {\n --graupl-label-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-label-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-label-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n }\n fieldset.primary {\n --graupl-input-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--primary--600, var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n }\n fieldset.secondary {\n --graupl-input-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n }\n fieldset.tertiary {\n --graupl-input-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-input-background: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-input-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-input-placeholder-color: var(--graupl-theme-active--tertiary--600, var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%))));\n --graupl-input-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-input-disabled-border-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n }\n}","// @graupl/core typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: root-defaults.$root-selector-base !default;\n$root-selector: root-defaults.$root-selector !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$emphasis-selector-base: $selector-base !default;\n$emphasis-selector: \"em\" !default;\n$italic-selector-base: $selector-base !default;\n$italic-selector: \"i\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$root-line-height: 1.2em !default;\n$root-letter-spacing: normal !default;\n$root-word-spacing: normal !default;\n$root-font-style: normal !default;\n$root-font-variant: normal !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n xs: 0.694,\n sm: 0.833,\n base: 1,\n lg: 1.2,\n xl: 1.44,\n 2xl: 1.728,\n 3xl: 2.074,\n 4xl: 2.488,\n 5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n $font-size-multipliers: map.merge(\n $-font-size-multipliers,\n $font-size-multipliers\n );\n}\n\n// Weights.\n$-font-weights: (\n light: 300,\n normal: 400,\n bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n system-ui,\n -apple-system,\n blinkmacsystemfont,\n \"Segoe UI\",\n roboto,\n \"Helvetica Neue\",\n arial,\n sans-serif !default;\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core form base styles.\n//\n// This module provides the base styles for form components such as inputs, textareas, selects, labels, and fieldsets.\n//\n// The following selectors are generated by default:\n// - `input`: The input component.\n// - `textarea`: The textarea component.\n// - `select`: The select component.\n// - `label`: The label component.\n// - `fieldset`: The fieldset component.\n//\n// The following custom properties can be used to customize the form components:\n// | Property | Description | Default Value |\n// | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-input-padding-x` | The horizontal padding for input components. | `var(--graupl-spacer-5)` |\n// | `--graupl-input-padding-y` | The vertical padding for input components. | `var(--graupl-spacer-3)` |\n// | `--graupl-input-padding` | The padding for input components (combines x and y padding). | `var(--graupl-input-padding-y) var(--graupl-input-padding-x)` |\n// | `--graupl-input-font-size` | The font size for input components. | `var(--graupl-font-size-base)` |\n// | `--graupl-label-font-size` | The font size for label components. | `var(--graupl-input-font-size)` |\n// | `--graupl-fieldset-direction` | The direction of fieldset items- controls the `flex-direction` property. | `column` |\n// | `--graupl-fieldset-gap` | The gap between fieldset items. | `var(--graupl-spacer-2)` |\n// | `--graupl-fieldset-padding-x` | The horizontal padding for fieldset components. | `var(--graupl-input-padding-x)` |\n// | `--graupl-fieldset-padding-y` | The vertical padding for fieldset components. | `var(--graupl-input-padding-y)` |\n// | `--graupl-fieldset-padding` | The padding for fieldset components (combines x and y padding). | `var(--graupl-fieldset-padding-y) var(--graupl-fieldset-padding-x)` |\n// | `--graupl-fieldset-font-size` | The font size for fieldset components. | `var(--graupl-input-font-size)` |\n// | `--graupl-input-background` | The background color for input components. | `var(--graupl-background)` |\n// | `--graupl-fieldset-background` | The background color for fieldset components. | `var(--graupl-input-background)` |\n// | `--graupl-input-color` | The text color for input components. | `var(--graupl-color)` |\n// | `--graupl-input-placeholder-color` | The placeholder text color for input components. | `var(--graupl-theme-active--secondary--600)` |\n// | `--graupl-label-color` | The text color for label components. | `var(--graupl-input-color)` |\n// | `--graupl-fieldset-color` | The text color for fieldset components. | `var(--graupl-input-color)` |\n// | `--graupl-input-disabled-color` | The text color for disabled input components. | `var(--graupl-theme-active--secondary--400)` |\n// | `--graupl-input-placeholder-disabled-color` | The placeholder text color for disabled input components. | `var(--graupl-input-disabled-color)` |\n// | `--graupl-label-disabled-color` | The text color for labels for disabled components. | `var(--graupl-input-disabled-color)` |\n// | `--graupl-fieldset-disabled-color` | The text color for disabled fieldset components. | `var(--graupl-input-disabled-color)` |\n// | `--graupl-input-border-top-width` | The top border width for input components. | `var(--graupl-border-top-width)` |\n// | `--graupl-input-border-right-width` | The right border width for input components. | `var(--graupl-border-right-width)` |\n// | `--graupl-input-border-bottom-width` | The bottom border width for input components. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-input-border-left-width` | The left border width for input components. | `var(--graupl-border-left-width)` |\n// | `--graupl-input-border-width` | The border width for input components (combines top, right, bottom, and left widths). | `var(--graupl-input-border-top-width) var(--graupl-input-border-right-width) var(--graupl-input-border-bottom-width) var(--graupl-input-border-left-width)` |\n// | `--graupl-input-border-top-style` | The top border style for input components. | `var(--graupl-border-top-style)` |\n// | `--graupl-input-border-right-style` | The right border style for input components. | `var(--graupl-border-right-style)` |\n// | `--graupl-input-border-bottom-style` | The bottom border style for input components. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-input-border-left-style` | The left border style for input components. | `var(--graupl-border-left-style)` |\n// | `--graupl-input-border-style` | The border style for input components (combines top, right, bottom, and left styles). | `var(--graupl-input-border-top-style) var(--graupl-input-border-right-style) var(--graupl-input-border-bottom-style) var(--graupl-input-border-left-style)` |\n// | `--graupl-input-border-top-left-radius` | The top-left border radius for input components. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-input-border-top-right-radius` | The top-right border radius for input components. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-input-border-bottom-right-radius` | The bottom-right border radius for input components. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-input-border-bottom-left-radius` | The bottom-left border radius for input components. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-input-border-radius` | The border radius for input components (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-input-border-top-left-radius) var(--graupl-input-border-top-right-radius) var(--graupl-input-border-bottom-right-radius) var(--graupl-input-border-bottom-left-radius)` |\n// | `--graupl-fieldset-border-top-width` | The top border width for fieldset components. | `var(--graupl-input-border-top-width)` |\n// | `--graupl-fieldset-border-right-width` | The right border width for fieldset components. | `var(--graupl-input-border-right-width)` |\n// | `--graupl-fieldset-border-bottom-width` | The bottom border width for fieldset components. | `var(--graupl-input-border-bottom-width)` |\n// | `--graupl-fieldset-border-left-width` | The left border width for fieldset components. | `var(--graupl-input-border-left-width)` |\n// | `--graupl-fieldset-border-width` | The border width for fieldset components (combines top, right, bottom, and left widths). | `var(--graupl-fieldset-border-top-width) var(--graupl-fieldset-border-right-width) var(--graupl-fieldset-border-bottom-width) var(--graupl-fieldset-border-left-width)` |\n// | `--graupl-fieldset-border-top-style` | The top border style for fieldset components. | `var(--graupl-input-border-top-style)` |\n// | `--graupl-fieldset-border-right-style` | The right border style for fieldset components. | `var(--graupl-input-border-right-style)` |\n// | `--graupl-fieldset-border-bottom-style` | The bottom border style for fieldset components. | `var(--graupl-input-border-bottom-style)` |\n// | `--graupl-fieldset-border-left-style` | The left border style for fieldset components. | `var(--graupl-input-border-left-style)` |\n// | `--graupl-fieldset-border-style` | The border style for fieldset components (combines top, right, bottom, and left styles). | `var(--graupl-fieldset-border-top-style) var(--graupl-fieldset-border-right-style) var(--graupl-fieldset-border-bottom-style) var(--graupl-fieldset-border-left-style)` |\n// | `--graupl-fieldset-border-top-left-radius` | The top-left border radius for fieldset components. | `var(--graupl-input-border-top-left-radius)` |\n// | `--graupl-fieldset-border-top-right-radius` | The top-right border radius for fieldset components. | `var(--graupl-input-border-top-right-radius)` |\n// | `--graupl-fieldset-border-bottom-right-radius` | The bottom-right border radius for fieldset components. | `var(--graupl-input-border-bottom-right-radius)` |\n// | `--graupl-fieldset-border-bottom-left-radius` | The bottom-left border radius for fieldset components. | `var(--graupl-input-border-bottom-left-radius)` |\n// | `--graupl-fieldset-border-radius` | The border radius for fieldset components (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-fieldset-border-top-left-radius) var(--graupl-fieldset-border-top-right-radius) var(--graupl-fieldset-border-bottom-right-radius) var(--graupl-fieldset-border-bottom-left-radius)` |\n// | `--graupl-input-border-color` | The border color for input components. | `var(--graupl-border-color)` |\n// | `--graupl-input-disabled-border-color` | The border color for disabled input components. | `var(--graupl-theme-active--secondary--200)` |\n// | `--graupl-fieldset-border-color` | The border color for fieldset components. | `var(--graupl-input-border-color)` |\n// | `--graupl-fieldset-disabled-border-color` | The border color for disabled fieldset components. | `var(--graupl-input-disabled-border-color)` |\n// | `--graupl-input-accent-color` | The accent color for input components. | `var(--graupl-input-color)` |\n//\n// The following sass variables can be used to customize the generation of the form components:\n// | Variable | Description | Default Value |\n// | -------------------------------------- | ----------------------------------------------------------------------- | ------------- |\n// | `$selector-base` | The selector base for the component. | `\"\"` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme maps for form elements. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `true` |\n// | `$input-selector-base` | The base selector for the input component. | `\"\"` |\n// | `$input-selector` | The input component selector. | `\"input\"` |\n// | `$input-theme-prefix-selector-base` | Selector base used for input theme modifiers. | `\".\"` |\n// | `$input-theme-prefix-selector` | Selector prefix used for input theme modifiers. | `\"\"` |\n// | `$textarea-selector-base` | The base selector for the textarea component. | `\"\"` |\n// | `$textarea-selector` | The textarea component selector. | `\"textarea\"` |\n// | `$select-selector-base` | The base selector for the select component. | `\"\"` |\n// | `$select-selector` | The select component selector. | `\"select\"` |\n// | `$label-selector-base` | The base selector for the label component. | `\"\"` |\n// | `$label-selector` | The label component selector. | `\"label\"` |\n// | `$label-theme-prefix-selector-base` | Selector base used for label theme modifiers. | `\".\"` |\n// | `$label-theme-prefix-selector` | Selector prefix used for label theme modifiers. | `\"\"` |\n// | `$fieldset-selector-base` | The base selector for the fieldset component. | `\"\"` |\n// | `$fieldset-selector` | The fieldset component selector. | `\"fieldset\"` |\n// | `$fieldset-theme-prefix-selector-base` | Selector base used for fieldset theme modifiers. | `\".\"` |\n// | `$fieldset-theme-prefix-selector` | Selector prefix used for fieldset theme modifiers. | `\"\"` |\n// | `$fieldset-direction` | The direction of fieldset component items. | `column` |\n// | `$input-type-selectors` | Various tyles of inputs and their associated selectors. | `()` |\n// | `$input-theme-mappings` | Map of properties and shade values applied to themed input variants. | `()` |\n// | `$input-theme-map` | Fully expanded property map used to generate themed input variants. | `()` |\n// | `$label-theme-mappings` | Map of properties and shade values applied to themed label variants. | `()` |\n// | `$label-theme-map` | Fully expanded property map used to generate themed label variants. | `()` |\n// | `$fieldset-theme-mappings` | Map of properties and shade values applied to themed fieldset variants. | `()` |\n// | `$fieldset-theme-map` | Fully expanded property map used to generate themed fieldset variants. | `()` |\n//\n// ## Using `$input-theme-mappings`, `$label-theme-mappings`, and `$fieldset-theme-mappings`\n//\n// Each of these variables is a single-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $input-theme-mappings: (\n// color: 900,\n// background: 100,\n// border-color: 700,\n// );\n// ```\n//\n// This directly[1] informs all input variants what shade to use for each property key.\n// Based on the example above:\n// - Primary inputs expose `--graupl-input-color`, `--graupl-input-background`, and `--graupl-input-border-color` as `var(--graupl-theme-active--primary--900/100/700)`,\n// - Secondary inputs expose those properties via the secondary palette, and\n// - Tertiary inputs expose those properties via the tertiary palette.\n//\n// The same pattern applies to `$label-theme-mappings` and `$fieldset-theme-mappings`, ensuring every form element stays in sync across variants.\n//\n// ```scss\n// $label-theme-mappings: (\n// color: 800,\n// );\n// $fieldset-theme-mappings: (\n// background: 50,\n// border-color: 600,\n// );\n// ```\n//\n// - Primary labels use `--graupl-theme-active--primary--800` for `--graupl-label-color`,\n// - Primary fieldsets use `--graupl-theme-active--primary--50` / `--graupl-theme-active--primary--600` for their background/border colours, and other variants follow suit using their palettes.\n//\n// [1] Each `*-theme-mappings` map gets parsed into a larger, more explicit map: the corresponding `*-theme-map`.\n//\n// ## Using `$input-theme-map`, `$label-theme-map`, and `$fieldset-theme-map`\n//\n// These variables are multi-level maps of properties, colours, and shade values, allowing you to override individual variants without affecting the others.\n//\n// e.g.\n// ```scss\n// $input-theme-map: (\n// primary: (\n// border-color: (\n// color: primary,\n// shade: 950,\n// ),\n// ),\n// secondary: (\n// background: (\n// color: secondary,\n// shade: 200,\n// ),\n// ),\n// );\n// ```\n//\n// This example deepens the primary input border colour while lightening the secondary input background. You can mix and match overrides for labels and fieldsets in their respective maps to target variants independently.\n//\n// @example\n// <label for=\"input-id\">Input Label</label>\n// <input id=\"input-id\" type=\"text\" placeholder=\"Enter text\" />\n//\n// @example\n// <label for=\"textarea-id\">Textarea Label</label>\n// <textarea id=\"textarea-id\" placeholder=\"Enter text\"></textarea>\n//\n// @example\n// <label for=\"select-id\">Select Label</label>\n// <select id=\"select-id\">\n// <option value=\"1\">Option 1</option>\n// <option value=\"2\">Option 2</option>\n// </select>\n//\n// @example\n// <fieldset>\n// <legend>Fieldset Legend</legend>\n// <label for=\"input-id\">Input Label</label>\n// <input id=\"input-id\" type=\"text\" placeholder=\"Enter text\" />\n// <label for=\"textarea-id\">Textarea Label</label>\n// <textarea id=\"textarea-id\" placeholder=\"Enter text\"></textarea>\n// <label for=\"select-id\">Select Label</label>\n// <select id=\"select-id\">\n// <option value=\"1\">Option 1</option>\n// <option value=\"2\">Option 2</option>\n// </select>\n// </fieldset>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/theme\";\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(base) {\n // input, textarea, select\n #{defaults.$input-selector-base}#{defaults.$input-selector},\n #{defaults.$textarea-selector-base}#{defaults.$textarea-selector},\n #{defaults.$select-selector-base}#{defaults.$select-selector} {\n padding: $input-padding;\n border-width: $input-border-width;\n border-style: $input-border-style;\n border-radius: $input-border-radius;\n font-size: $input-font-size;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n cursor: not-allowed;\n }\n }\n }\n\n // label\n #{defaults.$label-selector-base}#{defaults.$label-selector} {\n font-size: $label-font-size;\n }\n\n // fieldset\n #{defaults.$fieldset-selector-base}#{defaults.$fieldset-selector} {\n display: flex;\n flex-flow: $fieldset-direction wrap;\n gap: $fieldset-gap;\n padding: $fieldset-padding;\n border-width: $fieldset-border-width;\n border-style: $fieldset-border-style;\n border-radius: $fieldset-border-radius;\n font-size: $fieldset-font-size;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n #{defaults.$input-selector},\n #{defaults.$textarea-selector},\n #{defaults.$select-selector} {\n cursor: not-allowed;\n }\n }\n }\n }\n}\n\n@include layer(theme) {\n // input, textarea, select\n #{defaults.$input-selector-base}#{defaults.$input-selector},\n #{defaults.$textarea-selector-base}#{defaults.$textarea-selector},\n #{defaults.$select-selector-base}#{defaults.$select-selector} {\n border-color: $input-border-color;\n background: $input-background;\n color: $input-color;\n accent-color: $input-accent-color;\n\n &::placeholder {\n color: $input-placeholder-color;\n }\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n border-color: $input-disabled-border-color;\n color: $input-disabled-color;\n\n &::placeholder {\n color: $input-placeholder-disabled-color;\n }\n }\n }\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$input-theme-map,\n defaults.$input-theme-prefix-selector-base,\n defaults.$input-theme-prefix-selector,\n \"input-\"\n );\n }\n }\n\n // label\n #{defaults.$label-selector-base}#{defaults.$label-selector} {\n color: $label-color;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // &:has(:disabled, .disabled)\n &:has(\n + #{defaults.$input-selector-base}#{defaults.$input-selector}#{$selector},\n + #{defaults.$textarea-selector-base}#{defaults.$textarea-selector}#{$selector},\n + #{defaults.$select-selector-base}#{defaults.$select-selector}#{$selector}\n ) {\n color: $label-disabled-color;\n }\n }\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$label-theme-map,\n defaults.$label-theme-prefix-selector-base,\n defaults.$label-theme-prefix-selector,\n \"label-\"\n );\n @include theme.generate-modifiers(\n defaults.$input-theme-map,\n defaults.$input-theme-prefix-selector-base,\n defaults.$input-theme-prefix-selector,\n \"input-\"\n );\n }\n }\n\n // fieldset\n #{defaults.$fieldset-selector-base}#{defaults.$fieldset-selector} {\n border-color: $fieldset-border-color;\n background: $fieldset-background;\n color: $fieldset-color;\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n // e.g :disabled, .disabled\n &#{$selector} {\n border-color: $fieldset-disabled-border-color;\n color: $fieldset-disabled-color;\n\n #{defaults.$label-selector} {\n color: $label-disabled-color;\n }\n }\n }\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$fieldset-theme-map,\n defaults.$fieldset-theme-prefix-selector-base,\n defaults.$fieldset-theme-prefix-selector,\n \"fieldset-\"\n );\n @include theme.generate-modifiers(\n defaults.$label-theme-map,\n defaults.$label-theme-prefix-selector-base,\n defaults.$label-theme-prefix-selector,\n \"label-\"\n );\n @include theme.generate-modifiers(\n defaults.$input-theme-map,\n defaults.$input-theme-prefix-selector-base,\n defaults.$input-theme-prefix-selector,\n \"input-\"\n );\n }\n }\n}\n","// @graupl/core form base variables.\n//\n// These values are to be used to directly style bases and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-input-padding-x | var(--graupl-spacer-5) |\n// | --graupl-input-padding-y | var(--graupl-spacer-3) |\n// | --graupl-input-padding | var(--graupl-input-padding-y) var(--graupl-input-padding-x) |\n// | --graupl-input-font-size | var(--graupl-font-base) |\n// | --graupl-label-font-size | var(--graupl-input-font-size) |\n// | --graupl-fieldset-direction | column |\n// | --graupl-fieldset-gap | var(--graupl-spacer-2) |\n// | --graupl-fieldset-padding-x | var(--graupl-input-padding-x) |\n// | --graupl-fieldset-padding-y | var(--graupl-input-padding-y) |\n// | --graupl-fieldset-padding | var(--graupl-fieldset-padding-y) var(--graupl-fieldset-padding-x) |\n// | --graupl-fieldset-font-size | var(--graupl-input-font-size) |\n// | --graupl-input-background | var(--graupl-background) |\n// | --graupl-fieldset-background | var(--graupl-input-background) |\n// | --graupl-input-color | var(--graupl-color) |\n// | --graupl-input-placeholder-color | var(--graupl-theme-active--secondary--600) |\n// | --graupl-label-color | var(--graupl-input-color) |\n// | --graupl-fieldset-color | var(--graupl-input-color) |\n// | --graupl-input-disabled-color | var(--graupl-theme-active--secondary--400) |\n// | --graupl-input-placeholder-disabled-color | var(--graupl-input-disabled-color) |\n// | --graupl-label-disabled-color | var(--graupl-input-disabled-color) |\n// | --graupl-fieldset-disabled-color | var(--graupl-input-disabled-color) |\n// | --graupl-input-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-input-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-input-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-input-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-input-border-width | var(--graupl-input-border-top-width) var(--graupl-input-border-right-width) var(--graupl-input-border-bottom-width) var(--graupl-input-border-left-width) |\n// | --graupl-input-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-input-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-input-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-input-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-input-border-style | var(--graupl-input-border-top-style) var(--graupl-input-border-right-style) var(--graupl-input-border-bottom-style) var(--graupl-input-border-left-style) |\n// | --graupl-input-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-input-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-input-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-input-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-input-border-radius | var(--graupl-input-border-top-left-radius) var(--graupl-input-border-top-right-radius) var(--graupl-input-border-bottom-right-radius) var(--graupl-input-border-bottom-left-radius) |\n// | --graupl-fieldset-border-top-width | var(--graupl-input-border-top-width) |\n// | --graupl-fieldset-border-right-width | var(--graupl-input-border-right-width) |\n// | --graupl-fieldset-border-bottom-width | var(--graupl-input-border-bottom-width) |\n// | --graupl-fieldset-border-left-width | var(--graupl-input-border-left-width) |\n// | --graupl-fieldset-border-width | var(--graupl-fieldset-border-top-width) var(--graupl-fieldset-border-right-width) var(--graupl-fieldset-border-bottom-width) var(--graupl-fieldset-border-left-width) |\n// | --graupl-fieldset-border-top-style | var(--graupl-input-border-top-style) |\n// | --graupl-fieldset-border-right-style | var(--graupl-input-border-right-style) |\n// | --graupl-fieldset-border-bottom-style | var(--graupl-input-border-bottom-style) |\n// | --graupl-fieldset-border-left-style | var(--graupl-input-border-left-style) |\n// | --graupl-fieldset-border-style | var(--graupl-fieldset-border-top-style) var(--graupl-fieldset-border-right-style) var(--graupl-fieldset-border-bottom-style) var(--graupl-fieldset-border-left-style) |\n// | --graupl-fieldset-border-top-left-radius | var(--graupl-input-border-top-left-radius) |\n// | --graupl-fieldset-border-top-right-radius | var(--graupl-input-border-top-right-radius) |\n// | --graupl-fieldset-border-bottom-left-radius | var(--graupl-input-border-bottom-left-radius) |\n// | --graupl-fieldset-border-bottom-right-radius | var(--graupl-input-border-bottom-right-radius) |\n// | --graupl-fieldset-border-radius | var(--graupl-fieldset-border-top-left-radius) var(--graupl-fieldset-border-top-right-radius) var(--graupl-fieldset-border-bottom-right-radius) var(--graupl-fieldset-border-bottom-left-radius) |\n// | --graupl-input-border-color | var(--graupl-border-color) |\n// | --graupl-input-disabled-border-color | var(--graupl-theme-active--secondary--200) |\n// | --graupl-fieldset-border-color | var(--graupl-input-border-color) |\n// | --graupl-fieldset-disabled-border-color | var(--graupl-input-disabled-border-color) |\n// | --graupl-input-accent-color | var(--graupl-input-color) |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../theme/color/variables\" as color;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// --graupl-input-padding-x\n$input-padding-x: var(\n --#{root-defaults.$prefix}input-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-input-padding-y\n$input-padding-y: var(\n --#{root-defaults.$prefix}input-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-input-padding\n$input-padding: var(\n --#{root-defaults.$prefix}input-padding,\n #{$input-padding-y} #{$input-padding-x}\n);\n\n// --graupl-input-font-size\n$input-font-size: var(\n --#{root-defaults.$prefix}input-font-size,\n #{map.get(typography.$font-sizes, base)}\n);\n\n// --graupl-label-font-size\n$label-font-size: var(\n --#{root-defaults.$prefix}label-font-size,\n #{$input-font-size}\n);\n\n// --graupl-fieldset-direction\n$fieldset-direction: var(\n --#{root-defaults.$prefix}fieldset-direction,\n #{defaults.$fieldset-direction}\n);\n\n// --graupl-fieldset-gap\n$fieldset-gap: var(\n --#{root-defaults.$prefix}fieldset-gap,\n map.get(root-variables.$spacers, 2)\n);\n\n// --graupl-fieldset-padding-x\n$fieldset-padding-x: var(\n --#{root-defaults.$prefix}fieldset-padding-x,\n #{$input-padding-x}\n);\n\n// --graupl-fieldset-padding-y\n$fieldset-padding-y: var(\n --#{root-defaults.$prefix}fieldset-padding-y,\n #{$input-padding-y}\n);\n\n// --graupl-fieldset-padding\n$fieldset-padding: var(\n --#{root-defaults.$prefix}fieldset-padding,\n #{$fieldset-padding-y} #{$fieldset-padding-x}\n);\n\n// --graupl-fieldset-font-size\n$fieldset-font-size: var(\n --#{root-defaults.$prefix}fieldset-font-size,\n #{$input-font-size}\n);\n\n// Background properties.\n// --graupl-input-background\n$input-background: var(\n --#{root-defaults.$prefix}input-background,\n #{color.$background}\n);\n\n// --graupl-fieldset-background\n$fieldset-background: var(\n --#{root-defaults.$prefix}fieldset-background,\n #{$input-background}\n);\n\n// Text properties.\n// --graupl-input-color\n$input-color: var(--#{root-defaults.$prefix}input-color, #{color.$color});\n\n// --graupl-input-placeholder-color\n$input-placeholder-color: var(\n --#{root-defaults.$prefix}input-placeholder-color,\n #{theme.get(secondary, 600)}\n);\n\n// --graupl-label-color\n$label-color: var(--#{root-defaults.$prefix}label-color, #{$input-color});\n\n// --graupl-fieldset-color\n$fieldset-color: var(--#{root-defaults.$prefix}fieldset-color, #{$input-color});\n\n// --graupl-input-disabled-color\n$input-disabled-color: var(\n --#{root-defaults.$prefix}input-disabled-color,\n #{theme.get(secondary, 400)}\n);\n\n// --graupl-input-placeholder-disabled-color\n$input-placeholder-disabled-color: var(\n --#{root-defaults.$prefix}input-placeholder-disabled-color,\n #{$input-disabled-color}\n);\n\n// --graupl-label-disabled-color\n$label-disabled-color: var(\n --#{root-defaults.$prefix}label-disabled-color,\n #{$input-disabled-color}\n);\n\n// --graupl-fieldset-disabled-color\n$fieldset-disabled-color: var(\n --#{root-defaults.$prefix}fieldset-disabled-color,\n #{$input-disabled-color}\n);\n\n// Border properties.\n// --graupl-input-border-top-width\n$input-border-top-width: var(\n --#{root-defaults.$prefix}input-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-input-border-right-width\n$input-border-right-width: var(\n --#{root-defaults.$prefix}input-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-input-border-bottom-width\n$input-border-bottom-width: var(\n --#{root-defaults.$prefix}input-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-input-border-left-width\n$input-border-left-width: var(\n --#{root-defaults.$prefix}input-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-input-border-width\n$input-border-width: var(\n --#{root-defaults.$prefix}input-border-width,\n #{$input-border-top-width} #{$input-border-right-width}\n #{$input-border-bottom-width} #{$input-border-left-width}\n);\n\n// --graupl-input-border-top-style\n$input-border-top-style: var(\n --#{root-defaults.$prefix}input-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-input-border-right-style\n$input-border-right-style: var(\n --#{root-defaults.$prefix}input-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-input-border-bottom-style\n$input-border-bottom-style: var(\n --#{root-defaults.$prefix}input-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-input-border-left-style\n$input-border-left-style: var(\n --#{root-defaults.$prefix}input-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-input-border-style\n$input-border-style: var(\n --#{root-defaults.$prefix}input-border-style,\n #{$input-border-top-style} #{$input-border-right-style}\n #{$input-border-bottom-style} #{$input-border-left-style}\n);\n\n// --graupl-input-border-top-left-radius\n$input-border-top-left-radius: var(\n --#{root-defaults.$prefix}input-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-input-border-top-right-radius\n$input-border-top-right-radius: var(\n --#{root-defaults.$prefix}input-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-input-border-bottom-left-radius\n$input-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}input-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-input-border-bottom-right-radius\n$input-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}input-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-input-border-radius\n$input-border-radius: var(\n --#{root-defaults.$prefix}input-border-radius,\n #{$input-border-top-left-radius} #{$input-border-top-right-radius}\n #{$input-border-bottom-right-radius} #{$input-border-bottom-left-radius}\n);\n\n// --graupl-fieldset-border-top-width\n$fieldset-border-top-width: var(\n --#{root-defaults.$prefix}fieldset-border-top-width,\n #{$input-border-top-width}\n);\n\n// --graupl-fieldset-border-right-width\n$fieldset-border-right-width: var(\n --#{root-defaults.$prefix}fieldset-border-right-width,\n #{$input-border-right-width}\n);\n\n// --graupl-fieldset-border-bottom-width\n$fieldset-border-bottom-width: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-width,\n #{$input-border-bottom-width}\n);\n\n// --graupl-fieldset-border-left-width\n$fieldset-border-left-width: var(\n --#{root-defaults.$prefix}fieldset-border-left-width,\n #{$input-border-left-width}\n);\n\n// --graupl-fieldset-border-width\n$fieldset-border-width: var(\n --#{root-defaults.$prefix}fieldset-border-width,\n #{$fieldset-border-top-width} #{$fieldset-border-right-width}\n #{$fieldset-border-bottom-width} #{$fieldset-border-left-width}\n);\n\n// --graupl-fieldset-border-top-style\n$fieldset-border-top-style: var(\n --#{root-defaults.$prefix}fieldset-border-top-style,\n #{$input-border-top-style}\n);\n\n// --graupl-fieldset-border-right-style\n$fieldset-border-right-style: var(\n --#{root-defaults.$prefix}fieldset-border-right-style,\n #{$input-border-right-style}\n);\n\n// --graupl-fieldset-border-bottom-style\n$fieldset-border-bottom-style: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-style,\n #{$input-border-bottom-style}\n);\n\n// --graupl-fieldset-border-left-style\n$fieldset-border-left-style: var(\n --#{root-defaults.$prefix}fieldset-border-left-style,\n #{$input-border-left-style}\n);\n\n// --graupl-fieldset-border-style\n$fieldset-border-style: var(\n --#{root-defaults.$prefix}fieldset-border-style,\n #{$fieldset-border-top-style} #{$fieldset-border-right-style}\n #{$fieldset-border-bottom-style} #{$fieldset-border-left-style}\n);\n\n// --graupl-fieldset-border-top-left-radius\n$fieldset-border-top-left-radius: var(\n --#{root-defaults.$prefix}fieldset-border-top-left-radius,\n #{$input-border-top-left-radius}\n);\n\n// --graupl-fieldset-border-top-right-radius\n$fieldset-border-top-right-radius: var(\n --#{root-defaults.$prefix}fieldset-border-top-right-radius,\n #{$input-border-top-right-radius}\n);\n\n// --graupl-fieldset-border-bottom-left-radius\n$fieldset-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-left-radius,\n #{$input-border-bottom-left-radius}\n);\n\n// --graupl-fieldset-border-bottom-right-radius\n$fieldset-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}fieldset-border-bottom-right-radius,\n #{$input-border-bottom-right-radius}\n);\n\n// --graupl-fieldset-border-radius\n$fieldset-border-radius: var(\n --#{root-defaults.$prefix}fieldset-border-radius,\n #{$fieldset-border-top-left-radius} #{$fieldset-border-top-right-radius}\n #{$fieldset-border-bottom-right-radius}\n #{$fieldset-border-bottom-left-radius}\n);\n\n// Border colour properties.\n// --graupl-input-border-color\n$input-border-color: var(\n --#{root-defaults.$prefix}input-border-color,\n #{color.$border-color}\n);\n\n// --graupl-input-disabled-border-color\n$input-disabled-border-color: var(\n --#{root-defaults.$prefix}input-disabled-border-color,\n #{theme.get(secondary, 200)}\n);\n\n// --graupl-fieldset-border-color\n$fieldset-border-color: var(\n --#{root-defaults.$prefix}fieldset-border-color,\n #{$input-border-color}\n);\n\n// --graupl-fieldset-disabled-border-color\n$fieldset-disabled-border-color: var(\n --#{root-defaults.$prefix}fieldset-disabled-border-color,\n #{$input-disabled-border-color}\n);\n\n// Accent color properties.\n// --graupl-input-accent-color\n$input-accent-color: var(\n --#{root-defaults.$prefix}input-accent-color,\n #{$input-color}\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":[]}
|