button,
.button {
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .08s ease, box-shadow .14s ease;
}

button:hover,
.button:hover {
  background: #f0edf8;
  border-color: #d5c8e6;
  color: #6b36a8;
}

.primary:hover {
  background: #5f2e96;
  border-color: #5f2e96;
  color: #fff;
}

button:active,
.button:active,
button.is-pressed,
.button.is-pressed {
  background: #e8e0f4;
  border-color: #c6b2df;
  color: #6b36a8;
  box-shadow: inset 0 2px 5px rgb(61 31 92 / 16%);
  transform: translateY(1px);
}

button.is-loading,
.button.is-loading {
  background: #f0edf8 !important;
  border-color: #c6b2df !important;
  color: #6b36a8 !important;
  cursor: wait;
  opacity: 1;
}

.button-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin .7s linear infinite;
}

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

.page-notice {
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid #b8ddc3;
  border-radius: 12px;
  background: #edf8f0;
  color: #245b33;
  font-weight: 700;
}

.page-notice.info {
  border-color: #d5c8e6;
  background: #f0edf8;
  color: #633397;
}

.page-notice.danger {
  border-color: #efc2c2;
  background: #fff1f1;
  color: #9d2929;
}

.danger-button:hover,
.danger-button:active,
.danger-button.is-pressed {
  border-color: #8f1f29;
  background: #8f1f29;
  color: #fff;
}

.link-button:hover,
.link-button:active,
.link-button.is-pressed {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  transform: none;
}