@layer components.button{e-spinner{display:none;width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%}:host([loading]){pointer-events:none;button{opacity:.7}e-spinner{display:inline-block}}@media(prefers-reduced-motion: no-preference){:host([loading]) e-spinner{animation:ec-button-spin .8s linear infinite}}@keyframes ec-button-spin{to{transform:rotate(360deg)}}:host([full]){button{width:100%}}:host([small]){button{font-size:var(--s-1);padding:var(--s-2) var(--s-1)}}button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;font-size:var(--s0);font-family:var(--font-family);padding:var(--s-1);border:none;border-radius:var(--button-border-radius);cursor:pointer;font-weight:var(--font-weight-button, 400);overflow:hidden;transform:translate3d(0, 0, 0);transition:transform .15s ease-out;&:active{transform:scale(0.97)}&:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle, #fff 10%, transparent 10.01%);background-repeat:no-repeat;background-position:var(--ripple-x, 50%) var(--ripple-y, 50%);transform:scale(10, 10);opacity:0;transition:transform .4s ease-out,opacity .5s ease-out}&:active:after{transform:scale(0, 0);opacity:.3;transition:0s}&[contained]{background-color:var(--color-primary);color:var(--color-primary-contrast);&:hover{background-color:color-mix(in srgb, var(--color-primary) 90%, transparent)}}}}/*# sourceMappingURL=button.css.map */