/* Reusable assets and components for lessons */

@import url('./universalBtn.css');
@import url('./universalFlash.css');
@import url('./universalNavBtn.css');

.chooseLesson,
.lesson-chooser-btn.chooseLesson {
  background-color: #ff7f50 !important;
  background-image: none !important;
  height: 58px !important;
  width: 58px !important;
  border-radius: 8px !important;
  border: 2px solid #cc5a2a !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

.chooseLesson-icon {
  height: 80% !important;
  width: auto !important;
  display: block !important;
}

/* ============================================================================
   CENTRALIZED ANSWER FEEDBACK SYSTEM
   ============================================================================
   Simple border feedback for correct/wrong answers. Colors via CSS vars.
   Works on ANY element (div, button, span, etc.) - no element-specific selectors.
   Usage: await Common.showAnswerFeedback(element, true);
   ============================================================================ */

:root {
/* For TESTING */
  --answer-feedback-correct: #ff00ff;
  --answer-feedback-wrong: #ff8800; */
/* For PRODUCTION */
  /* --answer-feedback-correct: #108912;
  --answer-feedback-wrong: rgb(222, 20, 20); */
}

@keyframes answer-feedback-correct {
  0%, 100% {
    border-color: var(--answer-feedback-correct);
  }
  50% {
    border-color: transparent;
  }
}

@keyframes answer-feedback-wrong {
  0%, 100% {
    border-color: var(--answer-feedback-wrong);
  }
  50% {
    border-color: transparent;
  }
}

/* Generic classes - work on any element type */
.answer-feedback-correct {
  animation: answer-feedback-correct 0.3s ease-in-out;
}

.answer-feedback-wrong {
  animation: answer-feedback-wrong 0.3s ease-in-out;
}

/* ============================================================================
   END CENTRALIZED ANSWER FEEDBACK SYSTEM
   ============================================================================ */