// Quiz result
.#{$prefix}-quiz-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  h3 {
    font-size: clamp(1.25rem, 1.1875rem + 0.3125vw, 1.5625rem);
    font-weight: 500;
  }
  .wpt-lms-quiz-result-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    span {
      color: rgb(var(--wpt-lms-gray));
      font-size: 1.125rem;
    }
    i::before {
      font-size: 50px;
    }
    &.passed {
      i::before {
        color: green;
      }
    }
    &.failed {
      i::before {
        color: #ed302e;
      }
    }
  }
  .#{$prefix}-result-message {
    padding: 0.625rem;
    color: rgb(var(--wpt-lms-white));
    background: #f02425;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    width: max-content;
  }
  &.passed .#{$prefix}-result-message {
    background: #3bb54a;
  }
}
.#{$prefix}-quiz-score {
  .wpt-lms-card {
    border-radius: 0.75rem;
    border-color: rgba(var(--wpt-lms-box-border), 0.5);
    &-header {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-direction: column;
      border-color: rgba(var(--wpt-lms-box-border), 0.5);
      span {
        font-size: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
      }
      h4 {
        font-size: 1rem;
        color: rgba(var(--wpt-lms-gray));
        font-weight: 500;
      }
      &.passed {
        span {
          color: green;
        }
      }
      &.failed {
        span {
          color: #ed302e;
        }
      }
    }
    &-body {
      align-items: center;
      p {
        display: flex;
        gap: 5px;
        span {
          font-weight: 500;
        }
      }
    }
  }
}
.#{$prefix}-quiz-result-point {
  .#{$prefix}-card {
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-radius: 0.75rem;
    border-color: rgba(var(--wpt-lms-box-border), 0.5);
    span {
      font-size: 20px;
      color: rgba(var(--wpt-lms-black));
      font-weight: 500;
    }
    h4 {
      font-size: 1rem;
      color: rgba(var(--wpt-lms-gray));
      font-weight: 500;
    }
  }
}
.#{$prefix}-quiz-attempts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  h3 {
    font-weight: 500;
  }
}
.#{$prefix}-quiz-action {
  display: flex;
  gap: 0.625rem;
}