/* ==================================
   BUTTONS COMPONENT
   Консолидированные стили кнопок
   hoppwme craft beer tracking platform

   Консолидирует стили из:
   - main.css (.btn, .btn-danger)
   - buttons.css (.save-button, .cancel-button)
   - auth.css (.login-btn, .signup-btn, .social-btn)
   - review.css (.submit-button)
   - register-invite.css (.submit-button)
   - И других файлов
   ================================== */

/* ========================================
   BASE BUTTON (.btn)
   Базовый блок кнопки
   ======================================== */

.btn {
  display: inline-block;
  padding: var(--padding-btn);           /* 0.5rem 1rem (8px 16px) */
  font-family: var(--font-primary);
  font-size: var(--font-size-base);      /* 16px */
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--border-width-thin) solid var(--color-border-medium);
  border-radius: var(--border-radius-md); /* 5px */
  background-color: var(--color-white);
  color: var(--color-text-dark);
  transition: var(--transition-bg), var(--transition-color), var(--transition-transform);
}

.btn:hover,
.btn:focus {
  background-color: var(--color-bg-hover);
  color: var(--color-text-primary);
  text-decoration: none;
  outline: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
   BUTTON VARIANTS (Модификаторы цвета)
   ======================================== */

/* PRIMARY BUTTON - Основная кнопка (синяя) */
/* Используется для основных действий (Save, Submit) */
.btn--primary {
  background-color: var(--color-primary);     /* #007bff */
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus {
  background-color: var(--color-primary-hover); /* #0056b3 */
  border-color: var(--color-primary-hover);
  color: var(--color-white);
}

/* SUCCESS BUTTON - Успех (зеленая) */
/* Используется для сохранения, подтверждения */
.btn--success {
  background-color: var(--color-success);     /* #4caf50 */
  border-color: var(--color-success);
  color: var(--color-white);
}

.btn--success:hover,
.btn--success:focus {
  background-color: var(--color-success-hover); /* #45a049 */
  border-color: var(--color-success-hover);
  color: var(--color-white);
}

/* DANGER BUTTON - Опасность (красная) */
/* Используется для удаления, отмены */
.btn--danger {
  background-color: var(--color-white);
  border-color: var(--color-danger);          /* #f44336 */
  color: var(--color-danger);
}

.btn--danger:hover,
.btn--danger:focus {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}

/* Вариант danger с заливкой */
.btn--danger-filled {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}

.btn--danger-filled:hover,
.btn--danger-filled:focus {
  background-color: var(--color-danger-hover); /* #d32f2f */
  border-color: var(--color-danger-hover);
  color: var(--color-white);
}

/* INFO BUTTON - Инфо (темно-синяя) */
/* Используется для login, signup */
.btn--info {
  background-color: var(--color-info);        /* #2a5298 */
  border-color: var(--color-info);
  color: var(--color-white);
}

.btn--info:hover,
.btn--info:focus {
  background-color: var(--color-info-hover);  /* #1e3c72 */
  border-color: var(--color-info-hover);
  color: var(--color-white);
}

/* SECONDARY BUTTON - Вторичная (серая) */
/* Используется для второстепенных действий */
.btn--secondary {
  background-color: var(--color-gray-600);
  border-color: var(--color-gray-600);
  color: var(--color-white);
}

.btn--secondary:hover,
.btn--secondary:focus {
  background-color: var(--color-gray-700);
  border-color: var(--color-gray-700);
  color: var(--color-white);
}

/* SOCIAL BUTTON - Социальные кнопки */
/* Используется для входа через соц.сети */
.btn--social {
  background-color: var(--color-white);
  border: var(--border-width-thin) solid var(--color-border-light);
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);                       /* 8px между иконкой и текстом */
}

.btn--social:hover,
.btn--social:focus {
  background-color: var(--color-gray-100);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Специфичные социальные кнопки */
.btn--google {
  background-color: var(--color-white);
  border: var(--border-width-thin) solid var(--color-border-light);
  color: #333;
}

.btn--google:hover {
  background-color: var(--color-gray-100);
}

.btn--yandex {
  background-color: #fc0;
  border-color: #fc0;
  color: #000;
}

.btn--yandex:hover {
  background-color: #e6b800;
  border-color: #e6b800;
}

.btn--telegram {
  background-color: #0088cc;
  border-color: #0088cc;
  color: var(--color-white);
}

.btn--telegram:hover {
  background-color: #0077b3;
  border-color: #0077b3;
}

/* ========================================
   SIZE VARIANTS (Модификаторы размера)
   ======================================== */

/* SMALL BUTTON */
.btn--sm {
  padding: var(--padding-btn-sm);             /* 0.25rem 0.5rem (4px 8px) */
  font-size: var(--font-size-sm);             /* 14px */
}

/* LARGE BUTTON */
.btn--lg {
  padding: var(--padding-btn-lg);             /* 0.75rem 1.5rem (12px 24px) */
  font-size: var(--font-size-lg);             /* 20px */
}

/* FULL WIDTH BUTTON */
.btn--full {
  width: 100%;
  display: block;
}

/* ========================================
   BUTTON GROUPS
   Группы кнопок (для социальных кнопок и т.д.)
   ======================================== */

.btn-group {
  display: flex;
  gap: var(--space-sm);                       /* 8px между кнопками */
  flex-wrap: wrap;
}

.btn-group .btn {
  flex: 1;
  min-width: 0; /* Позволяет flex элементам сжиматься */
}

/* Группа кнопок для форм (Save/Cancel) */
.btn-group--form {
  display: flex;
  gap: var(--space-md);                       /* 16px между кнопками */
  justify-content: flex-end;
  margin-top: var(--space-lg);                /* 24px сверху */
}

/* ========================================
   LEGACY CLASS SUPPORT
   Поддержка старых классов для плавной миграции
   Эти классы можно удалить после полной миграции
   ======================================== */

/* .save-button -> используйте .btn.btn--success или .btn.btn--primary */
.save-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: var(--transition-bg);
}

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

/* .cancel-button -> используйте .btn.btn--secondary */
.cancel-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--color-gray-600);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: var(--transition-bg);
}

.cancel-button:hover {
  background-color: var(--color-gray-700);
}

/* .submit-button -> используйте .btn.btn--success */
.submit-button {
  padding: 10px 25px;
  background-color: var(--color-success);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: var(--transition-bg);
}

.submit-button:hover {
  background-color: var(--color-success-hover);
}

/* .delete-button -> используйте .btn.btn--danger-filled */
.delete-button {
  padding: 10px 20px;
  background-color: var(--color-danger);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: var(--transition-bg);
}

.delete-button:hover {
  background-color: var(--color-danger-hover);
}

/* .login-btn, .signup-btn -> используйте .btn.btn--info.btn--full */
.login-btn,
.signup-btn {
  width: 100%;
  padding: 12px;
  background-color: var(--color-info);
  border: none;
  border-radius: var(--border-radius-lg);
  color: var(--color-white);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: var(--transition-bg);
}

.login-btn:hover,
.signup-btn:hover {
  background-color: var(--color-info-hover);
}

/* .social-btn -> используйте .btn.btn--social */
.social-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  transition: transform var(--transition-fast), background var(--transition-base);
  border: 1px solid var(--color-border-light);
}

.social-btn:hover {
  transform: translateY(-2px);
}

/* ========================================
   ICON BUTTONS
   Кнопки с иконками
   ======================================== */

.btn--icon {
  padding: var(--space-sm);
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-md);
}

.btn--icon i,
.btn--icon svg {
  font-size: var(--font-size-lg);
}

/* Круглая кнопка с иконкой */
.btn--icon-round {
  border-radius: var(--border-radius-round);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .btn-group {
    flex-direction: column;
  }

  .btn-group .btn {
    width: 100%;
  }

  .btn-group--form {
    flex-direction: column-reverse; /* Cancel сверху, Save снизу */
  }
}