.woswidgets-save-button {
  --easing: cubic-bezier(1, -0.4, 0.35, 0.95);
  --duration: 0.35s;

  position: relative;
  transition:
    width var(--duration) var(--easing),
    background var(--duration) ease-out,
    color 0.1s ease-out;
  width: calc-size(max-content, size);
  white-space: nowrap;
}

.woswidgets-save-button[data-save-state="loading"] {
  background-color: var(--accent-8);
}

.woswidgets-save-button[data-save-state="done"] {
  width: 80px;
  background-color: var(--success-color, var(--green-10));
}

.woswidgets-save-button[data-save-state="loading"],
.woswidgets-save-button[data-save-state="done"] {
  color: transparent;
  pointer-events: none;
}

.woswidgets-save-button[data-save-state="loading"] > * {
  color: var(--accent-contrast);
}

.woswidgets-save-button[data-save-state="done"] > * {
  color: var(--accent-contrast);
}

.woswidgets-save-button__done-icon,
.woswidgets-save-button__done-text {
  transition:
    transform var(--duration) var(--easing),
    opacity var(--duration) var(--easing);
  opacity: 1;
  transform: translateX(0px);
}

@media (prefers-reduced-motion: no-preference) {
  .woswidgets-save-button__done-icon {
    @starting-style {
      opacity: 0;
      transform: translateX(10px);
    }
  }

  .woswidgets-save-button__done-text {
    @starting-style {
      opacity: 0;
      transform: translateX(-10px);
    }
  }
}