@layer ari.components {
  .ari-button {
    --ari-button-height: var(--ari-control-height-md);
    --ari-button-padding-block: var(--ari-space-2);
    --ari-button-padding-inline: var(--ari-space-4);
    --ari-button-gap: var(--ari-space-2);
    --ari-button-bg: var(--ari-color-action-secondary-bg);
    --ari-button-bg-hover: var(--ari-color-action-secondary-hover);
    --ari-button-border: var(--ari-color-action-secondary-border);
    --ari-button-border-hover: var(--ari-color-action-secondary-border);
    --ari-button-text: var(--ari-color-action-secondary-text);
    --ari-button-focus-border: var(--ari-color-border-focus);
    --ari-button-focus-shadow: var(--ari-shadow-focus);

    min-block-size: var(--ari-button-height);
    inline-size: fit-content;
    max-inline-size: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ari-button-gap);
    box-sizing: border-box;
    padding:
      var(--ari-button-padding-block)
      var(--ari-button-padding-inline);
    border:
      var(--ari-border-width-default)
      solid
      var(--ari-button-border);
    border-radius: var(--ari-radius-sm);
    background: var(--ari-button-bg);
    color: var(--ari-button-text);
    font-family: var(--ari-font-family-sans);
    font-size: var(--ari-font-size-control);
    font-weight: var(--ari-font-weight-medium);
    line-height: var(--ari-line-height-compact);
    text-align: center;
    text-decoration: none;
    white-space: normal;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition:
      background-color
      var(--ari-motion-duration-normal)
      var(--ari-motion-easing-standard),
      border-color
      var(--ari-motion-duration-normal)
      var(--ari-motion-easing-standard),
      color
      var(--ari-motion-duration-normal)
      var(--ari-motion-easing-standard),
      transform
      var(--ari-motion-duration-fast)
      var(--ari-motion-easing-standard);
  }

  .ari-button--primary {
    --ari-button-bg: var(--ari-color-action-primary);
    --ari-button-bg-hover: var(--ari-color-action-primary-hover);
    --ari-button-border: var(--ari-color-action-primary);
    --ari-button-border-hover: var(--ari-color-action-primary-hover);
    --ari-button-text: var(--ari-color-text-inverse);
  }

  .ari-button--secondary {
    --ari-button-bg: var(--ari-color-action-secondary-bg);
    --ari-button-bg-hover: var(--ari-color-action-secondary-hover);
    --ari-button-border: var(--ari-color-action-secondary-border);
    --ari-button-border-hover: var(--ari-color-action-secondary-border);
    --ari-button-text: var(--ari-color-action-secondary-text);
  }

  .ari-button--quiet {
    --ari-button-bg: var(--ari-color-action-quiet-bg);
    --ari-button-bg-hover: var(--ari-color-action-quiet-hover);
    --ari-button-border: var(--ari-color-action-quiet-border);
    --ari-button-border-hover: var(--ari-color-action-quiet-border);
    --ari-button-text: var(--ari-color-action-quiet-text);
  }

  .ari-button--danger {
    --ari-button-bg: var(--ari-color-action-danger);
    --ari-button-bg-hover: var(--ari-color-action-danger-hover);
    --ari-button-border: var(--ari-color-action-danger-border);
    --ari-button-border-hover: var(--ari-color-action-danger-hover);
    --ari-button-text: var(--ari-color-action-danger-text);
  }

  .ari-button--sm {
    --ari-button-height: var(--ari-control-height-sm);
    --ari-button-padding-block: var(--ari-space-1);
    --ari-button-padding-inline: var(--ari-space-3);
    --ari-button-gap: var(--ari-space-1);
  }

  .ari-button--md {
    --ari-button-height: var(--ari-control-height-md);
    --ari-button-padding-block: var(--ari-space-2);
    --ari-button-padding-inline: var(--ari-space-4);
    --ari-button-gap: var(--ari-space-2);
  }

  .ari-button--lg {
    --ari-button-height: var(--ari-control-height-lg);
    --ari-button-padding-block: var(--ari-space-2);
    --ari-button-padding-inline: var(--ari-space-5);
    --ari-button-gap: var(--ari-space-2);
  }

  .ari-button--icon-only {
    inline-size: var(--ari-button-height);
    flex: 0 0 var(--ari-button-height);
    padding-inline: var(--ari-space-1);
  }

  .ari-button__label {
    min-inline-size: 0;
  }

  /* Approved Controls: official icon slot and explicit Add action. */
  .ari-button__icon {
    inline-size: var(--ari-icon-size-sm);
    block-size: var(--ari-icon-size-sm);
    display: inline-grid;
    place-items: center;
    flex: 0 0 var(--ari-icon-size-sm);
    line-height: 0;
    pointer-events: none;
  }

  .ari-button__icon[hidden] {
    display: none;
  }

  .ari-button__icon > .ari-icon {
    inline-size: 100%;
    block-size: 100%;
    display: block;
    vertical-align: 0;
  }

  /* Exact /works interaction, scoped to the icon-only Add host.
     ARI Icon owns the plus rotation through its motion host. */
  .ari-button--add-icon-action {
    --ari-button-bg-hover:
      color-mix(
        in srgb,
        var(--ari-color-action-primary) 5%,
        var(--ari-color-action-secondary-bg)
      );
    --ari-button-border-hover:
      color-mix(
        in srgb,
        var(--ari-color-action-primary) 28%,
        var(--ari-color-action-secondary-border)
      );

    transition:
      border-color 150ms ease,
      background-color 150ms ease,
      color 150ms ease,
      transform 150ms ease;
  }

  .ari-button[aria-busy="true"] .ari-button__label {
    opacity: 0.82;
  }

  .ari-button:hover:not(:disabled):not([aria-busy="true"]) {
    border-color: var(--ari-button-border-hover);
    background: var(--ari-button-bg-hover);
  }

  .ari-button:active:not(:disabled):not([aria-busy="true"]) {
    transform: scale(.98);
  }

  .ari-button:focus-visible {
    outline: 0;
    border-color: var(--ari-button-focus-border);
    box-shadow: var(--ari-button-focus-shadow);
  }

  .ari-button--add-icon-action:hover:not(:disabled):not([aria-busy="true"]),
  .ari-button--add-icon-action:focus-visible:not(:disabled):not([aria-busy="true"]) {
    border-color: var(--ari-button-border-hover);
    background: var(--ari-button-bg-hover);
    color: var(--ari-color-action-primary);
    transform: translateY(-1px);
  }

  .ari-button--add-icon-action:focus-visible:not(:disabled):not([aria-busy="true"]) {
    box-shadow: var(--ari-button-focus-shadow);
  }

  .ari-button--add-icon-action:active:not(:disabled):not([aria-busy="true"]) {
    transform: translateY(0);
  }

  .ari-button:disabled {
    border-color: var(--ari-color-border-default);
    background: var(--ari-color-bg-disabled);
    color: var(--ari-color-text-disabled);
    cursor: not-allowed;
    transform: none;
  }

  .ari-button[aria-busy="true"] {
    pointer-events: none;
  }

  .ari-button:disabled[aria-busy="true"] {
    border-color: var(--ari-button-border);
    background: var(--ari-button-bg);
    color: var(--ari-button-text);
    opacity: 1;
    cursor: progress;
  }

  .ari-button[aria-busy="true"]::before {
    content: "";
    inline-size: 1em;
    block-size: 1em;
    flex: 0 0 auto;
    box-sizing: border-box;
    border:
      var(--ari-border-width-default)
      solid
      currentColor;
    border-inline-end-color: var(--ari-color-transparent);
    border-radius: var(--ari-radius-pill);
    animation:
      ari-button-progress
      var(--ari-motion-duration-slow)
      linear
      infinite;
  }

  @keyframes ari-button-progress {
    to {
      transform: rotate(1turn);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer ari.components {
    .ari-button {
      transition: none;
    }

    .ari-button--add-icon-action {
      transition: none;
    }

    .ari-button--add-icon-action:hover:not(:disabled):not([aria-busy="true"]),
    .ari-button--add-icon-action:focus-visible:not(:disabled):not([aria-busy="true"]),
    .ari-button--add-icon-action:active:not(:disabled):not([aria-busy="true"]) {
      transform: none;
    }

    .ari-button[aria-busy="true"]::before {
      animation: none;
    }
  }

}
@layer ari.components {
  .ari-button[data-ari-indicator="true"] {
    position: relative;
  }

  .ari-button[data-ari-indicator="true"]::after {
    content: "";
    position: absolute;
    z-index: 1;
    inline-size: 6px;
    block-size: 6px;
    inset-block-start: 5px;
    inset-inline-end: 5px;
    border-radius: var(--ari-radius-pill);
    background: var(--ari-color-action-primary);
    box-shadow:
      0 0 0 2px var(--ari-color-bg-surface);
    pointer-events: none;
  }
}