button, a.btn, span.btn {
  display: inline-block;
  border: thin solid var(--darken-2);
  background: var(--darken-1);
  padding: var(--space-3);
  color: inherit;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 100;
  cursor: pointer;
  text-shadow: var(--extruded-light);

  &.primary {
    background-color: var(--primary);
    color: var(--primary-txt);
    text-shadow: var(--extruded-dark);
  }

  &.btn-icon-only {
    border-radius: 50%;
    margin-left: 1ch;
    padding: var(--space-2);
    border-color: transparent;

    &::before {
      --size: 1.5rem;
      width: var(--size);
      height: var(--size);
      display: inline-block;
      content: '';
      background-repeat: no-repeat;
    }
  }

  // Icons
  &.icon-direction::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M502.61 233.32L278.68 9.39c-12.52-12.52-32.83-12.52-45.36 0L9.39 233.32c-12.52 12.53-12.52 32.83 0 45.36l223.93 223.93c12.52 12.53 32.83 12.53 45.36 0l223.93-223.93c12.52-12.53 12.52-32.83 0-45.36zm-100.98 12.56l-84.21 77.73c-5.12 4.73-13.43 1.1-13.43-5.88V264h-96v64c0 4.42-3.58 8-8 8h-32c-4.42 0-8-3.58-8-8v-80c0-17.67 14.33-32 32-32h112v-53.73c0-6.97 8.3-10.61 13.43-5.88l84.21 77.73c3.43 3.17 3.43 8.59 0 11.76z"></path></svg>');
  }

}

form:invalid button,
button[aria-disabled],
a.btn[aria-disabled],
span.btn[aria-disabled] {
  opacity: .5;
  cursor: not-allowed;
}