/* Shared interaction feedback. Loaded last in both portal shells.
 * Colors, type and timings belong to design-system.css. Only actual controls
 * react; cards, document contents and drag geometry remain stationary. */
.ui-v2 :is(button, a, summary, input, select, textarea) {
  transition: color var(--ui-motion-fast) var(--ui-ease-standard),
    background-color var(--ui-motion-fast) var(--ui-ease-standard),
    border-color var(--ui-motion-fast) var(--ui-ease-standard),
    text-decoration-color var(--ui-motion-fast) var(--ui-ease-standard);
}
.ui-v2 :is(.ui-button, .btn) {
  transition: color var(--ui-motion-fast) var(--ui-ease-standard),
    background-color var(--ui-motion-fast) var(--ui-ease-standard),
    border-color var(--ui-motion-fast) var(--ui-ease-standard),
    transform var(--ui-motion-fast) var(--ui-ease-nav-out);
}
.ui-v2 :is(.ui-button, .btn):where(:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([draggable="true"])):active {
  transform: translateY(.0625rem);
}
.ui-v2 :is(.ui-button, .btn):is(:disabled, [aria-disabled="true"]) {
  transform: none;
}
/* Portalled panels no longer inherit sidebar feedback. Focus rings stay instant. */
.ui-v2 :is(.ws-sb__tenant, .ws-menu__item, .ws-tenant-options a, .ws-tenant-more,
  .notice-item, .notice-panel__all, .notice-panel__more, .notice-panel__toggle,
  .home-ask__composer, .ws-tenant-search) {
  transition: color var(--ui-motion-fast) var(--ui-ease-standard),
    background-color var(--ui-motion-fast) var(--ui-ease-standard),
    border-color var(--ui-motion-fast) var(--ui-ease-standard);
}
.ui-v2 .ws-sb__tenant-switch .i {
  transition: transform var(--ui-motion-nav) var(--ui-ease-nav-in);
}
@media (hover: hover) {
  .ui-v2 :is(.home-tabs a, .home-chart > summary):hover { color: var(--ui-action-primary); }
}
/* Never let a shared button rule shift a tree hit target during a pointer drag. */
.ui-v2 .is-drag-live :is(button, a),
.ui-v2 .is-dragging {
  transition: none;
}
.ui-v2 .is-drag-live :is(.ui-button, .btn):active { transform: none; }
/* Request state is decoration inside the existing box. Icon tooltip pseudo
 * elements remain free; the owner's SVG, label and live status stay intact. */
.ui-v2 [data-ui-action-state] { position: relative; }
.ui-v2 [data-ui-action-state="pending"] { cursor: progress; }
.ui-v2 :is(.ui-button, .btn)[data-ui-action-state="pending"] {
  outline: var(--ui-border-width) solid currentColor;
  outline-offset: calc(-1 * var(--ui-border-width));
}
.ui-v2 .ui-action-indicator { display: none; pointer-events: none; }
.ui-v2 .ui-button--icon[data-ui-action-state] > .ui-action-indicator {
  display: block;
  position: absolute;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
}
.ui-v2 .ui-button--icon[data-ui-action-state] > svg { opacity: 0; }
.ui-v2 .ui-button--icon[data-ui-action-state="pending"] > .ui-action-indicator {
  border: calc(2 * var(--ui-border-width)) solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--ui-radius-pill);
  animation: ui-action-spin var(--ui-motion-pulse-fast) linear infinite;
}
.ui-v2 [data-ui-action-state="success"] > .ui-action-indicator { color: var(--ui-success-default); }
.ui-v2 [data-ui-action-state="error"] > .ui-action-indicator { color: var(--ui-danger-default); }
.ui-v2 .ui-button--primary[data-ui-action-state] > .ui-action-indicator,
.ui-v2 .ui-button--danger[data-ui-action-state] > .ui-action-indicator { color: currentColor; }
.ui-v2 [data-ui-action-state="success"] > .ui-action-indicator::before {
  content: '';
  position: absolute;
  inset-inline-start: 30%;
  inset-block-start: 5%;
  inline-size: 35%;
  block-size: 65%;
  border: solid currentColor;
  border-width: 0 calc(2 * var(--ui-border-width)) calc(2 * var(--ui-border-width)) 0;
  transform: rotate(45deg);
}
.ui-v2 [data-ui-action-state="error"] > .ui-action-indicator {
  border: calc(2 * var(--ui-border-width)) solid currentColor;
  border-radius: var(--ui-radius-pill);
}
.ui-v2 [data-ui-action-state="error"] > .ui-action-indicator::before,
.ui-v2 [data-ui-action-state="error"] > .ui-action-indicator::after {
  content: '';
  position: absolute;
  inset-inline-start: calc(50% - var(--ui-border-width));
  inline-size: calc(2 * var(--ui-border-width));
  background: currentColor;
}
.ui-v2 [data-ui-action-state="error"] > .ui-action-indicator::before { inset-block-start: 15%; block-size: 40%; }
.ui-v2 [data-ui-action-state="error"] > .ui-action-indicator::after { inset-block-end: 15%; block-size: calc(2 * var(--ui-border-width)); }
.ui-v2 .ui-action-status { margin-block: var(--ui-space-2); color: var(--ui-fg-muted); font-size: var(--ui-type-label); line-height: var(--ui-line-body); }
@keyframes ui-action-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ui-v2 *, .ui-v2 *::before, .ui-v2 *::after, .ui-v2 dialog::backdrop {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .ui-v2 :is(.ui-button, .btn):is(:hover, :active) { transform: none; }
}
