.#{$prefix}-faq-box {
  width: 100%;
  // padding: 1.25rem 0;
  // border-bottom: 0.063rem solid rgba(var(--wpt-lms-primary-950), 0.06);
  // display: flex;
  // flex-direction: column;
  // gap: 0.625rem;
  background-color: rgba(var(--wpt-lms-gray), 0.05);
  border-radius: .25rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  &:not(:last-child) {
    margin-bottom: 0.5rem;
  }
  gap: 0;
  .#{$prefix}-faq-title {
    display: block;
    position: relative;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(var(--wpt-lms-black));
    cursor: pointer;
    &::after {
      position: absolute;
      top: 00;
      right: 0;
      bottom: 0;
      margin: auto;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'%3e%3c/path%3e%3c/svg%3e");
      height: 1.225rem;
      width: 1.225rem;
      content: "";
      opacity: 0.5;
    }
    &.active {
      color: rgba(var(--wpt-lms-primary-700));
      &::after {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z'%3e%3c/path%3e%3c/svg%3e");
      }
    }
  }
  .#{$prefix}-faq-content {
    overflow: hidden;
    height: auto;
    &-inner {
      color: rgba(var(--wpt-lms-black), 0.75);
      white-space: pre-line;
    }
  }
}
input[name="course-faqs-box-ratio"] {
  display: none;
}
// input[name="course-faqs-box-ratio"]:checked + .#{$prefix}-faq-box .#{$prefix}-faq-content {
//   overflow: visible;
// }
// input[name="course-faqs-box-ratio"]:checked + .#{$prefix}-faq-box .#{$prefix}-faq-title {
//   color: rgba(var(--wpt-lms-primary-700));
// }
// input[name="course-faqs-box-ratio"]:checked + .#{$prefix}-faq-box .#{$prefix}-faq-title::after {
//   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z'%3e%3c/path%3e%3c/svg%3e");
//   height: 1.5rem;
//   width: 1.5rem;
//   content: "";
// }