:is(button, input:where([type='button'], [type='reset'], [type='submit'])):where(:not(:host *)),
:host,
.wa-button:where(:not([part~='base'])) {
  --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
  --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
  --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));

  --border-color: transparent;
  --border-color-hover: var(--border-color);
  --border-color-active: var(--border-color);
  --border-width: max(1px, var(--wa-form-control-border-width));

  --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
  --text-color-hover: var(--text-color);
  --text-color-active: var(--text-color);

  /* These allow button groups to zero out border-radius on the first and last buttons */
  border-start-start-radius: var(
    /* top left */ --wa-border-block-start-radius,
    var(--wa-border-inline-start-radius, var(--wa-form-control-border-radius))
  );
  border-start-end-radius: var(
    /* top right */ --wa-border-block-start-radius,
    var(--wa-border-inline-end-radius, var(--wa-form-control-border-radius))
  );
  border-end-start-radius: var(
    /* bottom left */ --wa-border-block-end-radius,
    var(--wa-border-inline-start-radius, var(--wa-form-control-border-radius))
  );
  border-end-end-radius: var(
    /* bottom right */ --wa-border-block-end-radius,
    var(--wa-border-inline-end-radius, var(--wa-form-control-border-radius))
  );

  border-style: var(--wa-border-style);
  border-width: var(--border-width);
  align-items: center;
  justify-content: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  vertical-align: middle;
  transition-property: background, border, box-shadow, color;
  transition-duration: var(--wa-transition-fast);
  transition-timing-function: var(--wa-transition-easing);
  cursor: pointer;
  padding: 0 var(--wa-space, var(--wa-space-m));
  font-family: inherit;
  font-size: var(--wa-size, var(--wa-font-size-m));
  font-weight: var(--wa-font-weight-action);
  height: var(--wa-form-control-height);
  line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
}

button,
input:is([type='button'], [type='reset'], [type='submit']),
:host([href]) a,
.wa-button:not([part~='base']) {
  display: inline-flex;
  background-color: var(--background-color);
  border-color: var(--border-color, var(--background-color));
  color: var(--text-color);

  /* Interactive */
  &:where(:not(:disabled, [disabled], :host([disabled]) *, .loading)) {
    &:hover {
      background-color: var(--background-color-hover, var(--background-color));
      border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
      color: var(--text-color-hover, var(--text-color));
    }

    &:active {
      background-color: var(--background-color-active, var(--background-color));
      border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
      color: var(--text-color-active, var(--text-color));
    }
  }

  /*
   * States
   */

  &::-moz-focus-inner {
    border: 0;
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: var(--wa-focus-ring);
    outline-offset: var(--wa-focus-ring-offset);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;

    /* When disabled, prevent mouse events from bubbling up from children */
    * {
      pointer-events: none;
    }
  }
}

/**
 * Utilities
 */

/* Styles */

.wa-pill,
:host([pill]) {
  border-radius: var(--wa-border-radius-pill);
}
