/* Action feedback. Selection lenses and navigation are managed separately. */
[data-liquid-action] {
  position: relative;
  transform-origin: center;
  transform: translate3d(var(--la-x, 0px), var(--la-y, 0px), 0)
    scale(var(--la-sx, 1), var(--la-sy, 1)) !important;
  /* Do not put a CSS interpolation behind the gesture-driven spring. */
  transition: background-color 140ms ease, color 140ms ease,
    border-color 140ms ease, box-shadow 140ms ease !important;
}

[data-liquid-action]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--la-glow, 0);
  background: radial-gradient(
    circle var(--la-light-size, 90px) at var(--la-light-x, 50%) var(--la-light-y, 50%),
    rgb(255 255 255 / .38), rgb(255 255 255 / .08) 45%, transparent 78%
  );
  box-shadow: inset 0 1.5px 1px rgb(255 255 255 / .8),
    inset 0 -1px 1px rgb(255 255 255 / .28),
    0 3px 10px rgb(38 54 44 / .08);
}

[data-liquid-action][data-liquid-action-moving] {
  will-change: transform;
}

/* Preserve the existing dialog positioning and native summary marker layout. */
.close-button[data-liquid-action] { position: absolute; }
.rail-top[data-liquid-action]::after { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  [data-liquid-action] {
    transform: none !important;
    transition: none !important;
  }
}