// stylelint-disable number-max-precision, max-line-length
@mixin button($max-width: 230px, $color: var(--color-button), $hover: var(--color-button-hover), $background: var(--color-button-background), $background-hover: var(--color-button-background-hover), $radius: var(--border-radius-input-field), $border: var(--border-width-input-field) solid var(--color-button-background), $border-hover: var(--border-width-input-field) solid $background-hover, $weight: var(--font-weight-semibold), $arrow: false, $transition: all $transition-duration cubic-bezier(.25, .46, .45, .94)) {
  // doiuse-disable
  appearance: none;
  background-color: $background;
  border: $border;
  border-radius: $radius;
  color: $color;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-paragraph);
  font-size: var(--font-size-16);
  font-weight: $weight;
  line-height: 19.6364px;
  margin-bottom: 0;
  max-width: $max-width;
  overflow: hidden;
  padding-bottom: calc(14px - calc(var(--border-width-input-field) * 2));
  padding-left: calc(21px - calc(var(--border-width-input-field) * 2));
  padding-right: calc(21px - calc(var(--border-width-input-field) * 2));
  padding-top: calc(14px - calc(var(--border-width-input-field) * 2));
  position: relative;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: $transition;
  white-space: nowrap;
  width: auto;

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

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