// stylelint-disable number-max-precision, rem-over-px/rem-over-px
@mixin button() {
  appearance: none;
  background-color: var(--color-button-background);
  border: var(--border-width-input-field) solid var(--color-button-background);
  border-radius: var(--border-radius-button);
  color: var(--color-button);
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-paragraph);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  line-height: 1.39;
  margin-bottom: 0;
  max-width: 23rem;
  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: all $transition-duration cubic-bezier(.25, .46, .45, .94);
  white-space: nowrap;
  width: auto;

  &.focus,
  &:hover,
  &:focus {
    background-color: var(--color-button-background-hover);
    border-color: var(--color-button-background-hover);
    color: var(--color-button-hover);
  }
}