npm - @graupl/core - Versions diffs - 1.0.0-beta.31 → 1.0.0-beta.32 - Mend

@graupl/core 1.0.0-beta.31 → 1.0.0-beta.32

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.

Files changed (4) hide show

package/dist/css/component/tabs.css +2 -0
package/dist/css/component/tabs.css.map +1 -0
package/package.json +1 -1
package/scss/component/tabs.scss +3 -0

package/dist/css/component/tabs.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ @layer graupl.component{.tabs{padding:var(--graupl-tabs-padding,var(--graupl-tabs-padding-y,var(--graupl-spacer-0,calc(0var(--graupl-spacer,1rem))))var(--graupl-tabs-padding-x,var(--graupl-spacer-0,calc(0var(--graupl-spacer,1rem)))));border-width:var(--graupl-tabs-border-width,var(--graupl-tabs-border-top-width,0rem)var(--graupl-tabs-border-right-width,0rem)var(--graupl-tabs-border-bottom-width,0rem)var(--graupl-tabs-border-left-width,0rem));border-style:var(--graupl-tabs-border-style,var(--graupl-tabs-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-tabs-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-tabs-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-tabs-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-tabs-border-radius,var(--graupl-tabs-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));isolation:isolate;grid-template-rows:[list-start]auto[content-start list-end]1fr[content-end];grid-template-columns:[list-start content-start]1fr[content-end list-end];display:grid}.tab-list{margin:var(--graupl-tabs-tab-list-margin,0 0 calc(-1max(var(--graupl-tabs-tab-list-border-bottom-width,0rem),var(--graupl-tabs-tab-toggle-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem)))))0);padding:var(--graupl-tabs-tab-list-padding,var(--graupl-tabs-tab-list-padding-y,var(--graupl-spacer-0,calc(0var(--graupl-spacer,1rem))))var(--graupl-tabs-tab-list-padding-x,var(--graupl-spacer-0,calc(0var(--graupl-spacer,1rem)))));border-width:var(--graupl-tabs-tab-list-border-width,var(--graupl-tabs-tab-list-border-top-width,0rem)var(--graupl-tabs-tab-list-border-right-width,0rem)var(--graupl-tabs-tab-list-border-bottom-width,0rem)var(--graupl-tabs-tab-list-border-left-width,0rem));border-style:var(--graupl-tabs-tab-list-border-style,var(--graupl-tabs-tab-list-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-tabs-tab-list-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-tabs-tab-list-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-tabs-tab-list-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-tabs-tab-list-border-radius,var(--graupl-tabs-tab-list-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-tab-list-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-tab-list-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-tab-list-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));gap:var(--graupl-tabs-tab-list-gap,var(--graupl-tabs-tab-list-column-gap,var(--graupl-spacer-0,calc(0var(--graupl-spacer,1rem))))var(--graupl-tabs-tab-list-row-gap,var(--graupl-spacer-2,calc(.25var(--graupl-spacer,1rem)))));flex-wrap:wrap;grid-area:list;display:flex}.tab-toggle{min-width:var(--graupl-button-min-width,44px);min-height:var(--graupl-button-min-height,44px);padding:var(--graupl-button-padding,var(--graupl-button-padding-y,var(--graupl-spacer-3,calc(.5var(--graupl-spacer,1rem))))var(--graupl-button-padding-x,var(--graupl-spacer-5,calc(1var(--graupl-spacer,1rem)))));transform:var(--graupl-button-transform,none);transition:var(--graupl-button-transition,background var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease));border-width:var(--graupl-button-border-width,var(--graupl-button-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem)))var(--graupl-button-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))var(--graupl-button-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem)))var(--graupl-button-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-button-border-style,var(--graupl-button-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-button-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-button-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-button-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-button-border-radius,var(--graupl-button-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-button-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-button-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-button-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));font-size:var(--graupl-button-font-size,var(--graupl-font-base,calc(1var(--graupl-font-size-base,1rem))));cursor:pointer;justify-content:center;align-items:center;display:flex}.tab-toggle:visited,.tab-toggle.visited{transform:var(--graupl-button-visited-transform,var(--graupl-button-transform,none))}.tab-toggle:focus-visible,.tab-toggle.focus{transform:var(--graupl-button-focus-transform,var(--graupl-button-transform,none))}.tab-toggle:hover,.tab-toggle.hover{transform:var(--graupl-button-hover-transform,var(--graupl-button-transform,none))}.tab-toggle:active,.tab-toggle.active{transform:var(--graupl-button-active-transform,scale(.95))}.tab-toggle:disabled,.tab-toggle:disabled:visited,.tab-toggle:disabled.visited,.tab-toggle:disabled:focus-visible,.tab-toggle:disabled.focus,.tab-toggle:disabled:hover,.tab-toggle:disabled.hover,.tab-toggle:disabled:active,.tab-toggle:disabled.active,.tab-toggle:disabled[aria-selected=true],.tab-toggle:disabled.selected,.tab-toggle:disabled[aria-current=true],.tab-toggle:disabled.current,.tab-toggle[disabled],.tab-toggle[disabled]:visited,.tab-toggle[disabled].visited,.tab-toggle[disabled]:focus-visible,.tab-toggle[disabled].focus,.tab-toggle[disabled]:hover,.tab-toggle[disabled].hover,.tab-toggle[disabled]:active,.tab-toggle[disabled].active,.tab-toggle[disabled][aria-selected=true],.tab-toggle[disabled].selected,.tab-toggle[disabled][aria-current=true],.tab-toggle[disabled].current,.tab-toggle[aria-disabled=true],.tab-toggle[aria-disabled=true]:visited,.tab-toggle[aria-disabled=true].visited,.tab-toggle[aria-disabled=true]:focus-visible,.tab-toggle[aria-disabled=true].focus,.tab-toggle[aria-disabled=true]:hover,.tab-toggle[aria-disabled=true].hover,.tab-toggle[aria-disabled=true]:active,.tab-toggle[aria-disabled=true].active,.tab-toggle[aria-disabled=true][aria-selected=true],.tab-toggle[aria-disabled=true].selected,.tab-toggle[aria-disabled=true][aria-current=true],.tab-toggle[aria-disabled=true].current,.tab-toggle.disabled,.tab-toggle.disabled:visited,.tab-toggle.disabled.visited,.tab-toggle.disabled:focus-visible,.tab-toggle.disabled.focus,.tab-toggle.disabled:hover,.tab-toggle.disabled.hover,.tab-toggle.disabled:active,.tab-toggle.disabled.active,.tab-toggle.disabled[aria-selected=true],.tab-toggle.disabled.selected,.tab-toggle.disabled[aria-current=true],.tab-toggle.disabled.current{transform:var(--graupl-button-disabled-transform,none)}.tab-toggle:disabled,.tab-toggle[disabled],.tab-toggle[aria-disabled=true],.tab-toggle.disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.tab-toggle{--graupl-button-transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease))}}.tab-toggle{z-index:2;padding:var(--graupl-tabs-tab-toggle-padding,var(--graupl-tabs-tab-toggle-padding-y,var(--graupl-spacer-3,calc(.5var(--graupl-spacer,1rem))))var(--graupl-tabs-tab-toggle-padding-x,var(--graupl-spacer-5,calc(1var(--graupl-spacer,1rem)))));border-width:var(--graupl-tabs-tab-toggle-border-width,var(--graupl-tabs-tab-toggle-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem)))var(--graupl-tabs-tab-toggle-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))var(--graupl-tabs-tab-toggle-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem)))var(--graupl-tabs-tab-toggle-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-tabs-tab-toggle-border-style,var(--graupl-tabs-tab-toggle-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-tabs-tab-toggle-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-tabs-tab-toggle-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-tabs-tab-toggle-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-tabs-tab-toggle-border-radius,var(--graupl-tabs-tab-toggle-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-tab-toggle-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-tab-toggle-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-tab-toggle-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));flex:auto}.tab-toggle:visited,.tab-toggle.visited{transform:var(--graupl-tabs-tab-toggle-visited-transform,var(--graupl-tabs-tab-toggle-transform,none))}.tab-toggle:focus-visible,.tab-toggle.focus{transform:var(--graupl-tabs-tab-toggle-focus-transform,var(--graupl-tabs-tab-toggle-transform,none))}.tab-toggle:hover,.tab-toggle.hover{transform:var(--graupl-tabs-tab-toggle-hover-transform,var(--graupl-tabs-tab-toggle-transform,none))}.tab-toggle:active,.tab-toggle.active{transform:var(--graupl-tabs-tab-toggle-active-transform,none)}.tab-toggle:disabled,.tab-toggle:disabled:visited,.tab-toggle:disabled.visited,.tab-toggle:disabled:focus-visible,.tab-toggle:disabled.focus,.tab-toggle:disabled:hover,.tab-toggle:disabled.hover,.tab-toggle:disabled:active,.tab-toggle:disabled.active,.tab-toggle:disabled[aria-selected=true],.tab-toggle:disabled.selected,.tab-toggle:disabled[aria-current=true],.tab-toggle:disabled.current,.tab-toggle[disabled],.tab-toggle[disabled]:visited,.tab-toggle[disabled].visited,.tab-toggle[disabled]:focus-visible,.tab-toggle[disabled].focus,.tab-toggle[disabled]:hover,.tab-toggle[disabled].hover,.tab-toggle[disabled]:active,.tab-toggle[disabled].active,.tab-toggle[disabled][aria-selected=true],.tab-toggle[disabled].selected,.tab-toggle[disabled][aria-current=true],.tab-toggle[disabled].current,.tab-toggle[aria-disabled=true],.tab-toggle[aria-disabled=true]:visited,.tab-toggle[aria-disabled=true].visited,.tab-toggle[aria-disabled=true]:focus-visible,.tab-toggle[aria-disabled=true].focus,.tab-toggle[aria-disabled=true]:hover,.tab-toggle[aria-disabled=true].hover,.tab-toggle[aria-disabled=true]:active,.tab-toggle[aria-disabled=true].active,.tab-toggle[aria-disabled=true][aria-selected=true],.tab-toggle[aria-disabled=true].selected,.tab-toggle[aria-disabled=true][aria-current=true],.tab-toggle[aria-disabled=true].current,.tab-toggle.disabled,.tab-toggle.disabled:visited,.tab-toggle.disabled.visited,.tab-toggle.disabled:focus-visible,.tab-toggle.disabled.focus,.tab-toggle.disabled:hover,.tab-toggle.disabled.hover,.tab-toggle.disabled:active,.tab-toggle.disabled.active,.tab-toggle.disabled[aria-selected=true],.tab-toggle.disabled.selected,.tab-toggle.disabled[aria-current=true],.tab-toggle.disabled.current{transform:var(--graupl-tabs-tab-toggle-disabled-transform,none)}.tab-toggle[aria-selected=true],.tab-toggle.selected{transform:var(--graupl-tabs-tab-toggle-selected-transform,none)}.tab-content{display:var(--graupl-tabs-tab-content-display,none);z-index:1;padding:var(--graupl-tabs-tab-content-padding,var(--graupl-tabs-tab-content-padding-y,var(--graupl-spacer-3,calc(.5var(--graupl-spacer,1rem))))var(--graupl-tabs-tab-content-padding-x,var(--graupl-spacer-3,calc(.5var(--graupl-spacer,1rem)))));transition:var(--graupl-tabs-tab-content-transition,opacity var(--graupl-tabs-tab-content-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-tabs-tab-content-transition-timing-function,var(--graupl-transition-timing-function,ease)));border-width:var(--graupl-tabs-tab-content-border-width,var(--graupl-tabs-tab-content-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem)))var(--graupl-tabs-tab-content-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))var(--graupl-tabs-tab-content-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem)))var(--graupl-tabs-tab-content-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-tabs-tab-content-border-style,var(--graupl-tabs-tab-content-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-tabs-tab-content-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-tabs-tab-content-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-tabs-tab-content-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-tabs-tab-content-border-radius,var(--graupl-tabs-tab-content-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-tab-content-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-tab-content-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-tabs-tab-content-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));opacity:var(--graupl-tabs-tab-content-opacity,var(--graupl-tabs-tab-content-hide-opacity,0));grid-area:content}.tab-content.hide{--graupl-tabs-tab-content-display:var(--graupl-tabs-tab-content-hide-display,none);--graupl-tabs-tab-content-opacity:var(--graupl-tabs-tab-content-hide-opacity,0)}.tab-content.transitioning{--graupl-tabs-tab-content-display:var(--graupl-tabs-tab-content-transitioning-display,block);--graupl-tabs-tab-content-opacity:var(--graupl-tabs-tab-content-transitioning-opacity,0)}.tab-content.show{--graupl-tabs-tab-content-display:var(--graupl-tabs-tab-content-show-display,block);--graupl-tabs-tab-content-opacity:var(--graupl-tabs-tab-content-show-opacity,1)}@media (prefers-reduced-motion:reduce){.tab-content{--graupl-tabs-tab-content-transition:var(--graupl-tabs-tab-content-transition-reduced-motion,opacity var(--graupl-tabs-tab-content-transition-duration,var(--graupl-transition-duration-fast,.15s))var(--graupl-tabs-tab-content-transition-timing-function,var(--graupl-transition-timing-function,ease)))}}}@layer graupl.theme{.tabs{border-color:var(--graupl-tabs-border-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));background:var(--graupl-tabs-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.tab-list{border-color:var(--graupl-tabs-tab-list-border-color,var(--graupl-tabs-border-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));background:var(--graupl-tabs-tab-list-background,var(--graupl-tabs-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));color:var(--graupl-tabs-tab-list-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.tab-toggle:visited,.tab-toggle.visited{border-color:var(--graupl-button-visited-border-color,var(--graupl-button-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,#001233))))))));background:var(--graupl-button-visited-background,var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));color:var(--graupl-button-visited-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.tab-toggle:focus-visible,.tab-toggle.focus{border-color:var(--graupl-button-focus-border-color,var(--graupl-button-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,#001233))))))));background:var(--graupl-button-focus-background,var(--graupl-button-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.tab-toggle:hover,.tab-toggle.hover{border-color:var(--graupl-button-hover-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,#001233)))))));background:var(--graupl-button-hover-background,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))));color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))}.tab-toggle:active,.tab-toggle.active{border-color:var(--graupl-button-active-border-color,var(--graupl-button-hover-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,#001233))))))));background:var(--graupl-button-active-background,var(--graupl-button-hover-background,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))));color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.tab-toggle:disabled,.tab-toggle:disabled:visited,.tab-toggle:disabled.visited,.tab-toggle:disabled:focus-visible,.tab-toggle:disabled.focus,.tab-toggle:disabled:hover,.tab-toggle:disabled.hover,.tab-toggle:disabled:active,.tab-toggle:disabled.active,.tab-toggle:disabled[aria-selected=true],.tab-toggle:disabled.selected,.tab-toggle:disabled[aria-current=true],.tab-toggle:disabled.current,.tab-toggle[disabled],.tab-toggle[disabled]:visited,.tab-toggle[disabled].visited,.tab-toggle[disabled]:focus-visible,.tab-toggle[disabled].focus,.tab-toggle[disabled]:hover,.tab-toggle[disabled].hover,.tab-toggle[disabled]:active,.tab-toggle[disabled].active,.tab-toggle[disabled][aria-selected=true],.tab-toggle[disabled].selected,.tab-toggle[disabled][aria-current=true],.tab-toggle[disabled].current,.tab-toggle[aria-disabled=true],.tab-toggle[aria-disabled=true]:visited,.tab-toggle[aria-disabled=true].visited,.tab-toggle[aria-disabled=true]:focus-visible,.tab-toggle[aria-disabled=true].focus,.tab-toggle[aria-disabled=true]:hover,.tab-toggle[aria-disabled=true].hover,.tab-toggle[aria-disabled=true]:active,.tab-toggle[aria-disabled=true].active,.tab-toggle[aria-disabled=true][aria-selected=true],.tab-toggle[aria-disabled=true].selected,.tab-toggle[aria-disabled=true][aria-current=true],.tab-toggle[aria-disabled=true].current,.tab-toggle.disabled,.tab-toggle.disabled:visited,.tab-toggle.disabled.visited,.tab-toggle.disabled:focus-visible,.tab-toggle.disabled.focus,.tab-toggle.disabled:hover,.tab-toggle.disabled.hover,.tab-toggle.disabled:active,.tab-toggle.disabled.active,.tab-toggle.disabled[aria-selected=true],.tab-toggle.disabled.selected,.tab-toggle.disabled[aria-current=true],.tab-toggle.disabled.current{border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));background:var(--graupl-button-disabled-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.tab-toggle.primary{--graupl-button-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-button-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-button-hover-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-disabled-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-button-disabled-border-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.tab-toggle.secondary{--graupl-button-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-button-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-button-hover-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-disabled-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-button-disabled-border-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.tab-toggle.tertiary{--graupl-button-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-button-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-button-hover-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-disabled-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-button-disabled-border-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.tab-toggle{border-color:var(--graupl-tabs-tab-toggle-border-color,var(--graupl-tabs-tab-list-border-color,var(--graupl-tabs-border-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))));background:var(--graupl-tabs-tab-toggle-background,var(--graupl-tabs-tab-list-background,var(--graupl-tabs-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))));color:var(--graupl-tabs-tab-toggle-color,var(--graupl-tabs-tab-list-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))}.tab-toggle:visited,.tab-toggle.visited{border-color:var(--graupl-tabs-tab-toggle-visited-border-color,var(--graupl-tabs-tab-toggle-border-color,var(--graupl-tabs-tab-list-border-color,var(--graupl-tabs-border-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))));background:var(--graupl-tabs-tab-toggle-visited-background,var(--graupl-tabs-tab-toggle-background,var(--graupl-tabs-tab-list-background,var(--graupl-tabs-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))));color:var(--graupl-tabs-tab-toggle-visited-color,var(--graupl-tabs-tab-toggle-color,var(--graupl-tabs-tab-list-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))))}.tab-toggle:focus-visible,.tab-toggle.focus{border-color:var(--graupl-tabs-tab-toggle-focus-border-color,var(--graupl-tabs-tab-toggle-border-color,var(--graupl-tabs-tab-list-border-color,var(--graupl-tabs-border-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))));background:var(--graupl-tabs-tab-toggle-focus-background,var(--graupl-tabs-tab-toggle-background,var(--graupl-tabs-tab-list-background,var(--graupl-tabs-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))));color:var(--graupl-tabs-tab-toggle-focus-color,var(--graupl-tabs-tab-toggle-color,var(--graupl-tabs-tab-list-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))))}.tab-toggle:hover,.tab-toggle.hover{border-color:var(--graupl-tabs-tab-toggle-hover-border-color,var(--graupl-tabs-tab-list-border-color,var(--graupl-tabs-border-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))));background:var(--graupl-tabs-tab-toggle-hover-background,var(--graupl-tabs-tab-list-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));color:var(--graupl-tabs-tab-toggle-hover-color,var(--graupl-tabs-tab-list-background,var(--graupl-tabs-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))))}.tab-toggle:active,.tab-toggle.active{border-color:var(--graupl-tabs-tab-toggle-active-border-color,var(--graupl-tabs-tab-toggle-hover-border-color,var(--graupl-tabs-tab-list-border-color,var(--graupl-tabs-border-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))));background:var(--graupl-tabs-tab-toggle-active-background,var(--graupl-tabs-tab-toggle-hover-background,var(--graupl-tabs-tab-list-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))));color:var(--graupl-tabs-tab-toggle-active-color,var(--graupl-tabs-tab-toggle-hover-color,var(--graupl-tabs-tab-list-background,var(--graupl-tabs-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))))}.tab-toggle:disabled,.tab-toggle:disabled:visited,.tab-toggle:disabled.visited,.tab-toggle:disabled:focus-visible,.tab-toggle:disabled.focus,.tab-toggle:disabled:hover,.tab-toggle:disabled.hover,.tab-toggle:disabled:active,.tab-toggle:disabled.active,.tab-toggle:disabled[aria-selected=true],.tab-toggle:disabled.selected,.tab-toggle:disabled[aria-current=true],.tab-toggle:disabled.current,.tab-toggle[disabled],.tab-toggle[disabled]:visited,.tab-toggle[disabled].visited,.tab-toggle[disabled]:focus-visible,.tab-toggle[disabled].focus,.tab-toggle[disabled]:hover,.tab-toggle[disabled].hover,.tab-toggle[disabled]:active,.tab-toggle[disabled].active,.tab-toggle[disabled][aria-selected=true],.tab-toggle[disabled].selected,.tab-toggle[disabled][aria-current=true],.tab-toggle[disabled].current,.tab-toggle[aria-disabled=true],.tab-toggle[aria-disabled=true]:visited,.tab-toggle[aria-disabled=true].visited,.tab-toggle[aria-disabled=true]:focus-visible,.tab-toggle[aria-disabled=true].focus,.tab-toggle[aria-disabled=true]:hover,.tab-toggle[aria-disabled=true].hover,.tab-toggle[aria-disabled=true]:active,.tab-toggle[aria-disabled=true].active,.tab-toggle[aria-disabled=true][aria-selected=true],.tab-toggle[aria-disabled=true].selected,.tab-toggle[aria-disabled=true][aria-current=true],.tab-toggle[aria-disabled=true].current,.tab-toggle.disabled,.tab-toggle.disabled:visited,.tab-toggle.disabled.visited,.tab-toggle.disabled:focus-visible,.tab-toggle.disabled.focus,.tab-toggle.disabled:hover,.tab-toggle.disabled.hover,.tab-toggle.disabled:active,.tab-toggle.disabled.active,.tab-toggle.disabled[aria-selected=true],.tab-toggle.disabled.selected,.tab-toggle.disabled[aria-current=true],.tab-toggle.disabled.current{border-color:var(--graupl-tabs-tab-toggle-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));background:var(--graupl-tabs-tab-toggle-disabled-background,var(--graupl-tabs-tab-list-background,var(--graupl-tabs-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))));color:var(--graupl-tabs-tab-toggle-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.tab-toggle[aria-selected=true],.tab-toggle.selected{border-color:var(--graupl-tabs-tab-toggle-selected-border-color,var(--graupl-tabs-tab-toggle-hover-border-color,var(--graupl-tabs-tab-list-border-color,var(--graupl-tabs-border-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))));background:var(--graupl-tabs-tab-toggle-selected-background,var(--graupl-tabs-tab-toggle-hover-background,var(--graupl-tabs-tab-list-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))));color:var(--graupl-tabs-tab-toggle-selected-color,var(--graupl-tabs-tab-toggle-hover-color,var(--graupl-tabs-tab-list-background,var(--graupl-tabs-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))))}.tab-content{border-color:var(--graupl-tabs-tab-content-border-color,var(--graupl-tabs-border-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))));background:var(--graupl-tabs-tab-content-background,var(--graupl-tabs-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))));color:var(--graupl-tabs-tab-content-color,var(--graupl-tabs-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}}
2	+ /# sourceMappingURL=tabs.css.map /

package/dist/css/component/tabs.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sourceRoot":null,"mappings":"AGSI,wBC4VF,2iDAYA,khEAaA,yyEG/VI,6HAAA,+HAAA,uHAAA,iGAAA,+uDFIF,mHGxBF,uCJmXA,oMAAA,i1DG/VI,+IAAA,iJAAA,yIAAA,oGAAA,wvDAAA,qHHiXJ,iwEAYE,qLAMA,iNAMA,sLI7ZF,uCJoaE,2TDtaA,oBC8aF,ioBA4BA,uvBGpbI,gyBAAA,8xBAAA,yrBAAA,6yBAAA,iuEESF,whCAAA,okCAAA,8iCLkbF,i3BG3bI,6hCAAA,2hCAAA,25BAAA,0iCAAA,i0EAAA,+jCH4cJ","sources":["dist/css/component/tabs.css","var/www/html/packages/core/src/scss/theme/typography/_defaults.scss","var/www/html/packages/core/src/scss/component/tabs/_variables.scss","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/component/tabs/_index.scss","var/www/html/packages/core/src/scss/base/button/_mixins.scss","var/www/html/packages/core/src/scss/base/button/_variables.scss","var/www/html/packages/core/src/scss/mixins/_state.scss","var/www/html/packages/core/src/scss/mixins/_animation.scss","var/www/html/packages/core/src/scss/mixins/_theme.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n/* stylelint-enable scss/operator-no-newline-after */\n@layer graupl.component {\n .tabs {\n display: grid;\n grid-template-columns: [list-start content-start] 1fr [content-end list-end];\n grid-template-rows: [list-start] auto [content-start list-end] 1fr [content-end];\n padding: var(--graupl-tabs-padding, var(--graupl-tabs-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-tabs-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n border-width: var(--graupl-tabs-border-width, var(--graupl-tabs-border-top-width, 0rem) var(--graupl-tabs-border-right-width, 0rem) var(--graupl-tabs-border-bottom-width, 0rem) var(--graupl-tabs-border-left-width, 0rem));\n border-style: var(--graupl-tabs-border-style, var(--graupl-tabs-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-tabs-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-tabs-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-tabs-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-tabs-border-radius, var(--graupl-tabs-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n isolation: isolate;\n }\n .tab-list {\n display: flex;\n grid-area: list;\n flex-wrap: wrap;\n margin: var(--graupl-tabs-tab-list-margin, 0 0 calc(-1 * max(var(--graupl-tabs-tab-list-border-bottom-width, 0rem), var(--graupl-tabs-tab-toggle-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))))) 0);\n padding: var(--graupl-tabs-tab-list-padding, var(--graupl-tabs-tab-list-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-tabs-tab-list-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n border-width: var(--graupl-tabs-tab-list-border-width, var(--graupl-tabs-tab-list-border-top-width, 0rem) var(--graupl-tabs-tab-list-border-right-width, 0rem) var(--graupl-tabs-tab-list-border-bottom-width, 0rem) var(--graupl-tabs-tab-list-border-left-width, 0rem));\n border-style: var(--graupl-tabs-tab-list-border-style, var(--graupl-tabs-tab-list-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-tabs-tab-list-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-tabs-tab-list-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-tabs-tab-list-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-tabs-tab-list-border-radius, var(--graupl-tabs-tab-list-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-tab-list-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-tab-list-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-tab-list-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n gap: var(--graupl-tabs-tab-list-gap, var(--graupl-tabs-tab-list-column-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-tabs-tab-list-row-gap, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem)))));\n }\n .tab-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--graupl-button-min-width, 44px);\n min-height: var(--graupl-button-min-height, 44px);\n padding: var(--graupl-button-padding, var(--graupl-button-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-button-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-button-transform, none);\n transition: var(--graupl-button-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-button-border-width, var(--graupl-button-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-button-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-button-border-style, var(--graupl-button-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-button-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-button-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-button-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-button-border-radius, var(--graupl-button-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-button-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n font-size: var(--graupl-button-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem))));\n cursor: pointer;\n }\n .tab-toggle:visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n .tab-toggle.visited {\n transform: var(--graupl-button-visited-transform, var(--graupl-button-transform, none));\n }\n .tab-toggle:focus-visible {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n .tab-toggle.focus {\n transform: var(--graupl-button-focus-transform, var(--graupl-button-transform, none));\n }\n .tab-toggle:hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n .tab-toggle.hover {\n transform: var(--graupl-button-hover-transform, var(--graupl-button-transform, none));\n }\n .tab-toggle:active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n .tab-toggle.active {\n transform: var(--graupl-button-active-transform, scale(0.95));\n }\n .tab-toggle:disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[disabled].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true]:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true]:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true]:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true]:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true][aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true][aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled:visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled.visited {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled:focus-visible {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled.focus {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled:hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled.hover {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled:active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled.active {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled[aria-selected=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled.selected {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled[aria-current=true] {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle.disabled.current {\n transform: var(--graupl-button-disabled-transform, none);\n }\n .tab-toggle:disabled {\n cursor: not-allowed;\n }\n .tab-toggle[disabled] {\n cursor: not-allowed;\n }\n .tab-toggle[aria-disabled=true] {\n cursor: not-allowed;\n }\n .tab-toggle.disabled {\n cursor: not-allowed;\n }\n @media (prefers-reduced-motion: reduce) {\n .tab-toggle {\n --graupl-button-transition: var(--graupl-button-transition-reduced-motion, background var(--graupl-transition-timing-function, ease), color var(--graupl-transition-timing-function, ease));\n }\n }\n .tab-toggle {\n z-index: 2;\n flex: 1 1 auto;\n padding: var(--graupl-tabs-tab-toggle-padding, var(--graupl-tabs-tab-toggle-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-tabs-tab-toggle-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n border-width: var(--graupl-tabs-tab-toggle-border-width, var(--graupl-tabs-tab-toggle-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-tabs-tab-toggle-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-tabs-tab-toggle-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-tabs-tab-toggle-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-tabs-tab-toggle-border-style, var(--graupl-tabs-tab-toggle-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-tabs-tab-toggle-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-tabs-tab-toggle-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-tabs-tab-toggle-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-tabs-tab-toggle-border-radius, var(--graupl-tabs-tab-toggle-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-tab-toggle-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-tab-toggle-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-tab-toggle-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n }\n .tab-toggle:visited {\n transform: var(--graupl-tabs-tab-toggle-visited-transform, var(--graupl-tabs-tab-toggle-transform, none));\n }\n .tab-toggle.visited {\n transform: var(--graupl-tabs-tab-toggle-visited-transform, var(--graupl-tabs-tab-toggle-transform, none));\n }\n .tab-toggle:focus-visible {\n transform: var(--graupl-tabs-tab-toggle-focus-transform, var(--graupl-tabs-tab-toggle-transform, none));\n }\n .tab-toggle.focus {\n transform: var(--graupl-tabs-tab-toggle-focus-transform, var(--graupl-tabs-tab-toggle-transform, none));\n }\n .tab-toggle:hover {\n transform: var(--graupl-tabs-tab-toggle-hover-transform, var(--graupl-tabs-tab-toggle-transform, none));\n }\n .tab-toggle.hover {\n transform: var(--graupl-tabs-tab-toggle-hover-transform, var(--graupl-tabs-tab-toggle-transform, none));\n }\n .tab-toggle:active {\n transform: var(--graupl-tabs-tab-toggle-active-transform, none);\n }\n .tab-toggle.active {\n transform: var(--graupl-tabs-tab-toggle-active-transform, none);\n }\n .tab-toggle:disabled {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled:visited {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled.visited {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled:focus-visible {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled.focus {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled:hover {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled.hover {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled:active {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled.active {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled[aria-selected=true] {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled.selected {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled[aria-current=true] {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle:disabled.current {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled] {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled]:visited {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled].visited {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled]:focus-visible {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled].focus {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled]:hover {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled].hover {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled]:active {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled].active {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled][aria-selected=true] {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled].selected {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled][aria-current=true] {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[disabled].current {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true] {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true]:visited {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].visited {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true]:focus-visible {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].focus {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true]:hover {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].hover {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true]:active {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].active {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true][aria-selected=true] {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].selected {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true][aria-current=true] {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-disabled=true].current {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled:visited {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled.visited {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled:focus-visible {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled.focus {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled:hover {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled.hover {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled:active {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled.active {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled[aria-selected=true] {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled.selected {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled[aria-current=true] {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle.disabled.current {\n transform: var(--graupl-tabs-tab-toggle-disabled-transform, none);\n }\n .tab-toggle[aria-selected=true] {\n transform: var(--graupl-tabs-tab-toggle-selected-transform, none);\n }\n .tab-toggle.selected {\n transform: var(--graupl-tabs-tab-toggle-selected-transform, none);\n }\n .tab-content {\n display: var(--graupl-tabs-tab-content-display, none);\n z-index: 1;\n grid-area: content;\n padding: var(--graupl-tabs-tab-content-padding, var(--graupl-tabs-tab-content-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-tabs-tab-content-padding-x, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n transition: var(--graupl-tabs-tab-content-transition, opacity var(--graupl-tabs-tab-content-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-tabs-tab-content-transition-timing-function, var(--graupl-transition-timing-function, ease)));\n border-width: var(--graupl-tabs-tab-content-border-width, var(--graupl-tabs-tab-content-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-tabs-tab-content-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-tabs-tab-content-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-tabs-tab-content-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-tabs-tab-content-border-style, var(--graupl-tabs-tab-content-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-tabs-tab-content-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-tabs-tab-content-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-tabs-tab-content-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-tabs-tab-content-border-radius, var(--graupl-tabs-tab-content-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-tab-content-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-tab-content-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-tabs-tab-content-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n opacity: var(--graupl-tabs-tab-content-opacity, var(--graupl-tabs-tab-content-hide-opacity, 0));\n }\n .tab-content.hide {\n --graupl-tabs-tab-content-display: var(--graupl-tabs-tab-content-hide-display, none);\n --graupl-tabs-tab-content-opacity: var(--graupl-tabs-tab-content-hide-opacity, 0);\n }\n .tab-content.transitioning {\n --graupl-tabs-tab-content-display: var(--graupl-tabs-tab-content-transitioning-display, block);\n --graupl-tabs-tab-content-opacity: var(--graupl-tabs-tab-content-transitioning-opacity, 0);\n }\n .tab-content.show {\n --graupl-tabs-tab-content-display: var(--graupl-tabs-tab-content-show-display, block);\n --graupl-tabs-tab-content-opacity: var(--graupl-tabs-tab-content-show-opacity, 1);\n }\n @media (prefers-reduced-motion: reduce) {\n .tab-content {\n --graupl-tabs-tab-content-transition: var(--graupl-tabs-tab-content-transition-reduced-motion, opacity var(--graupl-tabs-tab-content-transition-duration, var(--graupl-transition-duration-fast, 150ms)) var(--graupl-tabs-tab-content-transition-timing-function, var(--graupl-transition-timing-function, ease)));\n }\n }\n}\n@layer graupl.theme {\n .tabs {\n border-color: var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-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-tabs-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 .tab-list {\n border-color: var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-list-color, var(--graupl-tabs-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 .tab-toggle {\n border-color: var(--graupl-button-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-button-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-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))));\n }\n .tab-toggle:visited {\n border-color: var(--graupl-button-visited-border-color, var(--graupl-button-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-button-visited-background, var(--graupl-button-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-button-visited-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .tab-toggle.visited {\n border-color: var(--graupl-button-visited-border-color, var(--graupl-button-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-button-visited-background, var(--graupl-button-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-button-visited-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .tab-toggle:focus-visible {\n border-color: var(--graupl-button-focus-border-color, var(--graupl-button-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-button-focus-background, var(--graupl-button-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-button-focus-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .tab-toggle.focus {\n border-color: var(--graupl-button-focus-border-color, var(--graupl-button-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-button-focus-background, var(--graupl-button-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-button-focus-color, var(--graupl-button-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n .tab-toggle:hover {\n border-color: var(--graupl-button-hover-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-button-hover-background, 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 color: var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n }\n .tab-toggle.hover {\n border-color: var(--graupl-button-hover-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-button-hover-background, 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 color: var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n }\n .tab-toggle:active {\n border-color: var(--graupl-button-active-border-color, var(--graupl-button-hover-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-button-active-background, var(--graupl-button-hover-background, 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 color: var(--graupl-button-active-color, var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .tab-toggle.active {\n border-color: var(--graupl-button-active-border-color, var(--graupl-button-hover-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-button-active-background, var(--graupl-button-hover-background, 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 color: var(--graupl-button-active-color, var(--graupl-button-hover-color, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))))));\n }\n .tab-toggle:disabled {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled[aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled[aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled]:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled]:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled]:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled]:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled][aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled][aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true]:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true]:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true]:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true]:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true][aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true][aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled:visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.visited {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled:focus-visible {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.focus {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled:hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.hover {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled:active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.active {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled[aria-selected=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.selected {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled[aria-current=true] {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.current {\n border-color: var(--graupl-button-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-button-disabled-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-button-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.primary {\n --graupl-button-color: var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%))));\n --graupl-button-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 .tab-toggle.secondary {\n --graupl-button-color: var(--graupl-theme-active--secondary--900, var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--secondary--100, var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))));\n --graupl-button-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 .tab-toggle.tertiary {\n --graupl-button-color: var(--graupl-theme-active--tertiary--900, var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%))));\n --graupl-button-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-hover-color: var(--graupl-theme-active--tertiary--100, var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%))));\n --graupl-button-hover-background: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-hover-border-color: var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));\n --graupl-button-disabled-color: var(--graupl-theme-active--tertiary--200, var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%))));\n --graupl-button-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 .tab-toggle {\n border-color: var(--graupl-tabs-tab-toggle-border-color, var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-toggle-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-color, var(--graupl-tabs-tab-list-color, var(--graupl-tabs-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 .tab-toggle:visited {\n border-color: var(--graupl-tabs-tab-toggle-visited-border-color, var(--graupl-tabs-tab-toggle-border-color, var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-toggle-visited-background, var(--graupl-tabs-tab-toggle-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-visited-color, var(--graupl-tabs-tab-toggle-color, var(--graupl-tabs-tab-list-color, var(--graupl-tabs-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 .tab-toggle.visited {\n border-color: var(--graupl-tabs-tab-toggle-visited-border-color, var(--graupl-tabs-tab-toggle-border-color, var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-toggle-visited-background, var(--graupl-tabs-tab-toggle-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-visited-color, var(--graupl-tabs-tab-toggle-color, var(--graupl-tabs-tab-list-color, var(--graupl-tabs-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 .tab-toggle:focus-visible {\n border-color: var(--graupl-tabs-tab-toggle-focus-border-color, var(--graupl-tabs-tab-toggle-border-color, var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-toggle-focus-background, var(--graupl-tabs-tab-toggle-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-focus-color, var(--graupl-tabs-tab-toggle-color, var(--graupl-tabs-tab-list-color, var(--graupl-tabs-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 .tab-toggle.focus {\n border-color: var(--graupl-tabs-tab-toggle-focus-border-color, var(--graupl-tabs-tab-toggle-border-color, var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-toggle-focus-background, var(--graupl-tabs-tab-toggle-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-focus-color, var(--graupl-tabs-tab-toggle-color, var(--graupl-tabs-tab-list-color, var(--graupl-tabs-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 .tab-toggle:hover {\n border-color: var(--graupl-tabs-tab-toggle-hover-border-color, var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-toggle-hover-background, var(--graupl-tabs-tab-list-color, var(--graupl-tabs-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 color: var(--graupl-tabs-tab-toggle-hover-color, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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 }\n .tab-toggle.hover {\n border-color: var(--graupl-tabs-tab-toggle-hover-border-color, var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-toggle-hover-background, var(--graupl-tabs-tab-list-color, var(--graupl-tabs-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 color: var(--graupl-tabs-tab-toggle-hover-color, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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 }\n .tab-toggle:active {\n border-color: var(--graupl-tabs-tab-toggle-active-border-color, var(--graupl-tabs-tab-toggle-hover-border-color, var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-toggle-active-background, var(--graupl-tabs-tab-toggle-hover-background, var(--graupl-tabs-tab-list-color, var(--graupl-tabs-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 color: var(--graupl-tabs-tab-toggle-active-color, var(--graupl-tabs-tab-toggle-hover-color, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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 }\n .tab-toggle.active {\n border-color: var(--graupl-tabs-tab-toggle-active-border-color, var(--graupl-tabs-tab-toggle-hover-border-color, var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-toggle-active-background, var(--graupl-tabs-tab-toggle-hover-background, var(--graupl-tabs-tab-list-color, var(--graupl-tabs-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 color: var(--graupl-tabs-tab-toggle-active-color, var(--graupl-tabs-tab-toggle-hover-color, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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 }\n .tab-toggle:disabled {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled:visited {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.visited {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled:focus-visible {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.focus {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled:hover {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.hover {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled:active {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.active {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled[aria-selected=true] {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.selected {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled[aria-current=true] {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle:disabled.current {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled] {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled]:visited {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].visited {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled]:focus-visible {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].focus {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled]:hover {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].hover {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled]:active {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].active {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled][aria-selected=true] {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].selected {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled][aria-current=true] {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[disabled].current {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true] {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true]:visited {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].visited {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true]:focus-visible {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].focus {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true]:hover {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].hover {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true]:active {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].active {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true][aria-selected=true] {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].selected {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true][aria-current=true] {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-disabled=true].current {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled:visited {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.visited {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled:focus-visible {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.focus {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled:hover {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.hover {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled:active {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.active {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled[aria-selected=true] {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.selected {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled[aria-current=true] {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle.disabled.current {\n border-color: var(--graupl-tabs-tab-toggle-disabled-border-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n background: var(--graupl-tabs-tab-toggle-disabled-background, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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-tabs-tab-toggle-disabled-color, var(--graupl-theme-active--primary--200, var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)))));\n }\n .tab-toggle[aria-selected=true] {\n border-color: var(--graupl-tabs-tab-toggle-selected-border-color, var(--graupl-tabs-tab-toggle-hover-border-color, var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-toggle-selected-background, var(--graupl-tabs-tab-toggle-hover-background, var(--graupl-tabs-tab-list-color, var(--graupl-tabs-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 color: var(--graupl-tabs-tab-toggle-selected-color, var(--graupl-tabs-tab-toggle-hover-color, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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 }\n .tab-toggle.selected {\n border-color: var(--graupl-tabs-tab-toggle-selected-border-color, var(--graupl-tabs-tab-toggle-hover-border-color, var(--graupl-tabs-tab-list-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-toggle-selected-background, var(--graupl-tabs-tab-toggle-hover-background, var(--graupl-tabs-tab-list-color, var(--graupl-tabs-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 color: var(--graupl-tabs-tab-toggle-selected-color, var(--graupl-tabs-tab-toggle-hover-color, var(--graupl-tabs-tab-list-background, var(--graupl-tabs-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 }\n .tab-content {\n border-color: var(--graupl-tabs-tab-content-border-color, var(--graupl-tabs-border-color, var(--graupl-tabs-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-tabs-tab-content-background, var(--graupl-tabs-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-tabs-tab-content-color, var(--graupl-tabs-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))));\n }\n}","// @graupl/core typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: \":\" !default;\n$root-selector: \"root\" !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$body-selector-base: $selector-base !default;\n$body-selector: \"body\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$line-height: 1.2em !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n xs: 0.694,\n sm: 0.833,\n base: 1,\n lg: 1.2,\n xl: 1.44,\n 2xl: 1.728,\n 3xl: 2.074,\n 4xl: 2.488,\n 5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n $font-size-multipliers: map.merge(\n $-font-size-multipliers,\n $font-size-multipliers\n );\n}\n\n// Weights.\n$-font-weights: (\n light: 300,\n normal: 400,\n bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n system-ui,\n -apple-system,\n blinkmacsystemfont,\n \"Segoe UI\",\n roboto,\n \"Helvetica Neue\",\n arial,\n sans-serif !default;\n","// @graupl/core badge base variables.\n//\n// These values are to be used to directly style bases and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-tabs-padding-x | var(--graupl-spacer-0) |\n// | --graupl-tabs-padding-y | var(--graupl-spacer-0) |\n// | --graupl-tabs-padding | var(--graupl-tabs-padding-y) var(--graupl-tabs-padding-x) |\n// | --graupl-tabs-color | var(--graupl-color) |\n// | --graupl-tabs-background | var(--graupl-background) |\n// | --graupl-tabs-border-color | var(--graupl-tabs-color) |\n// | --graupl-tabs-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-tabs-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-tabs-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-tabs-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-tabs-border-radius | var(--graupl-tabs-border-top-left-radius) var(--graupl-tabs-border-top-right-radius) var(--graupl-tabs-border-bottom-right-radius) var(--graupl-tabs-border-bottom-left-radius) |\n// | --graupl-tabs-border-top-width | 0rem |\n// | --graupl-tabs-border-right-width | 0rem |\n// | --graupl-tabs-border-bottom-width | 0rem |\n// | --graupl-tabs-border-left-width | 0rem |\n// | --graupl-tabs-border-width | var(--graupl-tabs-border-top-width) var(--graupl-tabs-border-right-width) var(--graupl-tabs-border-bottom-width) var(--graupl-tabs-border-left-width) |\n// | --graupl-tabs-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-tabs-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-tabs-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-tabs-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-tabs-border-style | var(--graupl-tabs-border-top-style) var(--graupl-tabs-border-right-style) var(--graupl-tabs-border-bottom-style) var(--graupl-tabs-border-left-style) |\n// | --graupl-tabs-tab-list-column-gap | var(--graupl-spacer-0) |\n// | --graupl-tabs-tab-list-row-gap | var(--graupl-spacer-2) |\n// | --graupl-tabs-tab-list-gap | var(--graupl-tabs-tab-list-column-gap) var(--graupl-tabs-tab-list-row-gap) |\n// | --graupl-tabs-tab-list-background | var(--graupl-tabs-background) |\n// | --graupl-tabs-tab-list-color | var(--graupl-tabs-color) |\n// | --graupl-tabs-tab-list-border-color | var(--graupl-tabs-border-color) |\n// | --graupl-tabs-tab-list-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-tabs-tab-list-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-tabs-tab-list-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-tabs-tab-list-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-tabs-tab-list-border-radius | var(--graupl-tabs-tab-list-border-top-left-radius) var(--graupl-tabs-tab-list-border-top-right-radius) var(--graupl-tabs-tab-list-border-bottom-right-radius) var(--graupl-tabs-tab-list-border-bottom-left-radius) |\n// | --graupl-tabs-tab-list-border-top-width | 0rem |\n// | --graupl-tabs-tab-list-border-right-width | 0rem |\n// | --graupl-tabs-tab-list-border-bottom-width | 0rem |\n// | --graupl-tabs-tab-list-border-left-width | 0rem |\n// | --graupl-tabs-tab-list-border-width | var(--graupl-tabs-tab-list-border-top-width) var(--graupl-tabs-tab-list-border-right-width) var(--graupl-tabs-tab-list-border-bottom-width) var(--graupl-tabs-tab-list-border-left-width) |\n// | --graupl-tabs-tab-list-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-tabs-tab-list-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-tabs-tab-list-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-tabs-tab-list-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-tabs-tab-list-border-style | var(--graupl-tabs-tab-list-border-top-style) var(--graupl-tabs-tab-list-border-right-style) var(--graupl-tabs-tab-list-border-bottom-style) var(--graupl-tabs-tab-list-border-left-style) |\n// | --graupl-tabs-tab-toggle-padding-x | var(--graupl-spacer-5) |\n// | --graupl-tabs-tab-toggle-padding-y | var(--graupl-spacer-3) |\n// | --graupl-tabs-tab-toggle-padding | var(--graupl-tabs-tab-toggle-padding-y) var(--graupl-tabs-tab-toggle-padding-x) |\n// | --graupl-tabs-tab-toggle-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-tabs-tab-toggle-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-tabs-tab-toggle-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-tabs-tab-toggle-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-tabs-tab-toggle-border-radius | var(--graupl-tabs-tab-toggle-border-top-left-radius) var(--graupl-tabs-tab-toggle-border-top-right-radius) var(--graupl-tabs-tab-toggle-border-bottom-right-radius) var(--graupl-tabs-tab-toggle-border-bottom-left-radius) |\n// | --graupl-tabs-tab-toggle-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-tabs-tab-toggle-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-tabs-tab-toggle-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-tabs-tab-toggle-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-tabs-tab-toggle-border-width | var(--graupl-tabs-tab-toggle-border-top-width) var(--graupl-tabs-tab-toggle-border-right-width) var(--graupl-tabs-tab-toggle-border-bottom-width) var(--graupl-tabs-tab-toggle-border-left-width) |\n// | --graupl-tabs-tab-toggle-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-tabs-tab-toggle-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-tabs-tab-toggle-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-tabs-tab-toggle-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-tabs-tab-toggle-border-style | var(--graupl-tabs-tab-toggle-border-top-style) var(--graupl-tabs-tab-toggle-border-right-style) var(--graupl-tabs-tab-toggle-border-bottom-style) var(--graupl-tabs-tab-toggle-border-left-style) |\n// | --graupl-tabs-tab-content-padding-x | var(--graupl-spacer-3) |\n// | --graupl-tabs-tab-content-padding-y | var(--graupl-spacer-3) |\n// | --graupl-tabs-tab-content-padding | var(--graupl-tabs-tab-content-padding-y) var(--graupl-tabs-tab-content-padding-x) |\n// | --graupl-tabs-tab-content-background | var(--graupl-tabs-background) |\n// | --graupl-tabs-tab-content-color | var(--graupl-tabs-color) |\n// | --graupl-tabs-tab-content-border-color | var(--graupl-tabs-border-color) |\n// | --graupl-tabs-tab-content-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-tabs-tab-content-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-tabs-tab-content-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-tabs-tab-content-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-tabs-tab-content-border-radius | var(--graupl-tabs-tab-content-border-top-left-radius) var(--graupl-tabs-tab-content-border-top-right-radius) var(--graupl-tabs-tab-content-border-bottom-right-radius) var(--graupl-tabs-tab-content-border-bottom-left-radius) |\n// | --graupl-tabs-tab-content-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-tabs-tab-content-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-tabs-tab-content-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-tabs-tab-content-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-tabs-tab-content-border-width | var(--graupl-tabs-tab-content-border-top-width) var(--graupl-tabs-tab-content-border-right-width) var(--graupl-tabs-tab-content-border-bottom-width) var(--graupl-tabs-tab-content-border-left-width) |\n// | --graupl-tabs-tab-content-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-tabs-tab-content-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-tabs-tab-content-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-tabs-tab-content-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-tabs-tab-content-border-style | var(--graupl-tabs-tab-content-border-top-style) var(--graupl-tabs-tab-content-border-right-style) var(--graupl-tabs-tab-content-border-bottom-style) var(--graupl-tabs-tab-content-border-left-style) |\n// | --graupl-tabs-tab-content-show-display | block |\n// | --graupl-tabs-tab-content-hide-display | none |\n// | --graupl-tabs-tab-content-transitioning-display | block |\n// | --graupl-tabs-tab-content-display | none |\n// | --graupl-tabs-tab-content-show-opacity | 1 |\n// | --graupl-tabs-tab-content-hide-opacity | 0 |\n// | --graupl-tabs-tab-content-transitioning-opacity | 0 |\n// | --graupl-tabs-tab-content-opacity | 0 |\n// | --graupl-tabs-tab-content-transition-duration | var(--graupl-transition-duration-fast) |\n// | --graupl-tabs-tab-content-transition-timing-function | var(--graupl-transition-timing-function) |\n// | --graupl-tabs-tab-content-transition | opacity var(--graupl-tabs-tab-content-transition-duration) var(--graupl-tabs-tab-content-transition-timing-function) |\n// | --graupl-tabs-tab-content-transition-reduced-motion | opacity var(--graupl-tabs-tab-content-transition-duration) var(--graupl-tabs-tab-content-transition-timing-function) |\n// | --graupl-tabs-tab-toggle-background | var(--graupl-tabs-tab-list-background) |\n// | --graupl-tabs-tab-toggle-visited-background | var(--graupl-tabs-tab-toggle-background) |\n// | --graupl-tabs-tab-toggle-focus-background | var(--graupl-tabs-tab-toggle-background) |\n// | --graupl-tabs-tab-toggle-hover-background | var(--graupl-tabs-tab-list-color) |\n// | --graupl-tabs-tab-toggle-active-background | var(--graupl-tabs-tab-toggle-hover-background) |\n// | --graupl-tabs-tab-toggle-selected-background | var(--graupl-tabs-tab-toggle-hover-background) |\n// | --graupl-tabs-tab-toggle-disabled-background | var(--graupl-tabs-tab-list-background) |\n// | --graupl-tabs-tab-toggle-color | var(--graupl-tabs-tab-list-color) |\n// | --graupl-tabs-tab-toggle-visited-color | var(--graupl-tabs-tab-toggle-color) |\n// | --graupl-tabs-tab-toggle-focus-color | var(--graupl-tabs-tab-toggle-color) |\n// | --graupl-tabs-tab-toggle-hover-color | var(--graupl-tabs-tab-list-background) |\n// | --graupl-tabs-tab-toggle-active-color | var(--graupl-tabs-tab-toggle-hover-color) |\n// | --graupl-tabs-tab-toggle-selected-color | var(--graupl-tabs-tab-toggle-hover-color) |\n// | --graupl-tabs-tab-toggle-disabled-color | var(--graupl-theme-active--primary--200) |\n// | --graupl-tabs-tab-toggle-border-color | var(--graupl-tabs-tab-list-border-color) |\n// | --graupl-tabs-tab-toggle-visited-border-color | var(--graupl-tabs-tab-toggle-border-color) |\n// | --graupl-tabs-tab-toggle-focus-border-color | var(--graupl-tabs-tab-toggle-border-color) |\n// | --graupl-tabs-tab-toggle-hover-border-color | var(--graupl-tabs-tab-list-border-color) |\n// | --graupl-tabs-tab-toggle-active-border-color | var(--graupl-tabs-tab-toggle-hover-border-color) |\n// | --graupl-tabs-tab-toggle-selected-border-color | var(--graupl-tabs-tab-toggle-hover-border-color) |\n// | --graupl-tabs-tab-toggle-disabled-border-color | var(--graupl-theme-active--primary--200) |\n// | --graupl-tabs-tab-toggle-transform | none |\n// | --graupl-tabs-tab-toggle-visited-transform | var(--graupl-tabs-tab-toggle-transform) |\n// | --graupl-tabs-tab-toggle-focus-transform | var(--graupl-tabs-tab-toggle-transform) |\n// | --graupl-tabs-tab-toggle-hover-transform | var(--graupl-tabs-tab-toggle-transform) |\n// | --graupl-tabs-tab-toggle-active-transform | none |\n// | --graupl-tabs-tab-toggle-selected-transform | none |\n// | --graupl-tabs-tab-toggle-disabled-transform | none |\n// | --graupl-tabs-tab-list-padding-x | var(--graupl-spacer-0) |\n// | --graupl-tabs-tab-list-padding-y | var(--graupl-spacer-0) |\n// | --graupl-tabs-tab-list-padding | var(--graupl-tabs-tab-list-padding-y) var(--graupl-tabs-tab-list-padding-x) |\n// | --graupl-tabs-tab-list-margin | 0 0 calc( -1 * max( var(--graupl-tabs-tab-list-border-bottom-width), var(--graupl-tabs-tab-toggle-border-bottom-width) ) ) 0 |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// Tabs properties.\n// --graupl-tabs-padding-x\n$tabs-padding-x: var(\n --#{root-defaults.$prefix}tabs-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-tabs-padding-y\n$tabs-padding-y: var(\n --#{root-defaults.$prefix}tabs-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-tabs-padding\n$tabs-padding: var(\n --#{root-defaults.$prefix}tabs-padding,\n #{$tabs-padding-y} #{$tabs-padding-x}\n);\n\n// Tabs color properties.\n// --graupl-tabs-color\n$tabs-color: var(--#{root-defaults.$prefix}tabs-color, #{color.$color});\n\n// --graupl-tabs-background\n$tabs-background: var(\n --#{root-defaults.$prefix}tabs-background,\n #{color.$background}\n);\n\n// Tabs border properties.\n// --graupl-tabs-border-color\n$tabs-border-color: var(\n --#{root-defaults.$prefix}tabs-border-color,\n #{$tabs-color}\n);\n\n// --graupl-tabs-border-top-left-radius\n$tabs-border-top-left-radius: var(\n --#{root-defaults.$prefix}tabs-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-tabs-border-top-right-radius\n$tabs-border-top-right-radius: var(\n --#{root-defaults.$prefix}tabs-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-tabs-border-bottom-left-radius\n$tabs-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}tabs-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-tabs-border-bottom-right-radius\n$tabs-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}tabs-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-tabs-border-radius\n$tabs-border-radius: var(\n --#{root-defaults.$prefix}tabs-border-radius,\n #{$tabs-border-top-left-radius} #{$tabs-border-top-right-radius}\n #{$tabs-border-bottom-right-radius} #{$tabs-border-bottom-left-radius}\n);\n\n// --graupl-tabs-border-top-width\n$tabs-border-top-width: var(\n --#{root-defaults.$prefix}tabs-border-top-width,\n 0rem\n);\n\n// --graupl-tabs-border-right-width\n$tabs-border-right-width: var(\n --#{root-defaults.$prefix}tabs-border-right-width,\n 0rem\n);\n\n// --graupl-tabs-border-bottom-width\n$tabs-border-bottom-width: var(\n --#{root-defaults.$prefix}tabs-border-bottom-width,\n 0rem\n);\n\n// --graupl-tabs-border-left-width\n$tabs-border-left-width: var(\n --#{root-defaults.$prefix}tabs-border-left-width,\n 0rem\n);\n\n// --graupl-tabs-border-width\n$tabs-border-width: var(\n --#{root-defaults.$prefix}tabs-border-width,\n #{$tabs-border-top-width} #{$tabs-border-right-width}\n #{$tabs-border-bottom-width} #{$tabs-border-left-width}\n);\n\n// --graupl-tabs-border-top-style\n$tabs-border-top-style: var(\n --#{root-defaults.$prefix}tabs-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-tabs-border-right-style\n$tabs-border-right-style: var(\n --#{root-defaults.$prefix}tabs-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-tabs-border-bottom-style\n$tabs-border-bottom-style: var(\n --#{root-defaults.$prefix}tabs-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-tabs-border-left-style\n$tabs-border-left-style: var(\n --#{root-defaults.$prefix}tabs-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-tabs-border-style\n$tabs-border-style: var(\n --#{root-defaults.$prefix}tabs-border-style,\n #{$tabs-border-top-style} #{$tabs-border-right-style}\n #{$tabs-border-bottom-style} #{$tabs-border-left-style}\n);\n\n// Tab list gap properties.\n// --graupl-tabs-tab-list-column-gap\n$tabs-tab-list-column-gap: var(\n --#{root-defaults.$prefix}tabs-tab-list-column-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-tabs-tab-list-row-gap\n$tabs-tab-list-row-gap: var(\n --#{root-defaults.$prefix}tabs-tab-list-row-gap,\n #{map.get(root-variables.$spacers, 2)}\n);\n\n// --graupl-tabs-tab-list-gap\n$tabs-tab-list-gap: var(\n --#{root-defaults.$prefix}tabs-tab-list-gap,\n #{$tabs-tab-list-column-gap} #{$tabs-tab-list-row-gap}\n);\n\n// --graupl-tabs-tab-list-background\n$tabs-tab-list-background: var(\n --#{root-defaults.$prefix}tabs-tab-list-background,\n #{$tabs-background}\n);\n\n// --graupl-tabs-tab-list-color\n$tabs-tab-list-color: var(\n --#{root-defaults.$prefix}tabs-tab-list-color,\n #{$tabs-color}\n);\n\n// Tab list border properties.\n// --graupl-tabs-tab-list-border-color\n$tabs-tab-list-border-color: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-color,\n #{$tabs-border-color}\n);\n\n// --graupl-tabs-tab-list-border-top-left-radius\n$tabs-tab-list-border-top-left-radius: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-tabs-tab-list-border-top-right-radius\n$tabs-tab-list-border-top-right-radius: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-tabs-tab-list-border-bottom-left-radius\n$tabs-tab-list-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-tabs-tab-list-border-bottom-right-radius\n$tabs-tab-list-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-tabs-tab-list-border-radius\n$tabs-tab-list-border-radius: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-radius,\n #{$tabs-tab-list-border-top-left-radius}\n #{$tabs-tab-list-border-top-right-radius}\n #{$tabs-tab-list-border-bottom-right-radius}\n #{$tabs-tab-list-border-bottom-left-radius}\n);\n\n// --graupl-tabs-tab-list-border-top-width\n$tabs-tab-list-border-top-width: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-top-width,\n 0rem\n);\n\n// --graupl-tabs-tab-list-border-right-width\n$tabs-tab-list-border-right-width: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-right-width,\n 0rem\n);\n\n// --graupl-tabs-tab-list-border-bottom-width\n$tabs-tab-list-border-bottom-width: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-bottom-width,\n 0rem\n);\n\n// --graupl-tabs-tab-list-border-left-width\n$tabs-tab-list-border-left-width: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-left-width,\n 0rem\n);\n\n// --graupl-tabs-tab-list-border-width\n$tabs-tab-list-border-width: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-width,\n #{$tabs-tab-list-border-top-width} #{$tabs-tab-list-border-right-width}\n #{$tabs-tab-list-border-bottom-width} #{$tabs-tab-list-border-left-width}\n);\n\n// --graupl-tabs-tab-list-border-top-style\n$tabs-tab-list-border-top-style: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-tabs-tab-list-border-right-style\n$tabs-tab-list-border-right-style: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-tabs-tab-list-border-bottom-style\n$tabs-tab-list-border-bottom-style: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-tabs-tab-list-border-left-style\n$tabs-tab-list-border-left-style: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-tabs-tab-list-border-style\n$tabs-tab-list-border-style: var(\n --#{root-defaults.$prefix}tabs-tab-list-border-style,\n #{$tabs-tab-list-border-top-style} #{$tabs-tab-list-border-right-style}\n #{$tabs-tab-list-border-bottom-style} #{$tabs-tab-list-border-left-style}\n);\n\n// Tab toggle properties.\n// --graupl-tabs-tab-toggle-padding-x\n$tabs-tab-toggle-padding-x: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-tabs-tab-toggle-padding-y\n$tabs-tab-toggle-padding-y: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-tabs-tab-toggle-padding\n$tabs-tab-toggle-padding: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-padding,\n #{$tabs-tab-toggle-padding-y} #{$tabs-tab-toggle-padding-x}\n);\n\n// Tab toggle border properties.\n// --graupl-tabs-tab-toggle-border-top-left-radius\n$tabs-tab-toggle-border-top-left-radius: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-tabs-tab-toggle-border-top-right-radius\n$tabs-tab-toggle-border-top-right-radius: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-tabs-tab-toggle-border-bottom-left-radius\n$tabs-tab-toggle-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-tabs-tab-toggle-border-bottom-right-radius\n$tabs-tab-toggle-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-tabs-tab-toggle-border-radius\n$tabs-tab-toggle-border-radius: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-radius,\n #{$tabs-tab-toggle-border-top-left-radius}\n #{$tabs-tab-toggle-border-top-right-radius}\n #{$tabs-tab-toggle-border-bottom-right-radius}\n #{$tabs-tab-toggle-border-bottom-left-radius}\n);\n\n// --graupl-tabs-tab-toggle-border-top-width\n$tabs-tab-toggle-border-top-width: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-tabs-tab-toggle-border-right-width\n$tabs-tab-toggle-border-right-width: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-tabs-tab-toggle-border-bottom-width\n$tabs-tab-toggle-border-bottom-width: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-tabs-tab-toggle-border-left-width\n$tabs-tab-toggle-border-left-width: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-tabs-tab-toggle-border-width\n$tabs-tab-toggle-border-width: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-width,\n #{$tabs-tab-toggle-border-top-width} #{$tabs-tab-toggle-border-right-width}\n #{$tabs-tab-toggle-border-bottom-width}\n #{$tabs-tab-toggle-border-left-width}\n);\n\n// --graupl-tabs-tab-toggle-border-top-style\n$tabs-tab-toggle-border-top-style: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-tabs-tab-toggle-border-right-style\n$tabs-tab-toggle-border-right-style: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-tabs-tab-toggle-border-bottom-style\n$tabs-tab-toggle-border-bottom-style: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-tabs-tab-toggle-border-left-style\n$tabs-tab-toggle-border-left-style: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-tabs-tab-toggle-border-style\n$tabs-tab-toggle-border-style: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-style,\n #{$tabs-tab-toggle-border-top-style} #{$tabs-tab-toggle-border-right-style}\n #{$tabs-tab-toggle-border-bottom-style}\n #{$tabs-tab-toggle-border-left-style}\n);\n\n// Tab content properties.\n// --graupl-tabs-tab-content-padding-x\n$tabs-tab-content-padding-x: var(\n --#{root-defaults.$prefix}tabs-tab-content-padding-x,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-tabs-tab-content-padding-y\n$tabs-tab-content-padding-y: var(\n --#{root-defaults.$prefix}tabs-tab-content-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-tabs-tab-content-padding\n$tabs-tab-content-padding: var(\n --#{root-defaults.$prefix}tabs-tab-content-padding,\n #{$tabs-tab-content-padding-y} #{$tabs-tab-content-padding-x}\n);\n\n// --graupl-tabs-tab-content-background\n$tabs-tab-content-background: var(\n --#{root-defaults.$prefix}tabs-tab-content-background,\n #{$tabs-background}\n);\n\n// --graupl-tabs-tab-content-color\n$tabs-tab-content-color: var(\n --#{root-defaults.$prefix}tabs-tab-content-color,\n #{$tabs-color}\n);\n\n// Tab content border properties.\n// --graupl-tabs-tab-content-border-color\n$tabs-tab-content-border-color: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-color,\n #{$tabs-border-color}\n);\n\n// --graupl-tabs-tab-content-border-top-left-radius\n$tabs-tab-content-border-top-left-radius: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-tabs-tab-content-border-top-right-radius\n$tabs-tab-content-border-top-right-radius: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-tabs-tab-content-border-bottom-left-radius\n$tabs-tab-content-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-tabs-tab-content-border-bottom-right-radius\n$tabs-tab-content-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-tabs-tab-content-border-radius\n$tabs-tab-content-border-radius: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-radius,\n #{$tabs-tab-content-border-top-left-radius}\n #{$tabs-tab-content-border-top-right-radius}\n #{$tabs-tab-content-border-bottom-right-radius}\n #{$tabs-tab-content-border-bottom-left-radius}\n);\n\n// --graupl-tabs-tab-content-border-top-width\n$tabs-tab-content-border-top-width: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-tabs-tab-content-border-right-width\n$tabs-tab-content-border-right-width: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-tabs-tab-content-border-bottom-width\n$tabs-tab-content-border-bottom-width: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-tabs-tab-content-border-left-width\n$tabs-tab-content-border-left-width: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-tabs-tab-content-border-width\n$tabs-tab-content-border-width: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-width,\n #{$tabs-tab-content-border-top-width} #{$tabs-tab-content-border-right-width}\n #{$tabs-tab-content-border-bottom-width}\n #{$tabs-tab-content-border-left-width}\n);\n\n// --graupl-tabs-tab-content-border-top-style\n$tabs-tab-content-border-top-style: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-tabs-tab-content-border-right-style\n$tabs-tab-content-border-right-style: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-tabs-tab-content-border-bottom-style\n$tabs-tab-content-border-bottom-style: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-tabs-tab-content-border-left-style\n$tabs-tab-content-border-left-style: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-tabs-tab-content-border-style\n$tabs-tab-content-border-style: var(\n --#{root-defaults.$prefix}tabs-tab-content-border-style,\n #{$tabs-tab-content-border-top-style} #{$tabs-tab-content-border-right-style}\n #{$tabs-tab-content-border-bottom-style}\n #{$tabs-tab-content-border-left-style}\n);\n\n// Tab content display properties.\n// --graupl-tabs-tab-content-show-display\n$tabs-tab-content-show-display: var(\n --#{root-defaults.$prefix}tabs-tab-content-show-display,\n #{defaults.$tabs-tab-content-show-display}\n);\n\n// --graupl-tabs-tab-content-hide-display\n$tabs-tab-content-hide-display: var(\n --#{root-defaults.$prefix}tabs-tab-content-hide-display,\n #{defaults.$tabs-tab-content-hide-display}\n);\n\n// --graupl-tabs-tab-content-transitioning-display\n$tabs-tab-content-transitioning-display: var(\n --#{root-defaults.$prefix}tabs-tab-content-transitioning-display,\n #{defaults.$tabs-tab-content-transitioning-display}\n);\n\n// --graupl-tabs-tab-content-display\n$tabs-tab-content-display: var(\n --#{root-defaults.$prefix}tabs-tab-content-display,\n #{defaults.$tabs-tab-content-hide-display}\n);\n\n// Tab content opacity properties.\n// --graupl-tabs-tab-content-show-opacity\n$tabs-tab-content-show-opacity: var(\n --#{root-defaults.$prefix}tabs-tab-content-show-opacity,\n #{defaults.$tabs-tab-content-show-opacity}\n);\n\n// --graupl-tabs-tab-content-hide-opacity\n$tabs-tab-content-hide-opacity: var(\n --#{root-defaults.$prefix}tabs-tab-content-hide-opacity,\n #{defaults.$tabs-tab-content-hide-opacity}\n);\n\n// --graupl-tabs-tab-content-transitioning-opacity\n$tabs-tab-content-transitioning-opacity: var(\n --#{root-defaults.$prefix}tabs-tab-content-transitioning-opacity,\n #{defaults.$tabs-tab-content-transitioning-opacity}\n);\n\n// --graupl-tabs-tab-content-opacity\n$tabs-tab-content-opacity: var(\n --#{root-defaults.$prefix}tabs-tab-content-opacity,\n #{$tabs-tab-content-hide-opacity}\n);\n\n// Tab content transition properties.\n// --graupl-tabs-tab-content-transition-duration\n$tabs-tab-content-transition-duration: var(\n --#{root-defaults.$prefix}tabs-tab-content-transition-duration,\n #{map.get(root-variables.$transition-durations, fast)}\n);\n\n// --graupl-tabs-tab-content-transition-timing-function\n$tabs-tab-content-transition-timing-function: var(\n --#{root-defaults.$prefix}tabs-tab-content-transition-timing-function,\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-tabs-tab-content-transition\n$tabs-tab-content-transition: var(\n --#{root-defaults.$prefix}tabs-tab-content-transition,\n opacity #{$tabs-tab-content-transition-duration}\n #{$tabs-tab-content-transition-timing-function}\n);\n\n// --graupl-tabs-tab-content-transition-reduced-motion\n$tabs-tab-content-transition-reduced-motion: var(\n --#{root-defaults.$prefix}tabs-tab-content-transition-reduced-motion,\n opacity #{$tabs-tab-content-transition-duration}\n #{$tabs-tab-content-transition-timing-function}\n);\n\n// Tab toggle background properties.\n// --graupl-tabs-tab-toggle-background\n$tabs-tab-toggle-background: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-background,\n #{$tabs-tab-list-background}\n);\n\n// --graupl-tabs-tab-toggle-visited-background\n$tabs-tab-toggle-visited-background: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-visited-background,\n #{$tabs-tab-toggle-background}\n);\n\n// --graupl-tabs-tab-toggle-focus-background\n$tabs-tab-toggle-focus-background: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-focus-background,\n #{$tabs-tab-toggle-background}\n);\n\n// --graupl-tabs-tab-toggle-hover-background\n$tabs-tab-toggle-hover-background: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-hover-background,\n #{$tabs-tab-list-color}\n);\n\n// --graupl-tabs-tab-toggle-active-background\n$tabs-tab-toggle-active-background: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-active-background,\n #{$tabs-tab-toggle-hover-background}\n);\n\n// --graupl-tabs-tab-toggle-selected-background\n$tabs-tab-toggle-selected-background: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-selected-background,\n #{$tabs-tab-toggle-hover-background}\n);\n\n// --graupl-tabs-tab-toggle-disabled-background\n$tabs-tab-toggle-disabled-background: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-disabled-background,\n #{$tabs-tab-list-background}\n);\n$tabs-tab-toggle-background-states: (\n _default: $tabs-tab-toggle-background,\n visited: $tabs-tab-toggle-visited-background,\n focus: $tabs-tab-toggle-focus-background,\n hover: $tabs-tab-toggle-hover-background,\n active: $tabs-tab-toggle-active-background,\n selected: $tabs-tab-toggle-selected-background,\n disabled: $tabs-tab-toggle-disabled-background,\n);\n\n// Tab toggle text properties.\n// --graupl-tabs-tab-toggle-color\n$tabs-tab-toggle-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-color,\n #{$tabs-tab-list-color}\n);\n\n// --graupl-tabs-tab-toggle-visited-color\n$tabs-tab-toggle-visited-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-visited-color,\n #{$tabs-tab-toggle-color}\n);\n\n// --graupl-tabs-tab-toggle-focus-color\n$tabs-tab-toggle-focus-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-focus-color,\n #{$tabs-tab-toggle-color}\n);\n\n// --graupl-tabs-tab-toggle-hover-color\n$tabs-tab-toggle-hover-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-hover-color,\n #{$tabs-tab-list-background}\n);\n\n// --graupl-tabs-tab-toggle-active-color\n$tabs-tab-toggle-active-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-active-color,\n #{$tabs-tab-toggle-hover-color}\n);\n\n// --graupl-tabs-tab-toggle-selected-color\n$tabs-tab-toggle-selected-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-selected-color,\n #{$tabs-tab-toggle-hover-color}\n);\n\n// --graupl-tabs-tab-toggle-disabled-color\n$tabs-tab-toggle-disabled-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-disabled-color,\n #{theme.get(primary, 200)}\n);\n$tabs-tab-toggle-color-states: (\n _default: $tabs-tab-toggle-color,\n visited: $tabs-tab-toggle-visited-color,\n focus: $tabs-tab-toggle-focus-color,\n hover: $tabs-tab-toggle-hover-color,\n active: $tabs-tab-toggle-active-color,\n selected: $tabs-tab-toggle-selected-color,\n disabled: $tabs-tab-toggle-disabled-color,\n);\n\n// Tab toggle border colour properties.\n// --graupl-tabs-tab-toggle-border-color\n$tabs-tab-toggle-border-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-border-color,\n #{$tabs-tab-list-border-color}\n);\n\n// --graupl-tabs-tab-toggle-visited-border-color\n$tabs-tab-toggle-visited-border-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-visited-border-color,\n #{$tabs-tab-toggle-border-color}\n);\n\n// --graupl-tabs-tab-toggle-focus-border-color\n$tabs-tab-toggle-focus-border-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-focus-border-color,\n #{$tabs-tab-toggle-border-color}\n);\n\n// --graupl-tabs-tab-toggle-hover-border-color\n$tabs-tab-toggle-hover-border-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-hover-border-color,\n #{$tabs-tab-list-border-color}\n);\n\n// --graupl-tabs-tab-toggle-active-border-color\n$tabs-tab-toggle-active-border-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-active-border-color,\n #{$tabs-tab-toggle-hover-border-color}\n);\n\n// --graupl-tabs-tab-toggle-selected-border-color\n$tabs-tab-toggle-selected-border-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-selected-border-color,\n #{$tabs-tab-toggle-hover-border-color}\n);\n\n// --graupl-tabs-tab-toggle-disabled-border-color\n$tabs-tab-toggle-disabled-border-color: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-disabled-border-color,\n #{theme.get(primary, 200)}\n);\n$tabs-tab-toggle-border-color-states: (\n _default: $tabs-tab-toggle-border-color,\n visited: $tabs-tab-toggle-visited-border-color,\n focus: $tabs-tab-toggle-focus-border-color,\n hover: $tabs-tab-toggle-hover-border-color,\n active: $tabs-tab-toggle-active-border-color,\n selected: $tabs-tab-toggle-selected-border-color,\n disabled: $tabs-tab-toggle-disabled-border-color,\n);\n\n// Tab toggle transform properties.\n// --graupl-tabs-tab-toggle-transform\n$tabs-tab-toggle-transform: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-transform,\n #{defaults.$tabs-tab-toggle-initial-transform}\n);\n\n// --graupl-tabs-tab-toggle-visited-transform\n$tabs-tab-toggle-visited-transform: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-visited-transform,\n #{$tabs-tab-toggle-transform}\n);\n\n// --graupl-tabs-tab-toggle-focus-transform\n$tabs-tab-toggle-focus-transform: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-focus-transform,\n #{$tabs-tab-toggle-transform}\n);\n\n// --graupl-tabs-tab-toggle-hover-transform\n$tabs-tab-toggle-hover-transform: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-hover-transform,\n #{$tabs-tab-toggle-transform}\n);\n\n// --graupl-tabs-tab-toggle-active-transform\n$tabs-tab-toggle-active-transform: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-active-transform,\n #{defaults.$tabs-tab-toggle-final-transform}\n);\n\n// --graupl-tabs-tab-toggle-selected-transform\n$tabs-tab-toggle-selected-transform: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-selected-transform,\n #{defaults.$tabs-tab-toggle-final-transform}\n);\n\n// --graupl-tabs-tab-toggle-disabled-transform\n$tabs-tab-toggle-disabled-transform: var(\n --#{root-defaults.$prefix}tabs-tab-toggle-disabled-transform,\n #{defaults.$tabs-tab-toggle-disabled-transform}\n);\n$tabs-tab-toggle-transform-states: (\n _default: $tabs-tab-toggle-transform,\n visited: $tabs-tab-toggle-visited-transform,\n focus: $tabs-tab-toggle-focus-transform,\n hover: $tabs-tab-toggle-hover-transform,\n active: $tabs-tab-toggle-active-transform,\n selected: $tabs-tab-toggle-selected-transform,\n disabled: $tabs-tab-toggle-disabled-transform,\n);\n\n// Tab list properties.\n// --graupl-tabs-tab-list-padding-x\n$tabs-tab-list-padding-x: var(\n --#{root-defaults.$prefix}tabs-tab-list-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-tabs-tab-list-padding-y\n$tabs-tab-list-padding-y: var(\n --#{root-defaults.$prefix}tabs-tab-list-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-tabs-tab-list-padding\n$tabs-tab-list-padding: var(\n --#{root-defaults.$prefix}tabs-tab-list-padding,\n #{$tabs-tab-list-padding-y} #{$tabs-tab-list-padding-x}\n);\n/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */\n// --graupl-tabs-tab-list-margin\n$tabs-tab-list-margin: var(\n --#{root-defaults.$prefix}tabs-tab-list-margin,\n 0 0\n calc(\n -1 *\n max(\n #{$tabs-tab-list-border-bottom-width},\n #{$tabs-tab-toggle-border-bottom-width}\n )\n )\n 0\n);\n/* stylelint-enable scss/operator-no-newline-after */\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 tabs base styles.\n//\n// This module provides the base styles for the tabs component.\n//\n// The following selectors are generated by default:\n// - `.tabs`: The tabs component.\n// - `.tab-list`: The list of tabs in the tabs component.\n// - `.tab-toggle`: The individual tab toggle component.\n// - `.tab-content`: The individual tab content component.\n// - `.primary`: A component modifier to use the primary colour for the tabs component.\n// - `.secondary`: A component modifier to use the secondary colour for the tabs component.\n// - `.tertiary`: A component modifier to use the tertiary colour for the tabs component.\n//\n// The following custom properties can be used to customize the tabs component:\n// | Property | Description | Default Value |\n// | --- | --- | --- |\n// | `--graupl-tabs-padding-x` | The horizontal padding of the tabs component. | `var(--graupl-spacer-0)` |\n// | `--graupl-tabs-padding-y` | The vertical padding of the tabs component. | `var(--graupl-spacer-0)` |\n// | `--graupl-tabs-padding` | The padding of the tabs component (combines y and x padding). | `var(--graupl-tabs-padding-y) var(--graupl-tabs-padding-x)` |\n// | `--graupl-tabs-color` | The text colour of the tabs component. | `var(--graupl-color)` |\n// | `--graupl-tabs-background` | The background colour of the tabs component. | `var(--graupl-background)` |\n// | `--graupl-tabs-border-color` | The border colour of the tabs component. | `var(--graupl-tabs-color)` |\n// | `--graupl-tabs-border-top-left-radius` | The top left border radius of the tabs component. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-tabs-border-top-right-radius` | The top right border radius of the tabs component. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-tabs-border-bottom-right-radius` | The bottom right border radius of the tabs component. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-tabs-border-bottom-left-radius` | The bottom left border radius of the tabs component. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-tabs-border-radius` | The border radius of the tabs component (combines top-left, top-right, bottom-right, and bottom-left). | `var(--graupl-tabs-border-top-left-radius) var(--graupl-tabs-border-top-right-radius) var(--graupl-tabs-border-bottom-right-radius) var(--graupl-tabs-border-bottom-left-radius)` |\n// | `--graupl-tabs-border-top-width` | The top border width of the tabs component. | `0rem` |\n// | `--graupl-tabs-border-right-width` | The right border width of the tabs component. | `0rem` |\n// | `--graupl-tabs-border-bottom-width` | The bottom border width of the tabs component. | `0rem` |\n// | `--graupl-tabs-border-left-width` | The left border width of the tabs component. | `0rem` |\n// | `--graupl-tabs-border-width` | The border width of the tabs component (combines top, right, bottom, and left widths). | `var(--graupl-tabs-border-top-width) var(--graupl-tabs-border-right-width) var(--graupl-tabs-border-bottom-width) var(--graupl-tabs-border-left-width)` |\n// | `--graupl-tabs-border-top-style` | The top border style of the tabs component. | `var(--graupl-border-top-style)` |\n// | `--graupl-tabs-border-right-style` | The right border style of the tabs component. | `var(--graupl-border-right-style)` |\n// | `--graupl-tabs-border-bottom-style` | The bottom border style of the tabs component. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-tabs-border-left-style` | The left border style of the tabs component. | `var(--graupl-border-left-style)` |\n// | `--graupl-tabs-border-style` | The border style of the tabs component (combines top, right, bottom, and left styles). | `var(--graupl-tabs-border-top-style) var(--graupl-tabs-border-right-style) var(--graupl-tabs-border-bottom-style) var(--graupl-tabs-border-left-style)` |\n// | `--graupl-tabs-tab-list-column-gap` | The column gap between tab toggles. | `var(--graupl-spacer-0)` |\n// | `--graupl-tabs-tab-list-row-gap` | The row gap between tab toggles. | `var(--graupl-spacer-2)` |\n// | `--graupl-tabs-tab-list-gap` | The gap between tab toggles (combines column and row gaps). | `var(--graupl-tabs-tab-list-column-gap) var(--graupl-tabs-tab-list-row-gap)` |\n// | `--graupl-tabs-tab-list-background` | The background colour of the tab list component. | `var(--graupl-tabs-background)` |\n// | `--graupl-tabs-tab-list-color` | The text colour of the tab list component. | `var(--graupl-tabs-color)` |\n// | `--graupl-tabs-tab-list-border-color` | The border colour of the tab list component. | `var(--graupl-tabs-border-color)` |\n// | `--graupl-tabs-tab-list-border-top-left-radius` | The top left border radius of the tab list component. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-tabs-tab-list-border-top-right-radius` | The top right border radius of the tab list component. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-tabs-tab-list-border-bottom-right-radius` | The bottom right border radius of the tab list component. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-tabs-tab-list-border-bottom-left-radius` | The bottom left border radius of the tab list component. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-tabs-tab-list-border-radius` | The border radius of the tab list component. | `var(--graupl-tabs-tab-list-border-top-left-radius) var(--graupl-tabs-tab-list-border-top-right-radius) var(--graupl-tabs-tab-list-border-bottom-right-radius) var(--graupl-tabs-tab-list-border-bottom-left-radius)` |\n// | `--graupl-tabs-tab-list-border-top-width` | The top border width of the tab list component. | `0rem` |\n// | `--graupl-tabs-tab-list-border-right-width` | The right border width of the tab list component. | `0rem` |\n// | `--graupl-tabs-tab-list-border-bottom-width` | The bottom border width of the tab list component. | `0rem` |\n// | `--graupl-tabs-tab-list-border-left-width` | The left border width of the tab list component. | `0rem` |\n// | `--graupl-tabs-tab-list-border-width` | The border width of the tab list component (combines top, right, bottom, and left widths). | `var(--graupl-tabs-tab-list-border-top-width) var(--graupl-tabs-tab-list-border-right-width) var(--graupl-tabs-tab-list-border-bottom-width) var(--graupl-tabs-tab-list-border-left-width)` |\n// | `--graupl-tabs-tab-list-border-top-style` | The top border style of the tab list component. | `var(--graupl-border-top-style)` |\n// | `--graupl-tabs-tab-list-border-right-style` | The right border style of the tab list component. | `var(--graupl-border-right-style)` |\n// | `--graupl-tabs-tab-list-border-bottom-style` | The bottom border style of the tab list component. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-tabs-tab-list-border-left-style` | The left border style of the tab list component. | `var(--graupl-border-left-style)` |\n// | `--graupl-tabs-tab-list-border-style` | The border style of the tab list component (combines top, right, bottom, and left styles). | `var(--graupl-tabs-tab-list-border-top-style) var(--graupl-tabs-tab-list-border-right-style) var(--graupl-tabs-tab-list-border-bottom-style) var(--graupl-tabs-tab-list-border-left-style)` |\n// | `--graupl-tabs-tab-list-padding-x` | The horizontal padding of the tab list component. | `var(--graupl-spacer-0)` |\n// | `--graupl-tabs-tab-list-padding-y` | The vertical padding of the tab list component. | `var(--graupl-spacer-0)` |\n// | `--graupl-tabs-tab-list-padding` | The padding of the tab list component (combines y and x padding). | `var(--graupl-tabs-tab-list-padding-y) var(--graupl-tabs-tab-list-padding-x)` |\n// | `--graupl-tabs-tab-list-margin` | The margin of the tab list component. | `0 0 calc(-1 * max(var(--graupl-tabs-tab-list-border-bottom-width), var(--graupl-tabs-tab-toggle-border-bottom-width))) 0` |\n// | `--graupl-tabs-tab-toggle-padding-x` | The horizontal padding of the tab toggle component. | `var(--graupl-spacer-5)` |\n// | `--graupl-tabs-tab-toggle-padding-y` | The vertical padding of the tab toggle component. | `var(--graupl-spacer-3)` |\n// | `--graupl-tabs-tab-toggle-padding` | The padding of the tab toggle component (combines y and x padding). | `var(--graupl-tabs-tab-toggle-padding-y) var(--graupl-tabs-tab-toggle-padding-x)` |\n// | `--graupl-tabs-tab-toggle-border-top-left-radius` | The top left border radius of the tab toggle component. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-tabs-tab-toggle-border-top-right-radius` | The top right border radius of the tab toggle component. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-tabs-tab-toggle-border-bottom-right-radius` | The bottom right border radius of the tab toggle component. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-tabs-tab-toggle-border-bottom-left-radius` | The bottom left border radius of the tab toggle component. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-tabs-tab-toggle-border-radius` | The border radius of the tab toggle component. | `var(--graupl-tabs-tab-toggle-border-top-left-radius) var(--graupl-tabs-tab-toggle-border-top-right-radius) var(--graupl-tabs-tab-toggle-border-bottom-right-radius) var(--graupl-tabs-tab-toggle-border-bottom-left-radius)` |\n// | `--graupl-tabs-tab-toggle-border-top-width` | The top border width of the tab toggle component. | `var(--graupl-border-top-width)` |\n// | `--graupl-tabs-tab-toggle-border-right-width` | The right border width of the tab toggle component. | `var(--graupl-border-right-width)` |\n// | `--graupl-tabs-tab-toggle-border-bottom-width` | The bottom border width of the tab toggle component. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-tabs-tab-toggle-border-left-width` | The left border width of the tab toggle component. | `var(--graupl-border-left-width)` |\n// | `--graupl-tabs-tab-toggle-border-width` | The border width of the tab toggle component (combines top, right, bottom, and left widths). | `var(--graupl-tabs-tab-toggle-border-top-width) var(--graupl-tabs-tab-toggle-border-right-width) var(--graupl-tabs-tab-toggle-border-bottom-width) var(--graupl-tabs-tab-toggle-border-left-width)` |\n// | `--graupl-tabs-tab-toggle-border-top-style` | The top border style of the tab toggle component. | `var(--graupl-border-top-style)` |\n// | `--graupl-tabs-tab-toggle-border-right-style` | The right border style of the tab toggle component. | `var(--graupl-border-right-style)` |\n// | `--graupl-tabs-tab-toggle-border-bottom-style` | The bottom border style of the tab toggle component. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-tabs-tab-toggle-border-left-style` | The left border style of the tab toggle component. | `var(--graupl-border-left-style)` |\n// | `--graupl-tabs-tab-toggle-border-style` | The border style of the tab toggle component (combines top, right, bottom, and left styles). | `var(--graupl-tabs-tab-toggle-border-top-style) var(--graupl-tabs-tab-toggle-border-right-style) var(--graupl-tabs-tab-toggle-border-bottom-style) var(--graupl-tabs-tab-toggle-border-left-style)` |\n// | `--graupl-tabs-tab-toggle-background` | The background colour of the tab toggle component. | `var(--graupl-tabs-tab-list-background)` |\n// | `--graupl-tabs-tab-toggle-visited-background` | The background colour of a visited tab toggle component. | `var(--graupl-tabs-tab-toggle-background)` |\n// | `--graupl-tabs-tab-toggle-focus-background` | The background colour of a focused tab toggle component. | `var(--graupl-tabs-tab-toggle-background)` |\n// | `--graupl-tabs-tab-toggle-hover-background` | The background colour of a hovered tab toggle component. | `var(--graupl-tabs-tab-list-color)` |\n// | `--graupl-tabs-tab-toggle-active-background` | The background colour of an active tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-background)` |\n// | `--graupl-tabs-tab-toggle-selected-background` | The background colour of a selected tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-background)` |\n// | `--graupl-tabs-tab-toggle-disabled-background` | The background colour of a disabled tab toggle component. | `var(--graupl-tabs-tab-list-background)` |\n// | `--graupl-tabs-tab-toggle-color` | The text colour of the tab toggle component. | `var(--graupl-tabs-tab-list-color)` |\n// | `--graupl-tabs-tab-toggle-visited-color` | The text colour of a visited tab toggle component. | `var(--graupl-tabs-tab-toggle-color)` |\n// | `--graupl-tabs-tab-toggle-focus-color` | The text colour of a focused tab toggle component. | `var(--graupl-tabs-tab-toggle-color)` |\n// | `--graupl-tabs-tab-toggle-hover-color` | The text colour of a hovered tab toggle component. | `var(--graupl-tabs-tab-list-background)` |\n// | `--graupl-tabs-tab-toggle-active-color` | The text colour of an active tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-color)` |\n// | `--graupl-tabs-tab-toggle-selected-color` | The text colour of a selected tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-color)` |\n// | `--graupl-tabs-tab-toggle-disabled-color` | The text colour of a disabled tab toggle component. | `var(--graupl-theme-active--primary--200)` |\n// | `--graupl-tabs-tab-toggle-border-color` | The border colour of the tab toggle component. | `var(--graupl-tabs-tab-list-border-color)` |\n// | `--graupl-tabs-tab-toggle-visited-border-color` | The border colour of a visited tab toggle component. | `var(--graupl-tabs-tab-toggle-border-color)` |\n// | `--graupl-tabs-tab-toggle-focus-border-color` | The border colour of a focused tab toggle component. | `var(--graupl-tabs-tab-toggle-border-color)` |\n// | `--graupl-tabs-tab-toggle-hover-border-color` | The border colour of a hovered tab toggle component. | `var(--graupl-tabs-tab-list-border-color)` |\n// | `--graupl-tabs-tab-toggle-active-border-color` | The border colour of an active tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-border-color)` |\n// | `--graupl-tabs-tab-toggle-selected-border-color` | The border colour of a selected tab toggle component. | `var(--graupl-tabs-tab-toggle-hover-border-color)` |\n// | `--graupl-tabs-tab-toggle-disabled-border-color` | The border colour of a disabled tab toggle component. | `var(--graupl-theme-active--primary--200)` |\n// | `--graupl-tabs-tab-toggle-transform` | The transform applied to the tab toggle component. | `none` |\n// | `--graupl-tabs-tab-toggle-visited-transform` | The transform applied to a visited tab toggle component. | `var(--graupl-tabs-tab-toggle-transform)` |\n// | `--graupl-tabs-tab-toggle-focus-transform` | The transform applied to a focused tab toggle component. | `var(--graupl-tabs-tab-toggle-transform)` |\n// | `--graupl-tabs-tab-toggle-hover-transform` | The transform applied to a hovered tab toggle component. | `var(--graupl-tabs-tab-toggle-transform)` |\n// | `--graupl-tabs-tab-toggle-active-transform` | The transform applied to an active tab toggle component. | `none` |\n// | `--graupl-tabs-tab-toggle-selected-transform` | The transform applied to a selected tab toggle component. | `none` |\n// | `--graupl-tabs-tab-toggle-disabled-transform` | The transform applied to a disabled tab toggle component. | `none` |\n// | `--graupl-tabs-tab-content-padding-x` | The horizontal padding of the tab content component. | `var(--graupl-spacer-3)` |\n// | `--graupl-tabs-tab-content-padding-y` | The vertical padding of the tab content component. | `var(--graupl-spacer-3)` |\n// | `--graupl-tabs-tab-content-padding` | The padding of the tab content component (combines y and x padding). | `var(--graupl-tabs-tab-content-padding-y) var(--graupl-tabs-tab-content-padding-x)` |\n// | `--graupl-tabs-tab-content-background` | The background colour of the tab content component. | `var(--graupl-tabs-background)` |\n// | `--graupl-tabs-tab-content-color` | The text colour of the tab content component. | `var(--graupl-tabs-color)` |\n// | `--graupl-tabs-tab-content-border-color` | The border colour of the tab content component. | `var(--graupl-tabs-border-color)` |\n// | `--graupl-tabs-tab-content-border-top-left-radius` | The top left border radius of the tab content component. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-tabs-tab-content-border-top-right-radius` | The top right border radius of the tab content component. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-tabs-tab-content-border-bottom-right-radius` | The bottom right border radius of the tab content component. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-tabs-tab-content-border-bottom-left-radius` | The bottom left border radius of the tab content component. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-tabs-tab-content-border-radius` | The border radius of the tab content component. | `var(--graupl-tabs-tab-content-border-top-left-radius) var(--graupl-tabs-tab-content-border-top-right-radius) var(--graupl-tabs-tab-content-border-bottom-right-radius) var(--graupl-tabs-tab-content-border-bottom-left-radius)` |\n// | `--graupl-tabs-tab-content-border-top-width` | The top border width of the tab content component. | `var(--graupl-border-top-width)` |\n// | `--graupl-tabs-tab-content-border-right-width` | The right border width of the tab content component. | `var(--graupl-border-right-width)` |\n// | `--graupl-tabs-tab-content-border-bottom-width` | The bottom border width of the tab content component. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-tabs-tab-content-border-left-width` | The left border width of the tab content component. | `var(--graupl-border-left-width)` |\n// | `--graupl-tabs-tab-content-border-width` | The border width of the tab content component (combines top, right, bottom, and left widths). | `var(--graupl-tabs-tab-content-border-top-width) var(--graupl-tabs-tab-content-border-right-width) var(--graupl-tabs-tab-content-border-bottom-width) var(--graupl-tabs-tab-content-border-left-width)` |\n// | `--graupl-tabs-tab-content-border-top-style` | The top border style of the tab content component. | `var(--graupl-border-top-style)` |\n// | `--graupl-tabs-tab-content-border-right-style` | The right border style of the tab content component. | `var(--graupl-border-right-style)` |\n// | `--graupl-tabs-tab-content-border-bottom-style` | The bottom border style of the tab content component. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-tabs-tab-content-border-left-style` | The left border style of the tab content component. | `var(--graupl-border-left-style)` |\n// | `--graupl-tabs-tab-content-border-style` | The border style of the tab content component (combines top, right, bottom, and left styles). | `var(--graupl-tabs-tab-content-border-top-style) var(--graupl-tabs-tab-content-border-right-style) var(--graupl-tabs-tab-content-border-bottom-style) var(--graupl-tabs-tab-content-border-left-style)` |\n// | `--graupl-tabs-tab-content-show-display` | The display value for tab content when shown. | `block` |\n// | `--graupl-tabs-tab-content-hide-display` | The display value for tab content when hidden. | `none` |\n// | `--graupl-tabs-tab-content-transitioning-display` | The display value for tab content while transitioning. | `var(--graupl-tabs-tab-content-show-display)` |\n// | `--graupl-tabs-tab-content-display` | The display value for tab content. | `var(--graupl-tabs-tab-content-hide-display)` |\n// | `--graupl-tabs-tab-content-show-opacity` | The opacity value for tab content when shown. | `1` |\n// | `--graupl-tabs-tab-content-hide-opacity` | The opacity value for tab content when hidden. | `0` |\n// | `--graupl-tabs-tab-content-transitioning-opacity` | The opacity value for tab content while transitioning. | `var(--graupl-tabs-tab-content-hide-opacity)` |\n// | `--graupl-tabs-tab-content-opacity` | The opacity value for tab content. | `var(--graupl-tabs-tab-content-hide-opacity)` |\n// | `--graupl-tabs-tab-content-transition-duration` | The transition duration for tab content. | `var(--graupl-transition-duration-fast)` |\n// | `--graupl-tabs-tab-content-transition-timing-function` | The transition timing function for tab content. | `var(--graupl-transition-timing-function)` |\n// | `--graupl-tabs-tab-content-transition` | The transition for tab content changes. | `opacity var(--graupl-tabs-tab-content-transition-duration) var(--graupl-tabs-tab-content-transition-timing-function)` |\n// | `--graupl-tabs-tab-content-transition-reduced-motion` | The transition for tab content changes when reduced motion is enabled. | `opacity var(--graupl-tabs-tab-content-transition-duration) var(--graupl-tabs-tab-content-transition-timing-function)` |\n//\n// The following sass variables can be used to customize the generation of the tabs component:\n// | Variable | Description | Default Value |\n// | --- | --- | --- |\n// | `$selector-base` | The selector base for the component. | `.` |\n// | `$modifier-selector-base` | The selector base for component modifiers. | `.` |\n// | `$generate-base-theme-map` | A flag to generate the base theme maps for tabs variants. | `true` |\n// | `$themeable` | A flag that determines whether theme modifiers are generated. | `false` |\n// | `$tabs-selector-base` | The selector base for the tabs component. | `$selector-base` |\n// | `$tabs-selector` | The tabs component selector. | `\"tabs\"` |\n// | `$tabs-tab-list-selector-base` | The selector base for the tabs list component. | `$selector-base` |\n// | `$tabs-tab-list-selector` | The tab list component selector. | `\"tab-list\"` |\n// | `$tabs-tab-toggle-selector-base` | The selector base for the individual tab toggle component. | `$selector-base` |\n// | `$tabs-tab-toggle-selector` | The individual tab toggle component selector. | `\"tab-toggle\"` |\n// | `$tabs-tab-content-selector-base` | The selector base for the individual tab content component. | `$selector-base` |\n// | `$tabs-tab-content-selector` | The individual tab content component selector. | `\"tab-content\"` |\n// | `$tabs-theme-selector-base` | The selector base for the tabs theme component modifiers. | `$modifier-selector-base` |\n// | `$tabs-theme-selector-prefix` | The tabs theme component modifier selector prefix. | `\"\"` |\n// | `$tabs-tab-content-open-selector-base` | The selector base applied to the open modifier. | `$modifier-selector-base` |\n// | `$tabs-tab-content-open-selector` | The selector applied to the open modifier. | `\"show\"` |\n// | `$tabs-tab-content-closed-selector-base` | The selector base applied to the closed modifier. | `$modifier-selector-base` |\n// | `$tabs-tab-content-closed-selector` | The selector applied to the closed modifier. | `\"hide\"` |\n// | `$tabs-tab-content-transitioning-selector-base` | The selector base applied to the transitioning modifier. | `$modifier-selector-base` |\n// | `$tabs-tab-content-transitioning-selector` | The selector applied to the transitioning modifier. | `\"transitioning\"` |\n// | `$tabs-tab-content-show-display` | The default display value for open tab contents. | `block` |\n// | `$tabs-tab-content-hide-display` | The default display value for closed tab contents. | `none` |\n// | `$tabs-tab-content-transitioning-display` | The default display value for transitioning tab contents. | `$tabs-tab-content-show-display` |\n// | `$tabs-tab-content-show-opacity` | The default opacity value for open tab contents. | `1` |\n// | `$tabs-tab-content-hide-opacity` | The default opacity value for closed tab contents. | `0` |\n// | `$tabs-tab-content-transitioning-opacity` | The default opacity value for transitioning tab contents. | `$tabs-tab-content-hide-opacity` |\n// | `$tabs-tab-toggle-initial-transform` | The initial transform of the tab toggle component. | `none` |\n// | `$tabs-tab-toggle-final-transform` | The final transform of the tab toggle component. | `none` |\n// | `$tabs-tab-toggle-disabled-transform` | The disabled transform of the tab toggle component. | `$tabs-tab-toggle-initial-transform` |\n// | `$tabs-theme-mappings` | A map of properties and color shades used generate all tabs variants. | `()` |\n// | `$tabs-theme-map` | A map of all properties, colors, and color shades used to generate all tabs variants. | `()` |\n//\n// The following javascript options can be used to customize the generation of the tabs component.\n// | Variable | Description | Default Value |\n// | --- | --- | --- |\n// | `context` | The element that scopes the selector when locating tabs. | `document` |\n// | `selector` | The selector used to find tabs in the DOM. | `.tabs` |\n// | `options` | An object of options passed through to the `Tabs` constructor (see below). | `{}` |\n// | `options.tabListSelector` | The selector for the tab list element. | `.tab-list` |\n// | `options.tabToggleSelector` | The selector for tab toggle elements. | `.tab-toggle` |\n// | `options.tabContentSelector` | The selector for tab content elements. | `.tab-content` |\n// | `options.openClass` | The class(es) applied when a tab is open. | `show` |\n// | `options.closeClass` | The class(es) applied when a tab is closed. | `hide` |\n// | `options.transitionClass` | The class(es) applied while a tab is transitioning. | `null` |\n// | `options.transitionDuration` | Duration (ms) for transitions between open/closed states. | `300` |\n// | `options.openDuration` | Duration (ms) for closed → open; `-1` uses `transitionDuration`. | `-1` |\n// | `options.closeDuration` | Duration (ms) for open → closed; `-1` uses `transitionDuration`. | `-1` |\n// | `options.automaticActivation` | When `true`, focusing a tab toggle also activates it. | `false` |\n// | `options.prefix` | Prefix for generated CSS custom properties. | `graupl-` |\n// | `options.key` | Key used when generating IDs; `null` auto-generates a random key. | `null` |\n// | `options.initializeClass` | The class applied while the tabs are initializing. | `initializing` |\n// | `options.initialize` | When `true`, initializes the tabs immediately on creation. | `false` |\n//\n// ## Using `$tabs-theme-mappings`\n//\n// `$tabs-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $tabs-theme-mappings: (\n// border-color: 700,\n// )\n// ```\n//\n// This directly[1] maps to all tabs variants, telling them what shade to use for said property.\n// All tabs variants will use the following based on the example above:\n// - Primary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize _all_ tabs variants in the same way.\n//\n// For example, if you use the following map:\n// ```scss\n// $tabs-theme-mappings: (\n// border-color: 500,\n// )\n// ```\n//\n// All tabs variants will use the following:\n// - Primary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--primary--500`,\n// - Secondary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$tabs-theme-mappings` gets parsed into a larger, more explicit map: `$tabs-theme-map`.\n//\n// Using `$tabs-theme-map`\n//\n// `$tabs-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ```scss\n// $tabs-theme-map: (\n// primary: (\n// border-color: (\n// color: primary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// border-color: (\n// color: tertiary,\n// shade: 700\n// ),\n// ),\n// )\n// ```\n//\n// This directly maps to all tabs variants, telling them what shade to use for said property.\n// The tabs variants will use the following based on the example above:\n// - Primary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize tabs variants individually.\n//\n// For example, if you use the following map:\n//\n// ```scss\n// $tabs-theme-map: (\n// primary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// )\n// ```\n//\n// The tabs variants will use the following:\n// - Primary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--700`,\n// - Secondary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary tabs will have their `--graupl-tabs-border-color` property set to `--graupl-theme-active--secondary--700`.\n//\n// ## Customizing the javascript generation.\n//\n// The generator is a wrapper script around @drupal/once and the Tabs contructor class.\n//\n// You can pass options to the generator using a custom data attributes: `data-graupl-tabs-options` which much be a stringified object.\n// Any option available to the component, can be passed through this object, as an example:\n//\n// ```html\n// <div class=\"tabs\" data-graupl-tabs-options=\"{'initialize': false }\">\n// ```\n// Will ensure the the tabs element does not initialize itself automatically.\n//\n// @example\n// <div class=\"tabs\">\n// <div class=\"tab-list\">\n// <button class=\"tab-toggle\">Tab 1</button>\n// <button class=\"tab-toggle\">Tab 2</button>\n// <button class=\"tab-toggle\">Tab 3</button>\n// </div>\n// <div class=\"tab-content\">\n// // Your tab content.\n// </div>\n// <div class=\"tab-content\">\n// // Your tab content.\n// </div>\n// <div class=\"tab-content\">\n// // Your tab content.\n// </div>\n// </div>\n//\n// @example\n// <div class=\"tabs\" data-graupl-tabs-options=\"{'automaticActivation': true }\">\n// <div class=\"tab-list\">\n// <button class=\"tab-toggle\">Tab 1</button>\n// <button class=\"tab-toggle\">Tab 2</button>\n// <button class=\"tab-toggle\">Tab 3</button>\n// </div>\n// <div class=\"tab-content\">\n// // Your tab content.\n// </div>\n// <div class=\"tab-content\">\n// // Your tab content.\n// </div>\n// <div class=\"tab-content\">\n// // Your tab content.\n// </div>\n// </div>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/theme\";\n@use \"../../mixins/state\";\n@use \"../../mixins/animation\";\n@use \"../../mixins/layer\" as *;\n@use \"../../base/button/mixins\" as button-mixins;\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(component) {\n // .tabs\n #{defaults.$tabs-selector-base}#{defaults.$tabs-selector} {\n display: grid;\n grid-template-columns: [list-start content-start] 1fr [content-end list-end];\n grid-template-rows: [list-start] auto [content-start list-end] 1fr [content-end];\n padding: $tabs-padding;\n border-width: $tabs-border-width;\n border-style: $tabs-border-style;\n border-radius: $tabs-border-radius;\n isolation: isolate;\n }\n\n // .tab-list\n #{defaults.$tabs-tab-list-selector-base}#{defaults.$tabs-tab-list-selector} {\n display: flex;\n grid-area: list;\n flex-wrap: wrap;\n margin: $tabs-tab-list-margin;\n padding: $tabs-tab-list-padding;\n border-width: $tabs-tab-list-border-width;\n border-style: $tabs-tab-list-border-style;\n border-radius: $tabs-tab-list-border-radius;\n gap: $tabs-tab-list-gap;\n }\n\n // .tab-toggle\n #{defaults.$tabs-tab-toggle-selector-base}#{defaults.$tabs-tab-toggle-selector} {\n @include button-mixins.apply-base;\n\n z-index: 2;\n flex: 1 1 auto;\n padding: $tabs-tab-toggle-padding;\n border-width: $tabs-tab-toggle-border-width;\n border-style: $tabs-tab-toggle-border-style;\n border-radius: $tabs-tab-toggle-border-radius;\n\n @include state.generate-modifiers(\n (\n transform: $tabs-tab-toggle-transform-states,\n )\n );\n }\n\n // .tab-content\n #{defaults.$tabs-tab-content-selector-base}#{defaults.$tabs-tab-content-selector} {\n display: $tabs-tab-content-display;\n z-index: 1;\n grid-area: content;\n padding: $tabs-tab-content-padding;\n transition: $tabs-tab-content-transition;\n border-width: $tabs-tab-content-border-width;\n border-style: $tabs-tab-content-border-style;\n border-radius: $tabs-tab-content-border-radius;\n opacity: $tabs-tab-content-opacity;\n\n // &.hide\n &#{defaults.$tabs-tab-content-closed-selector-base}#{defaults.$tabs-tab-content-closed-selector} {\n --#{root-defaults.$prefix}tabs-tab-content-display: #{$tabs-tab-content-hide-display};\n --#{root-defaults.$prefix}tabs-tab-content-opacity: #{$tabs-tab-content-hide-opacity};\n }\n\n // &.transitioning\n &#{defaults.$tabs-tab-content-transitioning-selector-base}#{defaults.$tabs-tab-content-transitioning-selector} {\n --#{root-defaults.$prefix}tabs-tab-content-display: #{$tabs-tab-content-transitioning-display};\n --#{root-defaults.$prefix}tabs-tab-content-opacity: #{$tabs-tab-content-transitioning-opacity};\n }\n\n // &.show\n &#{defaults.$tabs-tab-content-open-selector-base}#{defaults.$tabs-tab-content-open-selector} {\n --#{root-defaults.$prefix}tabs-tab-content-display: #{$tabs-tab-content-show-display};\n --#{root-defaults.$prefix}tabs-tab-content-opacity: #{$tabs-tab-content-show-opacity};\n }\n }\n\n @include animation.off {\n #{defaults.$tabs-tab-content-selector-base}#{defaults.$tabs-tab-content-selector} {\n --#{root-defaults.$prefix}tabs-tab-content-transition: #{$tabs-tab-content-transition-reduced-motion};\n }\n }\n}\n\n@include layer(theme) {\n // .tabs\n #{defaults.$tabs-selector-base}#{defaults.$tabs-selector} {\n border-color: $tabs-border-color;\n background: $tabs-background;\n color: $tabs-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @each $color, $map in defaults.$tabs-theme-map {\n @include theme.generate-modifiers(\n defaults.$tabs-theme-map,\n defaults.$tabs-theme-selector-base,\n defaults.$tabs-theme-selector-prefix,\n \"tabs-\"\n );\n }\n\n @each $color, $map in defaults.$tabs-theme-map {\n @include theme.generate-modifiers(\n defaults.$tabs-theme-map,\n defaults.$tabs-theme-selector-base,\n defaults.$tabs-theme-selector-prefix,\n \"tabs-\",\n \"\"\n );\n }\n }\n }\n\n // .tab-list\n #{defaults.$tabs-tab-list-selector-base}#{defaults.$tabs-tab-list-selector} {\n border-color: $tabs-tab-list-border-color;\n background: $tabs-tab-list-background;\n color: $tabs-tab-list-color;\n }\n\n // .tab-toggle\n #{defaults.$tabs-tab-toggle-selector-base}#{defaults.$tabs-tab-toggle-selector} {\n @include button-mixins.apply-theme;\n\n border-color: $tabs-tab-toggle-border-color;\n background: $tabs-tab-toggle-background;\n color: $tabs-tab-toggle-color;\n\n @include state.generate-modifiers(\n (\n border-color: $tabs-tab-toggle-border-color-states,\n background: $tabs-tab-toggle-background-states,\n color: $tabs-tab-toggle-color-states,\n )\n );\n }\n\n // .tab-content\n #{defaults.$tabs-tab-content-selector-base}#{defaults.$tabs-tab-content-selector} {\n border-color: $tabs-tab-content-border-color;\n background: $tabs-tab-content-background;\n color: $tabs-tab-content-color;\n }\n}\n","// @graupl/core button base styles.\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/animation\";\n@use \"../../mixins/state\";\n@use \"../../mixins/theme\";\n@use \"sass:map\";\n\n/// Mixin to apply base styles for buttons.\n@mixin apply-base() {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: $button-min-width;\n min-height: $button-min-height;\n padding: $button-padding;\n transform: $button-transform;\n transition: $button-transition;\n border-width: $button-border-width;\n border-style: $button-border-style;\n border-radius: $button-border-radius;\n font-size: $button-font-size;\n cursor: pointer;\n\n @include state.generate-modifiers(\n (\n transform: $button-transform-states,\n )\n );\n\n @each $selector in map.get(root-defaults.$state-selectors, \"disabled\") {\n &#{$selector} {\n cursor: not-allowed;\n }\n }\n\n @include animation.off {\n --#{root-defaults.$prefix}button-transition: #{$button-transition-reduced-motion};\n }\n}\n\n/// Mixin to apply theme styles for buttons.\n@mixin apply-theme() {\n border-color: $button-border-color;\n background: $button-background;\n color: $button-color;\n\n @include state.generate-modifiers(\n (\n border-color: $button-border-color-states,\n background: $button-background-states,\n color: $button-color-states,\n )\n );\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$button-theme-map,\n defaults.$button-theme-selector-base,\n defaults.$button-theme-selector-prefix,\n \"button-\"\n );\n }\n}\n\n@mixin apply() {\n @include apply-base;\n @include apply-theme;\n}\n","// @graupl/core button 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-button-min-width | 44px |\n// | --graupl-button-min-height | 44px |\n// | --graupl-button-padding-x | var(--graupl-spacer-5) |\n// | --graupl-button-padding-y | var(--graupl-spacer-3) |\n// | --graupl-button-padding | var(--graupl-button-padding-y) var(--graupl-button-padding-x) |\n// | --graupl-button-font-size | var(--graupl-font-base) |\n// | --graupl-button-transition | background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-button-transition-reduced-motion | background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function) |\n// | --graupl-button-transform | none |\n// | --graupl-button-visited-transform | var(--graupl-button-transform) |\n// | --graupl-button-focus-transform | var(--graupl-button-transform) |\n// | --graupl-button-hover-transform | var(--graupl-button-transform) |\n// | --graupl-button-active-transform | scale(0.95) |\n// | --graupl-button-disabled-transform | none |\n// | --graupl-button-background | var(--graupl-background) |\n// | --graupl-button-visited-background | var(--graupl-button-background) |\n// | --graupl-button-focus-background | var(--graupl-button-background) |\n// | --graupl-button-hover-background | var(--graupl-color) |\n// | --graupl-button-active-background | var(--graupl-button-hover-background) |\n// | --graupl-button-disabled-background | var(--graupl-background) |\n// | --graupl-button-color | var(--graupl-color) |\n// | --graupl-button-visited-color | var(--graupl-button-color) |\n// | --graupl-button-focus-color | var(--graupl-button-color) |\n// | --graupl-button-hover-color | var(--graupl-background) |\n// | --graupl-button-active-color | var(--graupl-button-hover-color) |\n// | --graupl-button-disabled-color | var(--graupl-theme-active--primary--200) |\n// | --graupl-button-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-button-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-button-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-button-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-button-border-width | var(--graupl-button-border-top-width) var(--graupl-button-border-right-width) var(--graupl-button-border-bottom-width) var(--graupl-button-border-left-width) |\n// | --graupl-button-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-button-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-button-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-button-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-button-border-style | var(--graupl-button-border-top-style) var(--graupl-button-border-right-style) var(--graupl-button-border-bottom-style) var(--graupl-button-border-left-style) |\n// | --graupl-button-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-button-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-button-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-button-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-button-border-radius | var(--graupl-button-border-top-left-radius) var(--graupl-button-border-top-right-radius) var(--graupl-button-border-bottom-right-radius) var(--graupl-button-border-bottom-left-radius) |\n// | --graupl-button-border-color | var(--graupl-border-color) |\n// | --graupl-button-visited-border-color | var(--graupl-button-border-color) |\n// | --graupl-button-focus-border-color | var(--graupl-button-border-color) |\n// | --graupl-button-hover-border-color | var(--graupl-border-color) |\n// | --graupl-button-active-border-color | var(--graupl-button-hover-border-color) |\n// | --graupl-button-disabled-border-color | var(--graupl-theme-active--primary--200) |\n\n@use \"defaults\";\n@use \"../../variables\" as root-variables;\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../../theme/typography/variables\" as typography;\n@use \"../../functions/theme\";\n@use \"sass:map\";\n\n// Button properties.\n// --graupl-button-min-width\n$button-min-width: var(\n --#{root-defaults.$prefix}button-min-width,\n #{root-defaults.$interactive-min-width}\n);\n\n// --graupl-button-min-height\n$button-min-height: var(\n --#{root-defaults.$prefix}button-min-height,\n #{root-defaults.$interactive-min-height}\n);\n\n// --graupl-button-padding-x\n$button-padding-x: var(\n --#{root-defaults.$prefix}button-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-button-padding-y\n$button-padding-y: var(\n --#{root-defaults.$prefix}button-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-button-padding\n$button-padding: var(\n --#{root-defaults.$prefix}button-padding,\n #{$button-padding-y} #{$button-padding-x}\n);\n\n// --graupl-button-font-size\n$button-font-size: var(\n --#{root-defaults.$prefix}button-font-size,\n #{map.get(typography.$font-sizes, base)}\n);\n\n// --graupl-button-transition\n$button-transition: var(\n --#{root-defaults.$prefix}button-transition,\n background #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function},\n color #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function},\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-button-transition-reduced-motion\n$button-transition-reduced-motion: var(\n --#{root-defaults.$prefix}button-transition-reduced-motion,\n background #{map.get(root-variables.$transition-durations, none)}\n #{root-variables.$transition-timing-function},\n color #{map.get(root-variables.$transition-durations, none)}\n #{root-variables.$transition-timing-function}\n);\n\n// Transform properties.\n// --graupl-button-transform\n$button-transform: var(\n --#{root-defaults.$prefix}button-transform,\n #{defaults.$button-initial-transform}\n);\n\n// --graupl-button-visited-transform\n$button-visited-transform: var(\n --#{root-defaults.$prefix}button-visited-transform,\n #{$button-transform}\n);\n\n// --graupl-button-focus-transform\n$button-focus-transform: var(\n --#{root-defaults.$prefix}button-focus-transform,\n #{$button-transform}\n);\n\n// --graupl-button-hover-transform\n$button-hover-transform: var(\n --#{root-defaults.$prefix}button-hover-transform,\n #{$button-transform}\n);\n\n// --graupl-button-active-transform\n$button-active-transform: var(\n --#{root-defaults.$prefix}button-active-transform,\n #{defaults.$button-final-transform}\n);\n\n// --graupl-button-disabled-transform\n$button-disabled-transform: var(\n --#{root-defaults.$prefix}button-disabled-transform,\n #{defaults.$button-disabled-transform}\n);\n$button-transform-states: (\n default: $button-transform,\n visited: $button-visited-transform,\n focus: $button-focus-transform,\n hover: $button-hover-transform,\n active: $button-active-transform,\n disabled: $button-disabled-transform,\n);\n\n// Background properties.\n// --graupl-button-background\n$button-background: var(\n --#{root-defaults.$prefix}button-background,\n #{color.$background}\n);\n\n// --graupl-button-visited-background\n$button-visited-background: var(\n --#{root-defaults.$prefix}button-visited-background,\n #{$button-background}\n);\n\n// --graupl-button-focus-background\n$button-focus-background: var(\n --#{root-defaults.$prefix}button-focus-background,\n #{$button-background}\n);\n\n// --graupl-button-hover-background\n$button-hover-background: var(\n --#{root-defaults.$prefix}button-hover-background,\n #{color.$color}\n);\n\n// --graupl-button-active-background\n$button-active-background: var(\n --#{root-defaults.$prefix}button-active-background,\n #{$button-hover-background}\n);\n\n// --graupl-button-disabled-background\n$button-disabled-background: var(\n --#{root-defaults.$prefix}button-disabled-background,\n #{color.$background}\n);\n$button-background-states: (\n default: $button-background,\n visited: $button-visited-background,\n focus: $button-focus-background,\n hover: $button-hover-background,\n active: $button-active-background,\n disabled: $button-disabled-background,\n);\n\n// Text properties.\n// --graupl-button-color\n$button-color: var(--#{root-defaults.$prefix}button-color, #{color.$color});\n\n// --graupl-button-visited-color\n$button-visited-color: var(\n --#{root-defaults.$prefix}button-visited-color,\n #{$button-color}\n);\n\n// --graupl-button-focus-color\n$button-focus-color: var(\n --#{root-defaults.$prefix}button-focus-color,\n #{$button-color}\n);\n\n// --graupl-button-hover-color\n$button-hover-color: var(\n --#{root-defaults.$prefix}button-hover-color,\n #{color.$background}\n);\n\n// --graupl-button-active-color\n$button-active-color: var(\n --#{root-defaults.$prefix}button-active-color,\n #{$button-hover-color}\n);\n\n// --graupl-button-disabled-color\n$button-disabled-color: var(\n --#{root-defaults.$prefix}button-disabled-color,\n #{theme.get(primary, 200)}\n);\n$button-color-states: (\n default: $button-color,\n visited: $button-visited-color,\n focus: $button-focus-color,\n hover: $button-hover-color,\n active: $button-active-color,\n disabled: $button-disabled-color,\n);\n\n// Border properties.\n// --graupl-button-border-top-width\n$button-border-top-width: var(\n --#{root-defaults.$prefix}button-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-button-border-right-width\n$button-border-right-width: var(\n --#{root-defaults.$prefix}button-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-button-border-bottom-width\n$button-border-bottom-width: var(\n --#{root-defaults.$prefix}button-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-button-border-left-width\n$button-border-left-width: var(\n --#{root-defaults.$prefix}button-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-button-border-width\n$button-border-width: var(\n --#{root-defaults.$prefix}button-border-width,\n #{$button-border-top-width} #{$button-border-right-width}\n #{$button-border-bottom-width} #{$button-border-left-width}\n);\n\n// --graupl-button-border-top-style\n$button-border-top-style: var(\n --#{root-defaults.$prefix}button-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-button-border-right-style\n$button-border-right-style: var(\n --#{root-defaults.$prefix}button-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-button-border-bottom-style\n$button-border-bottom-style: var(\n --#{root-defaults.$prefix}button-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-button-border-left-style\n$button-border-left-style: var(\n --#{root-defaults.$prefix}button-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-button-border-style\n$button-border-style: var(\n --#{root-defaults.$prefix}button-border-style,\n #{$button-border-top-style} #{$button-border-right-style}\n #{$button-border-bottom-style} #{$button-border-left-style}\n);\n\n// --graupl-button-border-top-left-radius\n$button-border-top-left-radius: var(\n --#{root-defaults.$prefix}button-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-button-border-top-right-radius\n$button-border-top-right-radius: var(\n --#{root-defaults.$prefix}button-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-button-border-bottom-right-radius\n$button-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}button-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-button-border-bottom-left-radius\n$button-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}button-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-button-border-radius\n$button-border-radius: var(\n --#{root-defaults.$prefix}button-border-radius,\n #{$button-border-top-left-radius} #{$button-border-top-right-radius}\n #{$button-border-bottom-right-radius} #{$button-border-bottom-left-radius}\n);\n\n// Border colour properties.\n// --graupl-button-border-color\n$button-border-color: var(\n --#{root-defaults.$prefix}button-border-color,\n #{color.$border-color}\n);\n\n// --graupl-button-visited-border-color\n$button-visited-border-color: var(\n --#{root-defaults.$prefix}button-visited-border-color,\n #{$button-border-color}\n);\n\n// --graupl-button-focus-border-color\n$button-focus-border-color: var(\n --#{root-defaults.$prefix}button-focus-border-color,\n #{$button-border-color}\n);\n\n// --graupl-button-hover-border-color\n$button-hover-border-color: var(\n --#{root-defaults.$prefix}button-hover-border-color,\n #{color.$border-color}\n);\n\n// --graupl-button-active-border-color\n$button-active-border-color: var(\n --#{root-defaults.$prefix}button-active-border-color,\n #{$button-hover-border-color}\n);\n\n// --graupl-button-disabled-border-color\n$button-disabled-border-color: var(\n --#{root-defaults.$prefix}button-disabled-border-color,\n #{theme.get(primary, 200)}\n);\n$button-border-color-states: (\n default: $button-border-color,\n visited: $button-visited-border-color,\n focus: $button-focus-border-color,\n hover: $button-hover-border-color,\n active: $button-active-border-color,\n disabled: $button-disabled-border-color,\n);\n","// @graupl/core state mixins.\n//\n// A series of mixins to tie styles to a state.\n\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific state.\n///\n/// @param {string} $state\n/// The name of the state to apply the styles to.\n@mixin state($state) {\n @each $selector in map.get(root-defaults.$state-selectors, $state) {\n &#{$selector} {\n @content;\n }\n }\n}\n\n/// Generates state modifiers with properties.\n///\n/// @param {map} $state-map\n/// The map of props and states.\n/// @param {string} $selector-base\n/// The selector base for the state modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the state modifer.\n@mixin generate-modifiers($state-map) {\n @each $state, $selectors in root-defaults.$state-selectors {\n @each $selector in $selectors {\n // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled\n &#{$selector} {\n @each $prop, $map in $state-map {\n #{$prop}: map.get($map, $state);\n }\n\n // If the state is disabled, we want that to supersede all other states.\n @if $state == \"disabled\" {\n @each $sub-state, $sub-selectors in root-defaults.$state-selectors {\n @if $sub-state != $state {\n @each $sub-selector in $sub-selectors {\n // e.g &:visited, &:focus-visible, &:hover, &:active\n &#{$sub-selector} {\n @each $prop, $map in $state-map {\n #{$prop}: map.get($map, $state);\n }\n }\n }\n }\n }\n }\n }\n }\n }\n}\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n","// @graupl/core theme mixins.\n//\n// A series of mixins to tie styles to a theme-mode.\n\n@use \"../functions/theme\";\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n\n/// Applies styles to a specific theme mode.\n///\n/// @param {string} $theme-name\n/// The name of the theme mode to apply the styles to.\n@mixin theme($theme-name) {\n #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {\n @content;\n }\n}\n\n/// Generates a theme modifiers with custom props.\n///\n/// @param {map} $theme-map\n/// The map of custom props.\n/// @param {string} $selector-base\n/// The selector base for the theme modifier.\n/// @param {string} $selector-prefix\n/// The selector prefix for the theme modifer.\n/// @param {string} $scope\n/// The scope of the custom properties.\n/// @param {string} $base\n/// The base selector to append the theme modifier to.\n@mixin generate-modifiers(\n $theme-map,\n $selector-base,\n $selector-prefix,\n $scope: \"\",\n $base: \"&\"\n) {\n @each $color, $map in $theme-map {\n // e.g. &.primary, &.secondary, &.tertiary\n #{$base}#{$selector-base}#{$selector-prefix}#{$color} {\n @each $prop, $value in $map {\n --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(\n map.get($value, color),\n map.get($value, shade)\n )};\n }\n }\n }\n}\n"],"names":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/core",
-  "version": "1.0.0-beta.31",
+  "version": "1.0.0-beta.32",
   "license": "GPL-3.0-or-later",
   "description": "The core module of Graupl, providing essential styles and utilities.",
   "main": "dist/js/graupl.cjs.js",

package/scss/component/tabs.scss ADDED Viewed

@@ -0,0 +1,3 @@
+// @graupl/core tabs component.
+@forward "../../src/scss/component/tabs";