@keyframes loading-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
button:disabled {
  background: var(--color-gray-300);
  cursor: not-allowed;
}

button.with-spinner {
  --spinner-size: 30px;
  --spinner-width: 4px;

  &:not([data-loading-relative]) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &[data-loading-relative] {
    position: relative;

    &::after {
      position: absolute;
      right: 0;
      top: calc(50% - var(--spinner-size) / 2);
    }
  }

  &::before,
  &::after {
    content: '';
    width: var(--spinner-size);
    height: var(--spinner-size);
    margin: 0 0.5em;
  }

  &::after {
    display: inline-block;
    border: var(--spinner-width) solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: loading-spinner 1s linear infinite;
  }
}