@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);border:none;justify-content:center;align-items:center;gap:.5em;min-height:2.75rem;display:inline-flex;position:relative;overflow:hidden;transform:translate(0,0)}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}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]{color:var(--color-primary)}@media (prefers-reduced-motion:reduce){button,button:after{transition:none}button:active{transform:none}}@media (forced-colors:active){button{border:1px solid}}}