:host #button-el{--btn-bg:var(--color-bg-elevated);--btn-border:var(--color-border);--btn-color:var(--color-text-base);--btn-shadow:var(--shadow-sm);--btn-opacity:1;--btn-bg-hover:var(--color-bg-elevated);--btn-border-hover:var(--color-brand);--btn-color-hover:var(--color-brand);--btn-shadow-hover:var(--shadow-sm);--btn-transform-hover:none;--btn-opacity-hover:1;--btn-text-decoration:none;--btn-text-decoration-hover:none;background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--btn-color);box-shadow:var(--btn-shadow);opacity:var(--btn-opacity);-webkit-text-decoration:var(--btn-text-decoration);text-decoration:var(--btn-text-decoration)}:host #button-el:hover:not(:disabled):not(.loading){background:var(--btn-bg-hover);border-color:var(--btn-border-hover);color:var(--btn-color-hover);transform:var(--btn-transform-hover);box-shadow:var(--btn-shadow-hover);opacity:var(--btn-opacity-hover);-webkit-text-decoration:var(--btn-text-decoration-hover);text-decoration:var(--btn-text-decoration-hover)}:host #button-el:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}:host #button-el:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}:host #button-el.btn-primary,:host #button-el.active{--btn-bg:var(--color-brand);--btn-border:transparent;--btn-color:var(--color-brand-contrast);--btn-bg-hover:var(--color-brand-hover);--btn-border-hover:var(--color-brand-hover);--btn-color-hover:var(--color-brand-contrast)}:host #button-el.btn-negative{--btn-color:var(--color-error);--btn-bg-hover:var(--color-error);--btn-border-hover:var(--color-error);--btn-color-hover:white}:host #button-el.btn-success,:host #button-el.btn-warning{--btn-border:transparent;--btn-color:var(--color-brand-contrast);--btn-border-hover:transparent;--btn-color-hover:var(--color-brand-contrast);--btn-opacity-hover:.9}:host #button-el.btn-success{--btn-bg:var(--color-success);--btn-bg-hover:var(--color-success)}:host #button-el.btn-warning{--btn-bg:var(--color-warning);--btn-bg-hover:var(--color-warning)}:host #button-el.btn-ghost,:host #button-el.btn-link{--btn-bg:transparent;--btn-border:transparent;--btn-shadow:none;--btn-transform-hover:none}:host #button-el.btn-ghost{--btn-bg-hover:var(--color-bg-base);--btn-border-hover:var(--color-border)}:host #button-el.btn-ghost.active{--btn-bg:hsla(var(--color-brand-h), var(--color-brand-s), var(--color-brand-l), .1);--btn-border:hsla(var(--color-brand-h), var(--color-brand-s), var(--color-brand-l), .3);--btn-color:var(--color-brand);--btn-bg-hover:hsla(var(--color-brand-h), var(--color-brand-s), var(--color-brand-l), .18);--btn-border-hover:var(--color-brand-hover);--btn-color-hover:var(--color-brand-hover);--btn-shadow-hover:none}:host #button-el.btn-link{--btn-color:var(--color-brand);--btn-text-decoration:underline;--btn-bg-hover:transparent;--btn-border-hover:transparent;--btn-color-hover:var(--color-brand-hover);--btn-shadow-hover:none;--btn-text-decoration-hover:none}:host #button-el.btn-overlay-control{--btn-color:var(--color-text-muted)}:host #button-el xs-icon{opacity:.8;transition:opacity var(--transition-fast)}:host #button-el:hover xs-icon{opacity:1}