/* --- EXERCISE --- */

.exercise-backgound-fluid {
  background-color: var(--ifht-sys-cor-neutra-5);
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 240px;
  padding: 80px 0;
  border-radius: var(--ifht-sys-raio-borda-lg);
  border: none;
}

.exercise .exercise__question {
  padding-bottom: var(--ifht-sys-spacing-xl);
  border-bottom: 1px solid red;
}

.exercise .card .card-footer {
  padding: var(--ifht-sys-spacing-padding-sm) 0;
}

/* Answers List */
.exercise .exercise__answers {
  padding-top: var(--ifht-sys-spacing-lg);
}
.exercise .exercise__answers > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.exercise .exercise__answers .answer__option {
  padding: var(--ifht-sys-spacing-md);
  margin-bottom: var(--ifht-sys-spacing-md);
  border: 2px solid var(--ifht-sys-cor-light);
  background-color: var(--ifht-sys-cor-extralight);
  border-radius: var(--ifht-sys-spacing-lg);
  transition: 0.1s;
}
.exercise:not([data-exercise="dropdown"]) .exercise__answers .answer__option {
  cursor: pointer;
}
.exercise .exercise__answers .answer__option:last-child {
  margin-bottom: 0;
}
.exercise
  .exercise__answers
  .answer__option:not(
    .exercise__answers--blocked,
    .exercise__answers--selected,
    .exercise__answers--correct,
    .exercise__answers--incorrect
  ):hover {
  border-color: var(--ifht-sys-cor-primaria-normal);
  /* background-color: var(--color-light-hover); */
}
.exercise .exercise__answers .answer__option.exercise__answers--selected {
  border-color: var(--ifht-sys-cor-secundaria-light);
  background-color: var(--ifht-sys-cor-secundaria-light);
}
.exercise .exercise__answers .answer__option.exercise__answers--selected p {
  color: orange;
}
.exercise .exercise__answers .answer__option.exercise__answers--correct {
  background-color: var(--ifht-sys-cor-apoio-2-light);
  border-color: var(--ifht-sys-cor-apoio-2-normal);
  cursor: not-allowed;
}
.exercise .exercise__answers .answer__option.exercise__answers--correct p {
  color: var(--ifht-sys-cor-apoio-2-dark);
}
.exercise .exercise__answers .answer__option.exercise__answers--incorrect {
  background-color: var(--ifht-sys-cor-apoio-4-light);
  border-color: var(--ifht-sys-cor-apoio-4-normal);
  cursor: not-allowed;
}
.exercise .exercise__answers .answer__option.exercise__answers--incorrect p {
  color: var(--ifht-sys-cor-apoio-4-dark);
}
.exercise
  .exercise__answers
  .answer__option.exercise__answers--blocked:not(
    .exercise__answers--correct,
    .exercise__answers--incorrect
  ) {
  background-color: var(--ifht-sys-cor-neutra-light);
  border-color: var(--ifht-sys-cor-neutra-light);
  cursor: not-allowed;
}
.exercise
  .exercise__answers
  .answer__option.exercise__answers--blocked:not(
    .exercise__answers--correct,
    .exercise__answers--incorrect
  )
  p {
  color: var(--ifht-sys-cor-neutra-dark);
}

.exercise .exercise__answers .answer__option p:not(:last-child) {
  margin-bottom: var(--ifht-sys-spacing-md);
}

/* Select option */
.exercise .exercise__answers .answer__option .form-select {
  appearance: none;
  background-color: #fff;
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  border: 2px solid #ced4da;
  border-radius: var(--ifht-sys-raio-borda-full);
  color: var(--ifht-sys-cor-neutra-extradark);
  display: block;
  font-size: var(--ifht-sys-paragrafo);
  font-weight: 400;
  line-height: 1.5;
  padding: var(--ifht-sys-spacing-xs) var(--ifht-sys-spacing-xl)
    var(--ifht-sys-spacing-xs) var(--ifht-sys-spacing-md);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: auto;
  -webkit-appearance: none;
  -moz-padding-start: calc(0.75rem - 3px);
  -moz-appearance: none;
}
.exercise
  .exercise__answers
  .answer__option:not(
    .exercise__answers--blocked,
    .exercise__answers--correct,
    .exercise__answers--incorrect
  ):hover
  .form-select {
  border-color: var(--ifht-sys-cor-primaria-normal);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c70596' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.exercise
  .exercise__answers
  .answer__option.exercise__answers--selected
  .form-select {
  border-color: var(--ifht-sys-cor-primaria-normal);
  background-color: var(--ifht-sys-cor-primaria-dark-contrast);
}
.exercise
  .exercise__answers
  .answer__option.exercise__answers--correct
  .form-select {
  /* background-color: var(--fio-sys-color-success-light); */
  border-color: var(--ifht-sys-cor-apoio-2-light);
  color: var(--ifht-sys-cor-apoio-2-dark);
  cursor: not-allowed;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231f7a36' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.exercise
  .exercise__answers
  .answer__option.exercise__answers--incorrect
  .form-select {
  /* background-color: var(--fio-sys-color-error-light); */
  border-color: var(--ifht-sys-cor-apoio-4-light);
  color: var(--ifht-sys-cor-apoio-4-dark);
  cursor: not-allowed;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23822017' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.exercise
  .exercise__answers
  .answer__option.exercise__answers--blocked
  .form-select {
  cursor: not-allowed;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23576b75' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Submit Button */
.exercise .exercise__submit {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  width: 100%;
}

.exercise .exercise__submit button {
  overflow-wrap: normal;
  align-self: end;
}
.exercise .exercise__submit button[aria-disabled="true"] {
  background-color: var(--ifht-sys-cor-neutra-normal);
  border-color: var(--ifht-sys-cor-neutra-normal);
  cursor: not-allowed;
}

/* Feedback mensage */
.exercise .exercise__submit .exercise__submit--feedback {
  font-family: var(--ifht-sys-txt-familia-titulo);
  margin-bottom: 30px;
  line-height: normal;
  text-align: left;
}

.exercise .exercise__submit .exercise__submit--feedback strong {
  font-family: var(--ifht-sys-txt-familia-titulo);
  font-size: var(--ifht-sys-paragrafo);
}
.exercise
  .exercise__submit
  .exercise__submit--feedback
  .material-symbols-rounded {
  font-size: 32px;
  font-weight: 700;
  margin-right: 10px;
}
.exercise .exercise__submit .exercise__submit--feedback .feedback__content {
  display: block;
  font-family: var(--ifht-sys-txt-familia-paragrafo);
  font-size: var(--ifht-sys-paragrafo);
  margin-top: 10px;
  line-height: normal;
}

.exercise
  .exercise__submit
  .exercise__submit--feedback
  .feedback__content
  strong {
  font-size: var(--ifht-sys-paragrafo);
  font-weight: 900;
}

.exercise
  .exercise__submit
  .exercise__submit--feedback.exercise__submit__feedback--correct {
  display: block !important;
  color: var(--ifht-sys-cor-apoio-2-dark);
}
.exercise
  .exercise__submit
  .exercise__submit--feedback.exercise__submit__feedback--incorrect {
  display: block !important;
  color: var(--ifht-sys-cor-apoio-4-dark);
}
.exercise
  .exercise__submit
  .exercise__submit--feedback.exercise__submit__feedback--incomplete {
  display: block !important;
  color: var(--ifht-sys-cor-apoio-3-dark);
}

/* Answer Feedback (correct answers) */

.exercise .exercise__answer--feedback {
  padding-bottom: 30px;
}

.exercise .exercise__answer--feedback p {
  color: orange;
}