@layer components.button{:host{contain:layout style;display:inline-block}ec-fa-icon.spinner{display:none}:host([loading]){pointer-events:none}:host([loading]) button{opacity:.7}:host([loading]) ec-fa-icon.spinner{display:inline-flex}:host([loading]) ::slotted(ec-fa-icon){display:none}:host([full]){display:block}:host([full]) button{width:100%}:host([small]) button{font-size:var(--s-1);padding:var(--s-2)var(--s-1)}button{font-size:var(--s0);font-family:var(--font-family);padding:var(--s-1);border-radius:var(--button-border-radius);cursor:pointer;font-weight:var(--font-weight-button,400);transition:var(--interactive-transition);min-height:var(--button-min-height,2.75rem);background-color:var(--button-bg,var(--gray-100,#f3f4f6));color:var(--button-color,var(--color-text,inherit));border:none;justify-content:center;align-items:center;gap:.5em;display:inline-flex;position:relative;overflow:hidden;transform:translate(0,0)}:host-context(html[data-theme="dark"]) button{--button-bg:var(--gray-750,#2f2f2f);--button-color:var(--color-text,#e5e5e5)}:host-context(html[data-theme="rainbow"]) button{--button-bg:#f5e9fb;--button-color:#6e1b98}button:hover:not(:disabled):not([contained]):not([outlined]):not([ghost]){background-color:var(--button-bg-hover,var(--gray-200,#e5e7eb))}:host-context(html[data-theme="dark"]) button:hover:not(:disabled):not([contained]):not([outlined]):not([ghost]){background-color:var(--gray-700,#3a3a3a)}:host-context(html[data-theme="rainbow"]) button:hover:not(:disabled):not([contained]):not([outlined]):not([ghost]){background-color:#ebd4f7}button:focus-visible{box-shadow:0 0 0 2px var(--color-background,white),0 0 0 4px var(--color-primary);border-radius:var(--button-border-radius);outline:none}:host-context(html[data-theme="dark"]) button:focus-visible{box-shadow:0 0 0 2px var(--color-background,#121212),0 0 0 4px var(--color-primary)}:host-context(html[data-theme="rainbow"]) button:focus-visible{box-shadow:0 0 0 2px var(--color-background,white),0 0 0 4px #a73cdd}button:active{transform:scale(var(--interactive-scale))}button:disabled{opacity:.5;cursor:not-allowed}button:after{content:"";pointer-events:none;background-image:radial-gradient(circle,#fff 10%,#0000 10.01%);background-repeat:no-repeat;background-position:var(--ripple-x,50%)var(--ripple-y,50%);opacity:0;width:100%;height:100%;transition:transform .4s ease-out,opacity .5s ease-out;display:block;position:absolute;top:0;left:0;transform:scale(10)}button:active:after{opacity:.3;transition:all;transform:scale(0)}button[contained]{background-color:var(--color-primary);color:var(--color-primary-contrast)}button[contained]:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary)90%,transparent)}button[contained] ec-fa-icon.spinner{color:var(--color-primary-contrast)}button[outlined]{background-color:#0000;border:1px solid}button[outlined]:hover:not(:disabled){background-color:color-mix(in srgb,currentColor 10%,transparent)}button[primary]:not([contained]){color:var(--color-primary)}button[ghost]{all:unset;cursor:pointer;width:100%;height:100%;color:inherit;justify-content:center;align-items:center;display:flex}button[ghost]:after{display:none}@media (prefers-reduced-motion:reduce){button,button:after{transition:none}button:active{transform:none}}@media (forced-colors:active){button{border:1px solid}}}