@import url('/lib/components/at-loader/at-loader.css');

form > [role="status"]:empty { display: none; }

button[data-submit-state] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;

  &[data-submit-state="pending"] {
    position: relative; cursor: wait;

    & > span { display: contents; visibility: hidden; }
    & > .at-loader { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; }
  }
  &[data-submit-state="success"] {
    background: var(--success, #16803c);
    border-color: var(--success, #16803c); color: white;
    cursor: default; opacity: 1; transition: none;
  }

  & .at-loader { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  button[data-submit-state] .at-loader { animation: none; }
}