/* Keep the original button nodes, submitter value, layout and feature-owned state. */
button[data-rsf-state] {
  position: relative;
  min-inline-size: min(var(--rsf-min-width), 100%);
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
button[data-rsf-state] > * { visibility: hidden; }
button[data-rsf-state]::after {
  content: attr(data-rsf-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  border-radius: inherit;
  color: var(--rsf-ink) !important;
  -webkit-text-fill-color: var(--rsf-ink) !important;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: normal;
  pointer-events: none;
  box-sizing: border-box;
}
button[data-rsf-state="saving"]::after { animation: rsf-saving 180ms ease-out both; }
button[data-rsf-state="saved"]::after { animation: rsf-saved 180ms ease-out both; }
@keyframes rsf-saving { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rsf-saved { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.rsf-announcer, .rsf-measure {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.rsf-measure { width: auto; height: auto; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  button[data-rsf-state]::after { animation: none !important; }
}