/* ============================================================
   Общие переиспользуемые классы
   ============================================================ */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Базовая кнопка */
.btn {
  align-items: center;
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  gap: var(--space-xs);
  justify-content: center;
  line-height: 1;
  padding: var(--space-sm) var(--space-xl);
  transition: background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base);
  white-space: nowrap;

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

/* Общий вертикальный отступ секций */
.section {
  padding-block: var(--space-4xl);

  @media (max-width: $bp-md) {
    padding-block: var(--space-3xl);
  }

  @media (max-width: $bp-xs) {
    padding-block: var(--space-2xl);
  }
}