.is-button-loading {
  position: var(--button-loading-position, relative) !important;
  opacity: var(--button-loading-opacity, 1) !important;
  cursor: wait !important;
  pointer-events: none;
}

.is-button-loading [data-button-loading-icon] {
  visibility: hidden !important;
}

.is-button-loading[data-button-loading-visual='icon']::before {
  content: '';
  position: absolute;
  top: calc(var(--button-loading-icon-y) - var(--button-loading-icon-size) / 2);
  left: calc(var(--button-loading-icon-x) - var(--button-loading-icon-size) / 2);
  width: var(--button-loading-icon-size);
  height: var(--button-loading-icon-size);
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  pointer-events: none;
  animation: button-loading-spin .75s linear infinite;
}

.is-button-loading[data-button-loading-visual='background'] {
  background: var(--button-loading-background) !important;
}

.button-loading-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@keyframes button-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .is-button-loading[data-button-loading-visual='icon']::before { animation: none; }
}