@import "../variables";
@import "../mixins/mixins";

// question list styles
.questionTab.button {
  border-bottom: 1px solid #cecece;
}

.questionTab.segment {
  label {
    font-size: 12px;
    font-weight: normal;
  }
  &:hover, &.active {
    background-color: #EDF4F9;
    color: #024f9d;
    label {
      font-weight: 700;
    }
  }
}

.questionsMenu {
  overflow-y: auto;
  max-height: 500px;
}

.emptyList {
  border: none;
}

i.icon {
  &.trash {
    color: var(--red-100);
  }
  &.expand {
    color: var(--primary-color);
  }
}


// mcq preview layout styles
.sb-question-outerframe {
  height: 100%;
  height: 392px;
  max-width: 800px;
  border: 10px solid var(--black);
  margin: 0 auto;
  position: relative;
}
.sb-question-dsp-container {
  .sb-editor-image {
    height: 392px;
    max-width: 800px;
    border: 10px solid var(--black);
    border-radius: 15px;
    margin: 0 auto;
    position: relative;
    .phone-sensors {
      position: absolute;
      z-index: 99;
      top: 50%;
      transform: translateY(-50%);
      margin: auto;
      left: 0px;
      background: var(--black);
      padding: ($base-block-space + 2) ($base-block-space - 3) ($base-block-space + 2) 0;
      border-top-right-radius: ($base-block-space * 3) + 1;
      border-bottom-right-radius: ($base-block-space * 3) + 1;

      .sensor {
        width: $base-block-space;
        height: $base-block-space;
        background: #252525;
        border-radius: 50%;
      }
      .speaker {
        width: ($base-block-space - 3);
        height: 74px;
        background: #252525;
        border-radius: ($base-block-space + 2);
        margin: ($base-block-space + 2) 0 ($base-block-space + 2) 1px;
      }
      .sensor {
        width: $base-block-space;
        height: $base-block-space;
        background: #252525;
        border-radius: 50%;
      }
    }
  }

  .sb-question-dsp-body {
    // max-width: 800px;
    // max-height: 392px;
    // margin: 0 auto;
    // overflow: hidden;
    border-radius: ($base-block-space - 4);
    //height: calc(100% - 48px);
    height: 100vh;

    .question-bg {
      background-image: linear-gradient(-90deg, lightblue, var(--white));
    }

    .answer-bg {
      background-image: linear-gradient(-90deg, #fcf2d6, var(--white));
    }

    .question-menu {
      .hambergur-menu-container {
        max-width: ($base-block-space * 3);
        display: inline-block;
        cursor: pointer;
      }

      .hambergur-menu {
        width: ($base-block-space * 3);
        height: ($base-block-space - 5);
        margin: ($base-block-space - 4) 0;
        background-color: var(--gray);
      }
      .sb-btn-arrows {
        min-width: 50px;
        .icon {
          margin: 0;
        }
      }
    }
  }

  .sb-question-header {
    display: block;
    padding: ($base-block-space) ($base-block-space * 2);
    text-align: right;

    .sb-mark {
      font-size: $font-size-sm;
      padding-right: $base-block-space;
      color: var(--blue);
    }
    &.sb-learning-outcome-header {
      align-items: center;
    }
  }

  .sb-question-content {
    // width: 100%;
    // min-height: 72px;
    // max-height: calc(370px - 87px);
    //overflow-y: auto;
    height: 100%;

    .page-section {
      //min-height: calc(372px - 48px);
      height: 100%;
      padding: ($base-block-space * 3);

      &:first-child {
        padding-top: 0;
      }
    }

    .sb-question-content-card {
      background: var(--white);
      border-radius: $base-block-space;
      min-height: 72px;
      font-weight: inherit;
      line-height: normal;
      box-shadow: 2px 5px 7px 0 rgba(0, 0, 0, 0.2);
      border: 0.5px solid var(--gray-0);
      padding: ($base-block-space * 2);
      // overflow: auto;
    }

    .sb-question-content-card p svg {
      display: inline-block;
      vertical-align: middle;
    }

    .sb-question {
      margin-right: auto;
      font-size: $font-size-sm;
      color: var(--blue);
      margin-bottom: ($base-block-space * 2);
    }

    .sb-star-icon {
      background: var(--orange);
      width: ($base-block-space * 2);
      height: ($base-block-space * 2);
      border-radius: 50%;
      margin-left: $base-block-space;
      text-align: center;
      display: inline-block;

      i.icon {
        color: var(--white);
        font-size: $font-size-xs;
        margin: 0;
      }
    }

    .sb-answer {
      font-size: $font-size-sm;
      color: var(--gray-800);
    }

    // learning out come styles
    &.sb-learning-outcome {
      height: calc(100% - 44px);

      .question-bg {
        background-image: linear-gradient(-90deg, var(--secondary-100), var(--secondary-0));
      }

      .page-section {
        padding: 0;

        .page-section-title {
          margin: 0;
          padding: ($base-block-space * 2) ($base-block-space * 3);
        }

        .sb-question-content-learning {
          max-height: calc(100% - 60px);
          overflow-y: auto;

          .sb-question-content-card {
            min-height: 60px;
            line-height: ($base-block-space * 3) - 3;
            margin: ($base-block-space * 2) ($base-block-space * 3);

            &:first-child {
              margin-top: 0;
            }
            .sb-learning-outcome-label {
              width: 100%;
              span.sb-status-label {
                padding: ($base-block-space - 4);
              }
              label {
                margin-bottom: 0px;
              }
            }
          }
        }
      }
    }
    &.sb-focus-spots {
      height: calc(100% - 44px);
      .page-section {
        padding: 0;
        .sb-question-content-focus-spot {
          height: 100%;
          overflow-y: auto;
          .sb-question-content-focus-spot-label {
            padding: ($base-block-space * 2) ($base-block-space * 3);

            .sb-label {
              padding: $base-block-space;
            }
          }
          .sb-question-content-card {
            min-height: 60px;
            margin: ($base-block-space * 2) ($base-block-space * 3);
            margin-top: 0;
            .sb-question-content-focus-spot-group {
              padding-bottom: ($base-block-space * 2);

              .sb-question-content-focus-spot-extra {
                font-size: $font-size-sm;
                color: var(--gray-200);
              }
              .sb-focus-spot-label {
                width: 100%;
                span.sb-status-label {
                  padding: ($base-block-space - 4);
                }
                label {
                  margin-bottom: 0px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.sb-question-dsp-container {
  .sb-question-dsp-body {
    .mcq-horizontal,
    .mcq-vertical,
    .mcq-grid {
      display: flex;
      flex-wrap: wrap;
      max-width: 1440px;
      /* margin: 0 auto; */
      /* align-items: stretch; */
      position: relative;
      // border-radius: 8px; // have to enable for mobile bg
      height: 100%;
      // height: 100vh;
      overflow: hidden;

      .mcq-title {
        position: absolute;
        top: 0;
        z-index: 1;
        width: 100%;
        flex-basis: 100%;
        padding: ($base-block-space) ($base-block-space * 3);
        background: var(--white);
        font-weight: 700;
        //   max-height: 76px;
        height: 76px;
        overflow: hidden;
        z-index: 999;
        box-shadow: 2px 5px 7px 0 rgba(0, 0, 0, 0.2);
        border-radius: 0;

        p svg {
          display: inline-block;
          vertical-align: middle;
        }
      }

      .mcq-options {
        flex-basis: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: ($base-block-space * 3);
        padding-top: 100px;
        // max-height: calc(436px - 64px);
        height: 100vh;
        overflow-y: auto;
        //   min-height: calc(436px - 64px);
        background-image: linear-gradient(-90deg, lightblue, #afd9e7);

        .mcq-option {
          margin-bottom: ($base-block-space * 2);
          height: auto;
          box-shadow: 2px 5px 7px 0 rgba(0, 0, 0, 0.2);
          background: var(--white);
          border-radius: $base-block-space;
          line-height: 20px;
          padding: $base-block-space;

          p {
            font-size: $font-size-sm;
          }
        }
      }

      i.chevron {
        position: absolute;
        bottom: $base-block-space;
        right: ($base-block-space - 4);
        z-index: 999;
        cursor: pointer;
        background: #024a93;
        color: var(--white);
        width: ($base-block-space * 4);
        height: ($base-block-space * 4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        &.icon-active {
          transform: rotate(-180deg);
        }
      }
    }

    .mcq-split {
      .mcq-title {
        flex-basis: 30%;
        //background: none;
        position: initial;
        max-height: 100vh;
        overflow-y: auto;
        padding: ($base-block-space * 2) 8px ($base-block-space * 2) 24px;
        height: 100%;
      }

      i.chevron {
        display: none !important;
      }

      .mcq-options {
        flex-basis: 70%;
        padding-top: ($base-block-space * 2);

        p svg {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }

    .mcq-horizontal {
      .mcq-title {
        &.expand {
          max-height: 70%;
          overflow-y: auto;
          height: 70%;
        }
      }

      .mcq-options .mcq-option {
        width: 20%;
        margin-bottom: 0;
      }
    }

    .mcq-vertical {
      .mcq-title {
        &.expand {
          max-height: 70%;
          overflow-y: auto;
          height: 70%;
        }
      }

      .mcq-options .mcq-option {
        width: 100%;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .mcq-grid {
      .mcq-options .mcq-option {
        width: 45%;
        &:nth-child(3) {
          margin-bottom: 0;
        }
        &:nth-child(4) {
          margin-bottom: 0;
        }
      }
    }

    .mcq-submit-btn {
      margin-left: auto;
      padding-right: ($base-block-space * 2);
      margin-bottom: ($base-block-space * 2);
    }
  }

  // .mcq-vertical .mcq-options .mcq-option, .mcq-horizontal .mcq-options .mcq-option, .mcq-grid .mcq-options .mcq-option {
  //   max-height: 80%;
  //   overflow-y: auto;
  // }
  .mcq-checkbox-answer {
    background: var(--gray-0);
    padding: ($base-block-space * 2);
    display: flex;
    border: 1px solid #c4c4c4;
    border-top: none;

    label {
      font-weight: 700;
      padding-right: $base-block-space;
      font-size: $font-size-base;
    }
  }
}

.sb-card {
  // .sb-card-metas .sb-card-image {
  //   width: 120px;
  //   height: 96px;

  //   img {
  //     width: auto;
  //     height: auto;
  //   }
  // }

  .sb-card-content-list {
    font-size: $font-size-sm;
    color: var(--gray-800);

    .sb-card-circular-list {
      padding: 0 15px;
      .sb-circular-list-item {
        list-style-type: decimal;
        font-size: 0.9286rem;
        margin-bottom: ($base-block-space * 2);
      }
    }
  }
}

// Progress bar for modal
.uploading-files {
  margin: ($base-block-space * 3) auto;

  .process-icon {
    width: ($base-block-space * 7);
    height: ($base-block-space * 6);
  }

  .ui.progress {
    margin: ($base-block-space + 4) ($base-block-space * 3) ($base-block-space * 3 + 4) ($base-block-space * 3) !important;
    width: 60%;
  }

  .ui.progress .bar {
    background: $tertiary-100;
    height: ($base-block-space) !important;
  }

}

// CBSE Program Accordion	
.sb-chapterlist-accordion {	
  &.ui.styled.accordion {	
    background: inherit;	
    .active.title {	
      border: 1px solid $primary-200;	
      border-bottom: none;	
      background-color: #F3F8FF;	
      font-weight: $font-weight-bold;	
      border-bottom-left-radius: 0;	
      border-bottom-right-radius: 0;	
      font-size: $font-size-sm;	
      .chevron-icon {	
        background: #D9E4F2;	
        border-left: none;	
      }	
      .chapter-status {	
        background: $primary-color;	
      }	
    }	
    .title {	
      margin-top: $base-block-space;	
      background: $gray-0;	
      border: 1px solid $gray-100;	
      border-radius: 4px;	
      font-size: $font-size-sm;	
      .chevron-icon {	
        background: $gray-0;	
        border-left: 1px solid $gray-100;	
      }	
      .chapter-status {	
        height: $base-block-space;	
        width: $base-block-space;	
        border-radius: 50%;	
        background: $gray-100;	
      }	
    }	
    .sb-chapterlist-child {	
      .active.title {	
        border-top: 1px solid $primary-200;	
        border-radius: 0;	
        .chapter-status {	
          background: #88B7E6;	
        }	
      }	
      .title {	
        margin-top: 0;	
        border-radius: 0px 0px 4px 4px;	
        border: none;	
        border-top: 1px solid $gray-100;	
      }	
      .content {	
        border: none;	
      }	
      .chevron-icon {	
        border-top-right-radius: 0px;	
      }	
    }	
    .content {	
      border: 1px solid $primary-200;	
      border-top: none;	
      border-bottom-left-radius: 4px;	
      border-bottom-right-radius: 4px;	
      background: $white-color;	
    }	
    .chevron-icon {	
      height: 56px;	
      width: 56px;	
      margin: -16px -16px -16px 16px;	
      display: flex;	
      align-items: center;	
      justify-content: center;	
      border-top-right-radius: 4px;	
      border-bottom-right-radius: 4px;	
    }	
    .chevron.down.icon {	
      height: auto;	
    }	
    .accordion {	
      .active.title {	
        border: 1px solid $primary-200;	
        border-bottom: none;	
        background-color: #F3F8FF;	
        font-weight: $font-weight-bold;	
      }	
      .content {	
        border: 1px solid $primary-200;	
        border-top: none;	
      }	
    }	
  }	
}