:host { box-sizing: border-box; }
:host *, :host ::before, :host ::after { box-sizing: inherit; }
[hidden] { display: none !important; }
@layer wa-component {
  :host {
  display: inline-block;
  &:has(wa-badge) { position: relative; }
}
}
.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; user-select: none; white-space: nowrap; vertical-align: middle; transition-property: background, border, box-shadow, color, opacity, transform; transition-duration: var(--wa-transition-fast); transition-timing-function: var(--wa-transition-easing); transform-origin: center center; cursor: pointer; padding: 0 var(--wa-form-control-padding-inline); font-family: inherit; font-size: inherit; font-weight: var(--wa-font-weight-action); height: var(--wa-form-control-height); width: 100%; background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)); border-color: transparent; color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud)); border-start-start-radius: var(--_button-start-start-radius, var(--wa-form-control-border-radius)); border-start-end-radius: var(--_button-start-end-radius, var(--wa-form-control-border-radius)); border-end-start-radius: var(--_button-end-start-radius, var(--wa-form-control-border-radius)); border-end-end-radius: var(--_button-end-end-radius, var(--wa-form-control-border-radius)); border-style: var(--wa-form-control-border-style); border-width: var(--wa-form-control-border-width); }
.button:not(.disabled):not(.loading) {
  @media (hover: hover) {
  &:hover { transform: var(--wa-button-transform-hover); }
}
  &:active { transform: var(--wa-button-transform-active); }
  @media (prefers-reduced-motion: reduce) {
  &:hover, &:active { transform: none; }
}
}
:host([appearance="plain"]) {
  margin-inline-start: var(--_button-horizontal-indent); margin-block-start: var(--_button-vertical-indent);
  & .button { color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet)); background-color: transparent; border-color: transparent; }
  @media (hover: hover) {
  & .button:not(.disabled):not(.loading):hover { color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet)); background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)); }
}
  & .button:not(.disabled):not(.loading):active { color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet)); background-color: color-mix(
        in oklab,
        var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
        var(--wa-color-mix-active)
      ); }
}
:host([appearance="outlined"]) {
  margin-inline-start: var(--_button-horizontal-indent-outlined); margin-block-start: var(--_button-vertical-indent-outlined);
  & .button { color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet)); background-color: transparent; border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud)); }
  @media (hover: hover) {
  & .button:not(.disabled):not(.loading):hover { color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet)); background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)); }
}
  & .button:not(.disabled):not(.loading):active { color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet)); background-color: color-mix(
        in oklab,
        var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
        var(--wa-color-mix-active)
      ); }
}
:host([appearance="filled"]) {
  margin-inline-start: var(--_button-horizontal-indent); margin-block-start: var(--_button-vertical-indent);
  & .button { color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal)); background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)); border-color: transparent; }
  @media (hover: hover) {
  & .button:not(.disabled):not(.loading):hover { color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal)); background-color: color-mix(
          in oklab,
          var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
          var(--wa-color-mix-hover)
        ); }
}
  & .button:not(.disabled):not(.loading):active { color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal)); background-color: color-mix(
        in oklab,
        var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
        var(--wa-color-mix-active)
      ); }
}
:host([appearance="filled-outlined"]) {
  margin-inline-start: var(--_button-horizontal-indent-outlined); margin-block-start: var(--_button-vertical-indent-outlined);
  & .button { color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal)); background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)); border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal)); }
  @media (hover: hover) {
  & .button:not(.disabled):not(.loading):hover { color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal)); background-color: color-mix(
          in oklab,
          var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
          var(--wa-color-mix-hover)
        ); }
}
  & .button:not(.disabled):not(.loading):active { color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal)); background-color: color-mix(
        in oklab,
        var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
        var(--wa-color-mix-active)
      ); }
}
:host([appearance="accent"]) {
  margin-inline-start: var(--_button-horizontal-indent); margin-block-start: var(--_button-vertical-indent);
  & .button { color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud)); background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)); border-color: transparent; }
  @media (hover: hover) {
  & .button:not(.disabled):not(.loading):hover { background-color: color-mix(
          in oklab,
          var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
          var(--wa-color-mix-hover)
        ); }
}
  & .button:not(.disabled):not(.loading):active { background-color: color-mix(
        in oklab,
        var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
        var(--wa-color-mix-active)
      ); }
}
.button:focus { outline: none; }
.button:focus-visible { outline: var(--wa-focus-ring); outline-offset: var(--wa-focus-ring-offset); }
:host([disabled]) {
  opacity: 0.5; cursor: not-allowed;
  & .button { pointer-events: none; }
}
.button.is-icon-button { outline-offset: 2px; width: var(--wa-form-control-height); aspect-ratio: 1 / 1; }
.button.is-icon-button.caret { width: auto; aspect-ratio: auto; min-width: var(--wa-form-control-height); }
:host([pill]) .button { border-start-start-radius: var(--_button-start-start-radius, var(--wa-border-radius-pill)); border-start-end-radius: var(--_button-start-end-radius, var(--wa-border-radius-pill)); border-end-start-radius: var(--_button-end-start-radius, var(--wa-border-radius-pill)); border-end-end-radius: var(--_button-end-end-radius, var(--wa-border-radius-pill)); }
.start, .end { flex: 0 0 auto; display: flex; align-items: center; pointer-events: none; }
.label { display: inline-block; }
.is-icon-button .label { display: flex; }
.label::slotted(wa-icon) { align-self: center; }
wa-icon[part="caret"] {
  display: flex; align-self: center; align-items: center;
  &::part(svg) { width: 0.875em; height: 0.875em; }
  .button:has(&) .end { display: none; }
}
.loading {
  position: relative; cursor: wait;
  & .start, & .label, & .end, & .caret { visibility: hidden; }
  & wa-spinner { --indicator-color: currentColor; --track-color: color-mix(in oklab, currentColor, transparent 90%); position: absolute; font-size: 1em; height: 1em; width: 1em; top: calc(50% - 0.5em); left: calc(50% - 0.5em); }
}
.button ::slotted(wa-badge) { border-color: var(--wa-color-surface-default); position: absolute; inset-block-start: 0px; inset-inline-end: 0px; translate: 50% -50%; pointer-events: none; }
:host(:dir(rtl)) ::slotted(wa-badge) { translate: -50% -50%; }
slot[name="start"]::slotted(*) { margin-inline-end: 0.75em; }
slot[name="end"]::slotted(*), .button:not(.visually-hidden-label) [part="caret"] { margin-inline-start: 0.75em; }
: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([size="xs"]) { font-size: var(--wa-font-size-xs); }
:host([size="s"]), :host([size="small"]) { font-size: var(--wa-font-size-s); }
:host([size="m"]), :host([size="medium"]) { font-size: var(--wa-font-size-m); }
:host([size="l"]), :host([size="large"]) { font-size: var(--wa-font-size-l); }
:host([size="xl"]) { font-size: var(--wa-font-size-xl); }