// course inner content tab
.#{$prefix}-course-tabs {
  display: flex;
  flex-direction: column;
  // gap: 1.25rem;
  input[type="radio"] {
    display: none;
  }
  .#{$prefix}-course-nav {
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(var(--wpt-lms-white));
    border: 1px solid rgba(var(--wpt-lms-box-border), 0.5);
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 1rem;
    li {
      flex: 1;
      label {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: 1rem;
        // border-top: 4px solid transparent;
        border-radius: 0.5rem;
      }
    }
  }
  .#{$prefix}-course-tab-panels {
    background-color: rgb(var(--wpt-lms-white));
    border: 1px solid rgba(var(--wpt-lms-box-border), 0.5);
    border-top: 0;
    border-radius: 0 0 0.75rem 0.75rem;
    padding: 1rem;
    .#{$prefix}-course-tab-panel {
      padding-top: 0;
    }
    .#{$prefix}-course-tab-panel {
      display: none;
    }
    .#{$prefix}-course-tab-panel.active {
      display: block;
    }
    ul {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      li {
        &.section {
          background-color: rgba(var(--wpt-lms-gray), 0.05);
          border-radius: 0.5rem;
          padding: 1rem;
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }
      }
    }
  }
  input[name="wpt-lms-course-tab-radio"]:nth-child(1):checked~.#{$prefix}-course-tab-panels .#{$prefix}-course-tab-panel:nth-child(1),
  input[name="wpt-lms-course-tab-radio"]:nth-child(2):checked~.#{$prefix}-course-tab-panels .#{$prefix}-course-tab-panel:nth-child(2),
  input[name="wpt-lms-course-tab-radio"]:nth-child(3):checked~.#{$prefix}-course-tab-panels .#{$prefix}-course-tab-panel:nth-child(3),
  input[name="wpt-lms-course-tab-radio"]:nth-child(4):checked~.#{$prefix}-course-tab-panels .#{$prefix}-course-tab-panel:nth-child(4),
  input[name="wpt-lms-course-tab-radio"]:nth-child(5):checked~.#{$prefix}-course-tab-panels .#{$prefix}-course-tab-panel:nth-child(5),
  input[name="wpt-lms-course-tab-radio"]:nth-child(6):checked~.#{$prefix}-course-tab-panels .#{$prefix}-course-tab-panel:nth-child(6),
  input[name="wpt-lms-course-tab-radio"]:nth-child(7):checked~.#{$prefix}-course-tab-panels .#{$prefix}-course-tab-panel:nth-child(7),
  input[name="wpt-lms-course-tab-radio"]:nth-child(8):checked~.#{$prefix}-course-tab-panels .#{$prefix}-course-tab-panel:nth-child(8),
  input[name="wpt-lms-course-tab-radio"]:nth-child(9):checked~.#{$prefix}-course-tab-panels .#{$prefix}-course-tab-panel:nth-child(9) {
    display: block;
  }
  input[name="wpt-lms-course-tab-radio"]:nth-child(1):checked~.#{$prefix}-course-nav li:nth-child(1) label,
  input[name="wpt-lms-course-tab-radio"]:nth-child(2):checked~.#{$prefix}-course-nav li:nth-child(2) label,
  input[name="wpt-lms-course-tab-radio"]:nth-child(3):checked~.#{$prefix}-course-nav li:nth-child(3) label,
  input[name="wpt-lms-course-tab-radio"]:nth-child(4):checked~.#{$prefix}-course-nav li:nth-child(4) label,
  input[name="wpt-lms-course-tab-radio"]:nth-child(5):checked~.#{$prefix}-course-nav li:nth-child(5) label {
    color: rgb(var(--wpt-lms-primary-700));
    background-color: rgb(var(--wpt-lms-primary-100));
  }
}
// course innrer Extra box
.#{$prefix}-course-extra {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  .#{$prefix}-course-extra-box {
    border: 0.063rem solid rgba(var(--wpt-lms-box-border), 0.5);
    background-color: rgb(var(--wpt-lms-white));
    box-shadow: 0 0.063rem 0.25rem rgba(var(--wpt-lms-primary-700), 0.06);
    border-radius: 0.75rem;
    .#{$prefix}-box-title {
      display: flex;
      align-items: center;
      position: relative;
      margin: 0 !important;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      padding: 1.25rem;
      color: rgb(var(--wpt-lms-black));
      &::after {
        position: absolute;
        top: 0;
        right: 1.25rem;
        bottom: 0;
        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;
        margin: auto;
        content: "";
        opacity: 0.5;
      }
    }
    .#{$prefix}-box-content {
      overflow: hidden;
      transition: height 0.3s ease;
      .#{$prefix}-content-inner {
        ul {
          padding: 1.25rem;
          display: flex;
          flex-direction: column;
          gap: 0.625rem;
          padding-top: 0;
          li {
            // border-bottom: 0.063rem solid rgb(var(--wpt-lms-box-border));
            padding: 0 0 0 1.5rem;
            position: relative;
            color: rgb(var(--wpt-lms-black), 0.75);
            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0.5rem;
              width: 0.75rem;
              height: 0.75rem;
              border-radius: 100%;
              border: 2px solid rgb(var(--wpt-lms-primary-300));
            }
            &:last-child {
              border-bottom: 0;
              padding-bottom: 0;
            }
          }
        }
      }
    }
    &.active .#{$prefix}-box-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");
    }
    &.active .#{$prefix}-box-content {
      height: auto;
    }
    &.active {
      .#{$prefix}-box-title {
        color: rgb(var(--wpt-lms-primary-700));
      }
    }
  }
}