.button,
input[type="submit"] {
  --button-text: var(--color-white);
  --button-bg: var(--color-black);
  --button-disabled-bg: var(--color-grey-300);
  --button-disabled-text: var(--color-grey-500);
  --button-border-size: 2px;
}

@media (prefers-color-scheme: dark) {
  .button,
  input[type="submit"] {
    --button-text: var(--color-black);
    --button-bg: var(--color-white);
    --button-disabled-text: var(--color-grey-500);
  }
}

.button,
a.button,
input[type="submit"] {
  display: inline-block;
  background: none;
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  outline: none;
  padding: var(--size-3) var(--size-4);
  font-size: var(--scale-1);
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

input[type="submit"] {
  min-width: var(--size-32);
}

.button.is-sm,
a.button.is-sm,
input[type="submit"].is-sm {
  padding: var(--size-2) var(--size-3);
  font-size: var(--scale-0);
}

.button.is-xs,
a.button.is-xs,
input[type="submit"].is-xs {
  padding: var(--size-2) var(--size-2);
  font-size: var(--scale-00);
}

.button.is-outlined,
a.button.is-outlined,
input[type="submit"].is-outlined {
  background: none;
  background-color: transparent;
  color: var(--button-bg);
  border: var(--button-border-size) solid var(--button-bg);
}

.button[disabled],
input[type="submit"][disabled] {
  color: var(--button-disabled-text);
  background-color: var(--button-disabled-bg);
}

.button.is-link,
a.button.is-link {
  padding: 0;
  align-self: anchor-center;
  line-height: 1.4;
  border-bottom: 2px solid var(--color-text);
  text-decoration: none;
  background-color: var(--color-bg);
  color: var(--color-text);
}

.button-group .button,
.button-group a.button,
.button-group input[type="submit"] {
  border-right: 0;
}

.button-group .button:last-child,
.button-group a.button:last-child,
.button-group input[type="submit"]:last-child {
  border-right: var(--button-border-size) solid var(--button-bg);
}

.button > svg,
a.button > svg,
input[type="submit"] > svg,
.button__icon {
  fill: var(--button-text);
  width: 1em;
  height: 1em;
}

.button.is-outlined > svg,
.button.is-outlined .button__icon {
  fill: var(--button-bg);
}

.button > svg:last-child,
a.button > svg:last-child,
input[type="submit"] > svg:last-child,
.button__icon:last-child {
  margin-left: var(--size-1);
}

.button > svg:first-child,
a.button > svg:first-child,
input[type="submit"] > svg:first-child,
.button__icon:first-child {
  margin-left: var(--size-1);
}

.button.is-busy,
a.button.is-busy,
input[type="submit"].is-busy {
  background-color: var(--button-disabled-bg);
  color: var(--button-disabled-text);
  cursor: wait;
  position: relative;
  padding-left: var(--size-10);
}

.button.is-busy::after,
a.button.is-busy::after,
input[type="submit"].is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.2em;
  width: 1em;
  height: 1em;
  margin-top: -0.6em;
  margin-left: -0.5em;
  border: 2px solid var(--button-disabled-text);
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-busy-spin 1.6s linear infinite;
}

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