/* Shared tactile feedback. Motion stays inside each control's existing box. */
:where(button:not(.password-guardian), .button) {
  position: relative;
}
:is(button:not(.password-guardian), .button) {
  isolation: isolate;
  overflow: hidden;
  transition: background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, color 180ms ease, transform 160ms ease;
}
.button.primary:not(.logout-button)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% -25%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, #fff1d21c 49%, transparent 66%);
  transform: translateX(-105%);
}
:is(button:not(.password-guardian), .button):focus-visible {
  outline: 2px solid #e1c59b;
  outline-offset: 4px;
}
:is(button:not(.password-guardian), .button):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(.985);
  transition-duration: 80ms;
}
.button > svg { transition: transform 220ms ease, opacity 160ms ease; }

@media (hover: hover) and (pointer: fine) {
  .button.primary:not(.logout-button):not(:disabled):not([aria-disabled="true"]):hover::before {
    transform: translateX(105%);
    transition: transform 650ms cubic-bezier(.2, .65, .35, 1);
  }
  .button.primary:not(:disabled):not([aria-disabled="true"]):hover {
    transform: none;
    box-shadow: 0 0 24px #d4bd8f20;
  }
  .button.secondary:not(.logout-button):not(:disabled):not([aria-disabled="true"]):hover {
    transform: none;
    box-shadow: inset 3px 0 0 #d4bd8f80;
  }
  .text-link:not(button):hover {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

  .icon-button > svg {transition:transform 180ms ease}
  .button:not(:disabled):not([aria-disabled="true"]):hover > svg:last-child {
    transform: translateX(2px);
  }
  .button:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px) scale(.985); }
}

.button-ripple {
  position: absolute;
  left: var(--ripple-x);
  top: var(--ripple-y);
  width: var(--ripple-size);
  height: var(--ripple-size);
  z-index: 2;
  border-radius: 50%;
  background: #ead5b035;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: umbra-button-ripple 570ms cubic-bezier(.16, .75, .25, 1) forwards;
}
.button.primary .button-ripple { background: #fff5db57; }
:is(button, .button).is-submitting {
  cursor: progress;
  opacity: .85;
  transform: none;
}
:is(button, .button).is-submitting::before { display: none; }
:is(button, .button).is-submitting::after {
  content: "";
  position: absolute;
  left: calc(50% - 7px);
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1.5px solid #d8c29e4d;
  border-top-color: #e8d4af;
  border-radius: 50%;
  pointer-events: none;
  animation: umbra-button-pending 850ms linear infinite;
}
:is(button, .button).is-submitting:not(.has-pending-label) { color: transparent; }
:is(button, .button).is-submitting:not(.has-pending-label) > * { opacity: 0; }
:is(button, .button).is-submitting.has-pending-label::after { left: auto; right: 20px; }
:is(button, .button).is-submitting.has-pending-label > svg { opacity: 0; }
.button.primary.is-submitting::after { border-color: #28332738; border-top-color: #283327; }
:is(button:disabled, .button[aria-disabled="true"]):not(.is-submitting) { transform: none; }
:is(button:disabled, .button[aria-disabled="true"])::before { display: none; }
.button.primary:is(:disabled, [aria-disabled="true"]):hover { background: var(--gold); border-color: var(--gold); }
.button.secondary:is(:disabled, [aria-disabled="true"]):hover { background: #1d1e1b; border-color: #41423b; }



/* Keep the full cat touch target and entered text in separate parts of the field. */
.password-input > input { min-height: 54px; padding-right: 80px; }
.password-input > .password-guardian { flex-shrink: 0; }
.password-input.password-input--profile { margin-bottom: 20px; }

@keyframes umbra-button-ripple {
  0% { opacity: .65; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes umbra-button-pending { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  :is(button:not(.password-guardian), .button),
  :is(button:not(.password-guardian), .button)::before,
  :is(button:not(.password-guardian), .button)::after,
  .button > svg {
    transition: none !important;
    animation: none !important;
  }
  .icon-button > svg {transition:none!important}
  .icon-button:hover > svg {transform:none!important}
  :is(button:not(.password-guardian), .button):hover,
  :is(button:not(.password-guardian), .button):active,
  .button:hover > svg:last-child { transform: none !important; }
  :is(button:not(.password-guardian), .button)::before,
  .button-ripple { display: none; }
}

@media (forced-colors: active) {
  :is(button:not(.password-guardian), .button)::before,
  .button-ripple { display: none; }
  :is(button, .button).is-submitting::after { border-color: GrayText; border-top-color: ButtonText; }
  :is(button:not(.password-guardian), .button):focus-visible { outline-color: Highlight; }
}