/* Small feedback for deliberate actions; leaves the existing garden motion in charge of page entrances. */
:is(.button, .chip, .note-chip, .counter-chip):focus-visible {
  outline: max(2px, .09em) solid var(--ink);
  outline-offset: 3px;
}

:is(.chip, .note-chip, .counter-chip)[aria-pressed="true"] {
  box-shadow: inset 0 -.14em currentColor;
}

:is([data-advisor], [data-soil], [data-cart-selection]) .button[aria-busy="true"],
[data-counter-form][aria-busy="true"] button[type="submit"] {
  cursor: progress;
  opacity: 1;
}

[data-advisor="flowers"] .button { --action-icon: url("interaction/bloom.svg"); }
[data-advisor="plants"] .button,
[data-counter-form] button[type="submit"],
[data-soil] .button { --action-icon: url("interaction/sprout.svg"); }
[data-cart-selection] button { --action-icon: url("interaction/calendar.svg"); }

:is([data-advisor], [data-counter-form], [data-soil], [data-cart-selection]) .button::before {
  content: "";
  flex: none;
  inline-size: 1.2em;
  block-size: 1.2em;
  background: var(--action-icon-ink, currentColor);
  mask: var(--action-icon) center / contain no-repeat;
}

:is([data-advisor], [data-counter-form], [data-soil], [data-cart-selection]) .button:not(.secondary)::before {
  --action-icon-ink: var(--gold);
}

:is([data-advisor], [data-counter-form], [data-soil], [data-cart-selection]) .button[aria-busy="true"],
[data-counter-form][aria-busy="true"] button[type="submit"] {
  --action-icon: url("interaction/sprout.svg");
}

/* Reuse the leading mark for this wait state and reserve the trailing arrow's space. */
:is([data-advisor], [data-soil], [data-cart-selection]) .button[aria-busy="true"]::after { content: none; }
:is([data-advisor], [data-soil], [data-cart-selection]) .button[aria-busy="true"] > .zf-icon {
  display: block;
  visibility: hidden;
}

@media (forced-colors: active) {
  :is([data-advisor], [data-counter-form], [data-soil], [data-cart-selection]) .button::before {
    forced-color-adjust: none;
    background: ButtonText;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.chip, .counter-chip) {
    transition: transform 140ms var(--ease-out);
  }

  :is(.chip, .counter-chip):active:not(:focus-visible, :disabled, [aria-disabled="true"]) {
    transform: scale(.97);
  }

  :is([data-advisor], [data-counter-form], [data-soil], [data-cart-selection]) .button::before {
    transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out);
  }

  :is([data-advisor], [data-counter-form], [data-soil], [data-cart-selection]) .button[aria-busy="true"]::before,
  [data-counter-form][aria-busy="true"] button[type="submit"]::before {
    opacity: .64;
    transform: scale(.95);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  :is([data-advisor], [data-counter-form], [data-soil], [data-cart-selection]) .button:hover:not(:disabled, [aria-busy="true"])::before {
    transform: translateY(-.10em);
  }
}