.default-button{--icon-mode-flag: var(--OFF);--icon-left-flag: var(--OFF);--icon-right-flag: var(--OFF);--border-size: 0;--height: 2.5em;--default-inline-padding: 1.25em;--small-inline-padding: 1em;--icon-mode-inline-padding: 0;--_no-icon-left-padding-start: var(--icon-left-flag) var(--default-inline-padding);--_no-icon-right-padding-end: var(--icon-right-flag) var(--default-inline-padding);--_no-icon-mode-inline-padding-start: var(--icon-mode-flag) var(--_no-icon-left-padding-start, var(--small-inline-padding));--_no-icon-mode-inline-padding-end: var(--icon-mode-flag) var(--_no-icon-right-padding-end, var(--small-inline-padding));--padding: 0 var(--_no-icon-mode-inline-padding-end, var(--icon-mode-inline-padding)) 0 var(--_no-icon-mode-inline-padding-start, var(--icon-mode-inline-padding));--font-size: inherit;--line-height: 1.25;--font-family: var(--font-title);--font-weight: 400;--outline-color: var(--color-primary-lighter);--default-border-color: var(--🎨-default-button-border-color);--default-background-color: var(--🎨-default-button-background-color);--default-color: var(--🎨-default-button-color);--hover-background-color: var( --🎨-default-button-hover-background-color, var(--default-background-color) );--hover-color: var(--🎨-default-button-hover-color, var(--default-color));--active-border-color: var( --🎨-default-button-active-border-color, var(--default-border-color) );--active-background-color: var( --🎨-default-button-active-background-color, var(--default-background-color) );--active-color: var(--🎨-default-button-active-color, var(--default-color));--_border-color: var(--default-border-color);--_background-color: var(--default-background-color);--_color: var(--default-color);display:inline-flex;align-items:center;justify-content:center;border:var(--border-size) solid var(--_border-color);border-radius:var(--height);height:var(--height);width:var(--icon-mode-flag, var(--height));padding:var(--padding);font-size:var(--font-size);line-height:var(--line-height);font-family:var(--font-family);font-weight:var(--font-weight);color:var(--_color);background:var(--_background-color);transition:all .15s ease-in-out}.default-button:hover,.default-button[aria-selected=true]{--_background-color: var(--hover-background-color);--_color: var(--hover-color)}.default-button:active{--_border-color: var(--active-border-color);--_background-color: var(--active-background-color);--_color: var(--active-color)}.default-button:disabled,.default-button[aria-disabled=true]{--_border-color: var(--default-border-color);--_background-color: var(--default-background-color);--_color: var(--default-color);opacity:.3;pointer-events:none}.default-button:focus-visible{outline:max(2px,.125em) solid var(--outline-color);outline-offset:max(2px,.125em)}.default-button:where([data-variant=secondary]){--border-size: max(2px, .125em);--default-background-color: var(--🎨-default-button-2-background-color);--default-color: var(--🎨-default-button-2-color);--hover-background-color: var(--🎨-default-button-2-hover-background-color);--active-background-color: var( --🎨-default-button-2-active-background-color )}.default-button:where([data-variant=tertiary]){--default-background-color: var( --🎨-default-button-3-background-color, transparent );--default-color: var(--🎨-default-button-3-color);--hover-background-color: var( --🎨-default-button-3-hover-background-color, var(--default-background-color) );--hover-color: var(--🎨-default-button-3-hover-color, var(--default-color));--active-background-color: var( --🎨-default-button-3-active-background-color, var(--default-background-color) );--active-color: var( --🎨-default-button-3-active-color, var(--default-color) )}.default-button:where([data-font-size=M]){--font-size: 1rem}.default-button:where([data-font-size=S]){--height: 2.2857em;--font-size: .875rem}.default-button:where([data-icon-left=true]){--icon-left-flag: var(--ON)}.default-button:where([data-icon-right=true]){--icon-right-flag: var(--ON)}.default-button:where([data-icon-mode=true]){--icon-mode-flag: var(--ON)}[data-theme=dark]{--🎨-default-button-border-color: var(--🎨-color);--🎨-default-button-active-border-color: var(--🎨-color);--🎨-default-button-background-color: hsl( var(--color-primary-h) var(--color-primary-s) 100% );--🎨-default-button-color: var(--color-primary);--🎨-default-button-hover-background-color: hsl( var(--color-primary-h) var(--color-primary-s) 97% );--🎨-default-button-active-background-color: hsl( var(--color-primary-h) var(--color-primary-s) 94% );--🎨-default-button-2-background-color: var(--🎨-background-color);--🎨-default-button-2-color: var(--🎨-color);--🎨-default-button-2-hover-background-color: hsl( var(--🎨-background-color-h) var(--🎨-background-color-s) calc(var(--🎨-background-color-l) + 7%) );--🎨-default-button-2-active-background-color: hsl( var(--🎨-background-color-h) var(--🎨-background-color-s) calc(var(--🎨-background-color-l) + 21%) );--🎨-default-button-3-color: var(--🎨-color);--🎨-default-button-3-hover-color: hsl( var(--🎨-color-h) var(--🎨-color-s) calc(var(--🎨-color-l) - 28%) );--🎨-default-button-3-active-color: hsl( var(--🎨-color-h) var(--🎨-color-s) calc(var(--🎨-color-l) - 42%) )}[data-theme=light]{--🎨-default-button-border-color: #b6b5bd;--🎨-default-button-active-border-color: var(--color-primary);--🎨-default-button-background-color: var(--color-primary);--🎨-default-button-color: var(--color-over-primary);--🎨-default-button-hover-background-color: hsl( var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 5%) );--🎨-default-button-active-background-color: hsl( var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 12%) );--🎨-default-button-2-background-color: hsl( var(--color-primary-h) var(--color-primary-s) 99% );--🎨-default-button-2-color: var(--color-primary);--🎨-default-button-2-hover-background-color: hsl( var(--color-primary-h) var(--color-primary-s) 95% );--🎨-default-button-2-active-background-color: hsl( var(--color-primary-h) var(--color-primary-s) 87% );--🎨-default-button-3-color: var(--color-primary);--🎨-default-button-3-hover-color: hsl( var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 5%) );--🎨-default-button-3-active-color: hsl( var(--color-primary-h) var(--color-primary-s) calc(var(--color-primary-l) - 12%) )}