body {
  margin: 2rem;
  font-family: Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, sans-serif;
}

h2 {
  margin-top: 0;
}

section {
  border-bottom: 2px solid;
  margin: 2rem 0;
  padding-bottom: 2rem;
}

button {
  cursor: pointer;
  min-width: 8rem;
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }

  button:hover {
    transform: none;
  }
}
@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes substrate-button-activate {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(.95);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes spin {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(0);
    }
  }

  @keyframes spinner {
    to {
      transform: rotate(0);
    }
  }

  @keyframes substrate-button-activate {
    0%, 50%, 100% {
      transform: scale(1);
    }
  }
}

substrate-button {
  -webkit-user-select: none;
  user-select: none;
  min-width: 8rem;
  transition: all .3s;
  display: inline-block;
}

substrate-button button {
  transition: all .3s;
}

substrate-button button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #00000026;
}

substrate-button.substrate-loading {
  pointer-events: none;
}

substrate-button.substrate-loading button {
  color: #0000;
  pointer-events: none;
}

substrate-button.substrate-loading button:hover {
  color: #0000;
}

substrate-button.substrate-loading button:after {
  content: "";
  box-sizing: border-box;
  background: none;
  border-top: 2px solid #000;
  border-right: 2px solid #0000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin: auto;
  animation: .6s linear infinite spinner;
  position: absolute;
  inset: 0;
}

substrate-button[aria-disabled="true"] {
  -webkit-user-select: none;
  user-select: none;
  background-color: #0000;
}

substrate-button[aria-disabled="true"] button {
  -webkit-user-select: none;
  user-select: none;
  background-color: #0000;
}

@media (prefers-reduced-motion: reduce) {
  substrate-button.substrate-loading button {
    transition: none;
  }

  substrate-button.substrate-loading button:after {
    opacity: .5;
    border: 2px solid #000;
    animation: none;
  }

  button.substrate-button:not([disabled]):active {
    animation: none;
  }
}

:root {
  --default-color: #36393d;
}

button.substrate-button {
  color: var(--default-color);
  background-color: var(--substrate-button-background, transparent);
  appearance: none;
  border: 1px solid #000;
  outline: 2px solid #0000;
  padding: .5em 1em;
  position: relative;
}

button.substrate-button:disabled {
  pointer-events: none;
  opacity: .4;
}

button.substrate-button:focus, button.substrate-button:focus-visible {
  outline: 2px solid var(--default-color);
}

button.substrate-button:focus:not(:focus-visible) {
  outline-color: #0000;
}

button.substrate-button:not([disabled]):active {
  transition-timing-function: ease;
  animation-name: substrate-button-activate;
  animation-duration: .2s;
}