.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacer--sm);
  padding: var(--button--padding);
  border: 2px solid var(--button--background);
  border-radius: var(--button--radius);
  font-family: var(--font-family);
  font-size: var(--body-font-size--mobile);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-align: center;
  text-decoration: none;
  transition: var(--button--transition);
  background-color: var(--button--background);
  color: var(--button--text);
  cursor: pointer;
}

@media (min-width: 768px) {
  .button {
    font-size: var(--body-font-size);
  }
}

.button:disabled {
  --button--background: var(--gray);
  --button--text: var(--white);
  cursor: not-allowed;
}

.button:not(.button__outline):not(.button__active):focus,
.button:not(.button__outline):not(.button__active):hover {
  background-color: var(--button--text);
  color: var(--button--background);
}

.button.button__outline {
  border-color: var(--button--background);
  background-color: transparent;
  color: var(--button--background);
}

.button.button__outline:not(.button__active):focus,
.button.button__outline:not(.button__active):hover {
  background-color: var(--button--background);
  color: var(--button--text);
}

.button__block {
  display: flex;
  width: 100%;
}

/* Link button */
.button__link:not(.button__outline) {
  --button--padding: 0;
  --button--radius: 0;
  --button--background: transparent;

  border: none;
  font-family: var(--large-font);
  font-size: var(--large-font-size--mobile);
  font-weight: var(--large-font-weight);
  line-height: var(--large-line-height);
  letter-spacing: var(--large-letter-spacing);
  text-align: left;
  text-transform: var(--large-text-transform);
}

@media (min-width: 768px) {
  .button__link:not(.button__outline) {
    font-size: var(--large-font-size);
  }
}

.button__link:not(.button__outline):disabled {
  --button--background: transparent;
  --button--text: var(--gray);
}

.button__link:not(.button__outline):not(.button__active):focus,
.button__link:not(.button__outline):not(.button__active):hover {
  background-color: transparent;
  color: var(--button--text);
}

.button__link:not(.button__outline) svg {
  display: inline-block;
  width: var(--large-font-size--mobile);
  height: auto;
  min-width: var(--large-font-size--mobile);
  fill: currentColor;
  transition: var(--transition);
}

@media (min-width: 768px) {
  .button__link:not(.button__outline) svg {
    width: var(--large-font-size);
    min-width: var(--large-font-size);
  }
}

.button__link:not(.button__outline):not(.button__active):focus svg,
.button__link:not(.button__outline):not(.button__active):hover svg {
  rotate: -90deg;
}

.button__link:not(.button__outline):disabled:not(.button__active):focus svg,
.button__link:not(.button__outline):disabled:not(.button__active):hover svg {
  rotate: 0deg;
}