@mixin button($color: var(--color-button), $hover: var(--color-button-hover), $background: var(--color-button-background), $background-hover: var(--color-button-background-hover), $radius: 3px, $border: 0, $border-hover: var(--color-button-hover), $weight: 700, $arrow: false, $transition: all .08s cubic-bezier(.25, .46, .45, .94)) {
  appearance: none;
  background-color: $background;
  border: $border;
  border-radius: $radius;
  color: $color;
  cursor: pointer;
  display: inline-block;
  font-family: $font-paragraphs;
  font-size: var(--font-size-16);
  font-weight: $weight;
  line-height: 1;
  margin-bottom: 0;
  padding-bottom: 12px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 12px;
  position: relative;
  text-decoration: none;
  transition: $transition;
  width: auto;

  // Buttons usually already have arrows
  /* stylelint-disable a11y/no-display-none */
  &.is-external-link::after {
    display: none;
  }
  /* stylelint-enable */

  // Arrow icon
  @if $arrow {
    svg {
      margin-left: 2rem;
    }
  }

  &:hover,
  &:focus {
    background-color: $background-hover;
    border-color: $border-hover;
    color: $hover;
  }
}