.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--button-min-width);
  min-height: var(--button-height);
  padding-inline: var(--button-padding-desktop);
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.button--primary {
  background: var(--color-button);
  color: var(--color-white);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-button-hover);
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--text-link-height);
  gap: var(--space-1);
  color: var(--color-link);
  font-family: var(--font-body);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  transition: color var(--duration-fast) var(--ease-standard);
}

.text-link__icon {
  transition: transform var(--duration-normal) var(--ease-standard);
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--color-link-hover);
}

.text-link:hover .text-link__icon,
.text-link:focus-visible .text-link__icon {
  transform: translateX(var(--icon-shift));
}

@media (max-width: 767px) {
  .button {
    width: 100%;
    padding-inline: var(--button-padding-mobile);
  }
}