// Course-inner
.#{$prefix}-course-summary {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  .#{$prefix}-content-left {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    .#{$prefix}-course-info {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.938rem;
      align-items: center;
      padding: 15px;
      border-radius: 0.75rem;
      background-image: linear-gradient(to right,
          rgba(var(--wpt-lms-primary-950), 1),
          rgba(var(--wpt-lms-primary-700), 1));
      img {
        width: 14rem;
        height: auto;
        border-radius: 0.5rem;
        aspect-ratio: 16/9;
        object-fit: cover;
        object-position: center;
      }
      &-content {
        display: flex;
        flex-flow: column;
        gap: 1.125rem;
        h3 {
          color: rgba(var(--wpt-lms-white));
          font-size: clamp(1.25rem, 1.1875rem + 0.3125vw, 1.5625rem);
          font-weight: 500;
        }
        .#{$prefix}-categories {
          display: flex;
          gap: 0.625rem;
          align-items: flex-start;
          i {
            font-size: 1.25rem;
            padding: 0.5rem;
            background-color: rgba(var(--wpt-lms-white), 0.1);
            border-radius: 0.5rem;
            // margin-top: 5px;
            // color: rgba(var(--wpt-lms-primary-700));
            color: rgba(var(--wpt-lms-white));
          }
          &-text {
            display: flex;
            flex-flow: column;
            span {
              color: rgba(var(--wpt-lms-white), 0.5);
              font-size: 0.75rem;
              line-height: 0.75rem;
            }
            .#{$prefix}-categories-list {
              display: flex;
              flex-wrap: wrap;
              gap: 0.25rem;
              a {
                // color: rgba(var(--wpt-lms-black), 0.75);
                color: rgba(var(--wpt-lms-white));
                font-weight: 400;
              }
            }
          }
        }
        h1 {
          font-size: clamp(1.25rem, 1.1875rem + 0.3125vw, 1.5625rem);
          font-weight: 500;
        }
      }
    }
    .#{$prefix}-course-description {
      .#{$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;
          }
        }
      }
      .#{$prefix}-course-content {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        p {
          color: rgba(var(--wpt-lms-black), 0.75);
        }
        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}-toggle-more-content {
        height: 200px;
        position: relative;
        overflow: hidden;
        &::before {
          content: " ";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 62px;
          background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.0001) 1.31%,
              rgba(255, 255, 255, 0.721372) 15.41%,
              rgb(var(--wpt-lms-white)) 100%);
          z-index: 5;
        }
        &.expanded {
          height: auto;
          overflow: visible;
          &::before {
            display: none;
          }
        }
      }
    }
  }
  .#{$prefix}-content-right {
    position: sticky;
    top: 55px;
    // background-color: rgba(var(--wpt-lms-white));
    // border: 1px solid rgba(var(--wpt-lms-box-border));
    .#{$prefix}-course-sidebar {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      .#{$prefix}-sidebar-content {
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        border-radius: 0.75rem;
        border: 0.063rem solid rgba(var(--wpt-lms-box-border), 0.5);
        box-shadow: 0 .063rem .25rem rgba(var(--wpt-lms-primary-700), 0.06);
        form {
          .button {
            width: 100%;
            justify-content: center;
          }
        }
        .#{$prefix}-course-price {
          display: flex;
          gap: 0.625rem;
          .origin-price {
            font-weight: 700;
            color: rgba(var(--wpt-lms-gray));
            font-size: 1.125rem;
          }
          .price {
            font-weight: 700;
            font-size: 1.125rem;
          }
        }
        .button {
          display: flex;
          justify-content: center;
        }
        .#{$prefix}-time {
          p {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            strong {
              font-weight: 500;
              color: rgba(var(--wpt-lms-black));
            }
            time {
              color: rgba(var(--wpt-lms-black), 0.75);
            }
          }
        }
        .#{$prefix}-results {
          display: flex;
          gap: 0.313rem;
          flex-direction: column;
          li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.313rem;
            h4 {
              font-size: 1rem;
              font-weight: 500;
            }
            span {
              font-size: 1rem;
              color: rgba(var(--wpt-lms-gray));
            }
          }
          .#{$prefix}-course-progress {
            flex-direction: column;
            align-items: flex-start;
            .#{$prefix}-course-status {
              width: 100%;
              .number {
                display: flex;
                align-items: center;
                width: 100%;
                h4 {
                  flex: 1;
                }
              }
            }
          }
        }
        .#{$prefix}-course-progress {
          .#{$prefix}-progress-bar {
            margin-top: 0.313rem;
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 0.375rem;
            border-radius: 0.188rem;
            &::before {
              display: block;
              position: absolute;
              z-index: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: #ccc;
              content: "";
            }
            .#{$prefix}-progress-active {
              width: 100%;
              height: 100%;
              border-radius: 0.188rem;
              background: #059601;
              position: absolute;
              z-index: 1;
            }
          }
        }
        .#{$prefix}-course-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 0.75rem;
          li {
            span {
              display: flex;
              gap: 0.5rem;
              align-items: center;
              color: rgb(var(--wpt-lms-black));
              i {
                padding: 0.325rem;
                background-color: rgba(var(--wpt-lms-gray), 0.1);
                border-radius: 0.25rem;
                &::before {
                  color: rgb(var(--wpt-lms-gray));
                }
              }
            }
          }
        }
        // .#{$prefix}-certificate-canva {
        //   display: none;
        // }
        .#{$prefix}-sidebar-action {
          display: flex;
          align-items: center;
          gap: 0.625rem;
          form {
            width: 100%;
          }
          .button {
            width: 100%;
            justify-content: center;
          }
        }
      }
    }
  }
}
// Responsive
@media (max-width: 768px) {
  .#{$prefix}-course-summary {
    .#{$prefix}-content-right {
      margin-top: 0;
      margin-right: 0;
      position: static;
    }
  }
}