:host { box-sizing: border-box; }
:host *, :host ::before, :host ::after { box-sizing: inherit; }
[hidden] { display: none !important; }
:where(:root), .wa-neutral, :host([variant="neutral"]) { --wa-color-fill-loud: var(--wa-color-neutral-fill-loud); --wa-color-fill-normal: var(--wa-color-neutral-fill-normal); --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet); --wa-color-border-loud: var(--wa-color-neutral-border-loud); --wa-color-border-normal: var(--wa-color-neutral-border-normal); --wa-color-border-quiet: var(--wa-color-neutral-border-quiet); --wa-color-on-loud: var(--wa-color-neutral-on-loud); --wa-color-on-normal: var(--wa-color-neutral-on-normal); --wa-color-on-quiet: var(--wa-color-neutral-on-quiet); }
.wa-brand, :host([variant="brand"]) { --wa-color-fill-loud: var(--wa-color-brand-fill-loud); --wa-color-fill-normal: var(--wa-color-brand-fill-normal); --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet); --wa-color-border-loud: var(--wa-color-brand-border-loud); --wa-color-border-normal: var(--wa-color-brand-border-normal); --wa-color-border-quiet: var(--wa-color-brand-border-quiet); --wa-color-on-loud: var(--wa-color-brand-on-loud); --wa-color-on-normal: var(--wa-color-brand-on-normal); --wa-color-on-quiet: var(--wa-color-brand-on-quiet); }
.wa-success, :host([variant="success"]) { --wa-color-fill-loud: var(--wa-color-success-fill-loud); --wa-color-fill-normal: var(--wa-color-success-fill-normal); --wa-color-fill-quiet: var(--wa-color-success-fill-quiet); --wa-color-border-loud: var(--wa-color-success-border-loud); --wa-color-border-normal: var(--wa-color-success-border-normal); --wa-color-border-quiet: var(--wa-color-success-border-quiet); --wa-color-on-loud: var(--wa-color-success-on-loud); --wa-color-on-normal: var(--wa-color-success-on-normal); --wa-color-on-quiet: var(--wa-color-success-on-quiet); }
.wa-warning, :host([variant="warning"]) { --wa-color-fill-loud: var(--wa-color-warning-fill-loud); --wa-color-fill-normal: var(--wa-color-warning-fill-normal); --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet); --wa-color-border-loud: var(--wa-color-warning-border-loud); --wa-color-border-normal: var(--wa-color-warning-border-normal); --wa-color-border-quiet: var(--wa-color-warning-border-quiet); --wa-color-on-loud: var(--wa-color-warning-on-loud); --wa-color-on-normal: var(--wa-color-warning-on-normal); --wa-color-on-quiet: var(--wa-color-warning-on-quiet); }
.wa-danger, :host([variant="danger"]) { --wa-color-fill-loud: var(--wa-color-danger-fill-loud); --wa-color-fill-normal: var(--wa-color-danger-fill-normal); --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet); --wa-color-border-loud: var(--wa-color-danger-border-loud); --wa-color-border-normal: var(--wa-color-danger-border-normal); --wa-color-border-quiet: var(--wa-color-danger-border-quiet); --wa-color-on-loud: var(--wa-color-danger-on-loud); --wa-color-on-normal: var(--wa-color-danger-on-normal); --wa-color-on-quiet: var(--wa-color-danger-on-quiet); }
:host { --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud)); display: inline-flex; align-items: center; justify-content: center; padding: 0.375em 0.625em; color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud)); font-size: max(var(--wa-font-size-3xs), 0.75em); font-weight: var(--wa-font-weight-semibold); line-height: 1; vertical-align: middle; white-space: nowrap; background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud)); border-color: transparent; border-radius: var(--wa-border-radius-s); border-style: var(--wa-border-style); border-width: var(--wa-border-width-s); user-select: none; cursor: inherit; }
:host([appearance="outlined"]) { --pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud)); color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet)); background-color: transparent; border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud)); }
:host([appearance="filled"]) { --pulse-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal)); color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal)); background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal)); border-color: transparent; }
:host([appearance="filled-outlined"]) { --pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal)); color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal)); background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal)); border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal)); }
:host([appearance="accent"]) { --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud)); color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud)); background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud)); border-color: transparent; }
:host([pill]) { border-radius: var(--wa-border-radius-pill); }
:host([attention="pulse"]) { animation: 1.5s ease 0s infinite normal none running pulse; }
@keyframes pulse { 
  0% { box-shadow: 0 0 0 0 var(--pulse-color); }
  70% { box-shadow: transparent 0px 0px 0px 0.5rem; }
  100% { box-shadow: transparent 0px 0px 0px 0px; }
}
:host([attention="bounce"]) { animation: 1s cubic-bezier(0.28, 0.84, 0.42, 1) 0s infinite normal none running bounce; }
@keyframes bounce { 
  0%, 20%, 50%, 80%, 100% { transform: translateY(0px); }
  40% { transform: translateY(-5px); }
  60% { transform: translateY(-2px); }
}
[part="start"], [part="end"] { line-height: 0; }
slot[name="start"]::slotted(*) { margin-inline-end: 0.375em; }
slot[name="end"]::slotted(*) { margin-inline-start: 0.375em; }