// Lesson
.content-item-summary {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  h2 {
    font-size: clamp(1.25rem, 1.0625rem + 0.9375vw, 2.1875rem);
    font-weight: 500;
  }
  .content-item-description {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    .#{$prefix}-video-player {
      margin-bottom: 1.25rem;
      width: 100%;
      height: clamp(12.5rem, 8.75rem + 18.75vw, 31.25rem);
      .#{$prefix}-player {
        width: 100%;
        height: clamp(12.5rem, 8.75rem + 18.75vw, 31.25rem);
      }
      iframe {
        width: 100%;
        height: 100%;
      }
      .wp-video {
        width: 100% !important;
        height: clamp(12.5rem, 8.75rem + 18.75vw, 31.25rem);
        .wp-video-shortcode {
          height: 100% !important;
        }
      }
    }
    ul {
      padding: 0 18px;
      li {
        list-style: disc;
        &::marker {
          color: rgba(var(--wpt-lms-primary-700));
        }
      }
    }
    ol {
      padding: 0 18px;
      margin: 0;
      li {
        &::marker {
          color: rgba(var(--wpt-lms-primary-700));
        }
      }
    }
    img {
      width: 100%;
    }
  }
  .#{$prefix}-form {
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin: 0;
  }
  .button {
    width: max-content;
  }
}
// Ask question
.#{$prefix}-question-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.25rem;
  .#{$prefix}-ask-question {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    .#{$prefix}-ask-box {
      display: flex;
      gap: 1rem;
      input {
        width: 100%;
      }
    }
    .#{$prefix}-question-list {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      .#{$prefix}-question {
        padding: 0.625rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        .#{$prefix}-reply-box {
          gap: 1rem;
          display: none;
          input {
            width: 100%;
          }
          &.show {
            display: flex;
          }
        }
        .#{$prefix}-question-action {
          display: flex;
          align-items: center;
          gap: 0.625rem;
        }
        .#{$prefix}-question-title {
          display: flex;
          align-items: center;
          gap: 5px;
          .#{$prefix}-username {
            display: flex;
            gap: 3px;
            font-size: 1rem;
            span {
              color: rgba(var(--wpt-lms-black), 0.5);
            }
          }
        }
        .#{$prefix}-replies {
          display: none;
          &.show {
            display: block;
          }
        }
      }
    }
  }
}