sate-lib/lib/components/button/button.styles_module.css

A lightweight and modular React component library designed for modern web interfaces. **SATE Lib** powers the [sate.menu](https://sate.menu) platform with reusable, scalable, and themeable UI components.

.button-dWV52U{cursor:pointer;border-radius:var(--radius-radii-12,.75rem);border:0;justify-content:center;align-items:center;text-decoration:none;transition:transform .2s ease-in-out,outline .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out;display:inline-flex;position:relative;transform:scale(1);&:focus-visible{outline:2px solid var(--color-background-screen,#fdfdf9)}}.directionRight-kW0Joo{flex-direction:row-reverse}.button-dWV52U:disabled,.button-dWV52U.loading-BHYlLw{pointer-events:none;opacity:.38}.filled-FpNFjd{color:var(--color-interactive-control,#fff);background-color:var(--color-interactive-accent,#202020);position:relative;overflow:hidden}.filled-FpNFjd .noise-pBMZ6I{z-index:-1;pointer-events:none;width:100%;min-width:170px;transition:opacity .2s ease-in-out;position:absolute;top:0;left:0}.filled-FpNFjd:hover{background-color:var(--color-interactive-accent-hover,#000)}.filled-FpNFjd:hover .noise-pBMZ6I,.filled-FpNFjd:active .noise-pBMZ6I{opacity:.9}.filled-FpNFjd:active{background-color:var(--color-interactive-accent-active,#202020)}.filled-FpNFjd:focus-visible{box-shadow:0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 4px var(--color-content-primary,#202020)}.outlined-QtvRsh{color:var(--color-interactive-primary,#646464);outline:1px solid color-mix(in srgb,var(--color-interactive-secondary,#0000002b)17%,transparent);outline-offset:-1px;background:0 0;&:hover{background:color-mix(in srgb,var(--color-background-screen-hover,#0000000a)4%,transparent)}&:active{background:color-mix(in srgb,var(--color-background-screen-active,#0000000a)4%,transparent)}&:focus-visible{outline:2px solid var(--color-background-screen,#fdfdf9);outline-offset:0;background:var(--color-background-screen,#fdfdf9);box-shadow:0 0 0 4px var(--color-content-primary,#202020)}}.text-qf5rbY{color:var(--color-interactive-primary,#646464);background:0 0;&:hover,&:active{background:color-mix(in srgb,var(--color-background-screen-hover,#0000000a)4%,transparent)}&:focus-visible{background:var(--color-background-screen,#fdfdf9);box-shadow:0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 4px var(--color-content-primary,#202020)}}.toned-yMdhhl{color:var(--color-interactive-primary,#646464);background:color-mix(in srgb,var(--color-background-neutral,#0000000a)4%,transparent);&:hover,&:active{background:color-mix(in srgb,var(--color-background-neutral-hover,#00000014)8%,transparent)}&:focus-visible{background:color-mix(in srgb,var(--color-background-neutral,#0000000a)4%,transparent);box-shadow:0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 4px var(--color-content-primary,#202020)}}.lightOnContent-ZxiAH4{color:var(--color-fixed-content-on-light,#202020);background:color-mix(in srgb,var(--color-fixed-elevated-light,#ffffffe0)88%,transparent);backdrop-filter:blur(8px);&:hover{background:color-mix(in srgb,var(--color-fixed-elevated-light-hover,#fffffff5)96%,transparent)}&:active{background:color-mix(in srgb,var(--color-fixed-elevated-light-active,#ffffffe0)88%,transparent)}&:focus-visible{background:color-mix(in srgb,var(--color-fixed-elevated-light,#ffffffe0)88%,transparent);box-shadow:0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 4px var(--color-content-primary,#202020)}}.darkOnContent-gXMY2B{color:var(--color-fixed-content-on-dark,#fff);background:color-mix(in srgb,var(--color-fixed-elevated-dark,#0000009e)62%,transparent);backdrop-filter:blur(8px);&:hover{background:color-mix(in srgb,var(--color-fixed-elevated-dark-hover,#000000bd)74%,transparent)}&:active{background:color-mix(in srgb,var(--color-fixed-elevated-dark-active,#0000009e)62%,transparent)}&:focus-visible{background:color-mix(in srgb,var(--color-fixed-elevated-dark,#0000009e)62%,transparent);box-shadow:0 0 0 2px var(--color-background-screen,#fdfdf9),0 0 0 4px var(--color-content-primary,#202020)}}.small-uxUptY{gap:var(--spacing-size-4,.25rem);padding:var(--spacing-size-6,.375rem)var(--spacing-size-12,.75rem);&:active{transform:scale(.92)}}.small-uxUptY.icon-EPzHvF{padding:var(--spacing-size-6,.375rem)var(--spacing-size-12,.75rem)var(--spacing-size-6,.375rem)var(--spacing-size-8,.5rem)}.small-uxUptY.directionRight-kW0Joo{padding:var(--spacing-size-6,.375rem)var(--spacing-size-8,.5rem)var(--spacing-size-6,.375rem)var(--spacing-size-12,.75rem)}.medium-iwhjuP{gap:var(--spacing-size-4,.25rem);padding:var(--spacing-size-8,.5rem)var(--spacing-size-16,1rem);&:active{transform:scale(.96)}}.medium-iwhjuP.icon-EPzHvF{padding:var(--spacing-size-8,.5rem)var(--spacing-size-16,1rem)var(--spacing-size-8,.5rem)var(--spacing-size-8,.5rem)}.medium-iwhjuP.directionRight-kW0Joo{padding:var(--spacing-size-8,.5rem)var(--spacing-size-8,.5rem)var(--spacing-size-8,.5rem)var(--spacing-size-16,1rem)}.large-N1qL9e{gap:var(--spacing-size-8,.5rem);padding:var(--spacing-size-12,.75rem)var(--spacing-size-24,1.5rem);&:active{transform:scale(.96)}}.large-N1qL9e.icon-EPzHvF{padding:var(--spacing-size-12,.75rem)var(--spacing-size-24,1.5rem)var(--spacing-size-12,.75rem)var(--spacing-size-16,1rem)}.large-N1qL9e.directionRight-kW0Joo{padding:var(--spacing-size-12,.75rem)var(--spacing-size-16,1rem)var(--spacing-size-12,.75rem)var(--spacing-size-24,1.5rem);padding-inline-end:var(--spacing-size-16,1rem)}