$kids-height: calc(100vh - 80px - 30px) !default;

$kids-characters-height: 120px;
$kids-speech-arrow-size: 10px;
$kids-speech-border-color: lighten($mu-color-disabled, 20%);
$kids-speech-background-color: #f4f6fb;

$kids-speech-border: 1px solid $kids-speech-border-color;

$kids-speech-tabs-width: 40px;

.mu-kids-exercise {
  height: $kids-height;
  min-height: $kids-height;
  max-height: $kids-height;

  display: flex;
  flex-direction: row;

  .mu-kids-exercise-description,
  .mu-kids-exercise-board {
    display: flex;
    flex-direction: column;
  }
  .mu-kids-exercise-description {
    padding-right: 15px;
  }

  .mu-kids-states {
    margin-bottom: 15px;
  }
  .mu-kids-character {
    padding: 15px;
  }
  .mu-kids-state {
    padding: 0;
  }
  .mu-kids-blocks {
    margin-top: 15px;
  }
  .mu-kids-state {
    height: calc(#{$kids-height} / 2);
  }
  .mu-kids-character {
    height: $kids-characters-height;
  }
  .mu-kids-blocks {
    height: calc(#{$kids-height} - #{$kids-characters-height} - 30px);
    margin-left: 0;
    margin-right: 0;
    position: relative;
    .mu-kids-overlay {
      border-radius: 10px;
      position: absolute;
      z-index: 80;
      background-color: white;
      opacity: 0.50;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      cursor: not-allowed;
    }
    .mu-kids-reset-button,
    .mu-kids-compass-rose,
    .mu-kids-submit-button {
      position: absolute;
      right: 15px;
      width: 56px;
      height: 56px;
      z-index: 70; //Value defined by blockly
    }
    .mu-kids-compass-rose {
      top: 15px;
      opacity: 0.75;
    }
    .mu-kids-submit-button {
      z-index: 90;
      bottom: 15px;
      button {
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }
    .mu-kids-reset-button {
      bottom: 80px;
      transform: scale(0.9);
      paper-fab {
        background-color: $mu-color-disabled;
      }
    }

  }

  .mu-kids-character {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    border: none;
    img {
      height: 100%;
    }
    .mu-kids-character-speech-bubble {

      @media screen and (max-width: $screen-sm-max) {
        h4 {
          &.text-warning {
            font-size: 18px;
            margin-top: 8px;
          }
        }
        ul.results-list li {
          font-size: 13px
        }
      }

      @media screen and (max-width: $screen-xs-max) {
        h4 {
          font-size: 20px;
          &.text-warning {
            font-size: 14px;
            margin-top: 5px;
          }
        }
        ul.results-list li {
          font-size: 12px
        }
      }

      &.passed_with_warnings {
        padding-top: 5px;
        padding-bottom: 5px;

        .results-list {
          margin-top: -10px;
        }
      }

      ul {
        margin: 0;
      }
      &.no-tabs {
        .mu-kids-prev-speech,
        .mu-kids-next-speech {
          right: 0px;
        }
      }
      .mu-kids-prev-speech,
      .mu-kids-next-speech {
        position: absolute;
        right: $kids-speech-tabs-width;
        font-size: 90%;
        color: darken($mu-color-disabled, 25%);
        &:hover {
          cursor: pointer;
        }
      }
      div.mu-kids-character-speech-bubble-normal {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      div.mu-kids-character-speech-bubble-failed {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      ul.mu-kids-character-speech-bubble-tabs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
        width: $kids-speech-tabs-width;
        position: absolute;
        right: 0;
        top: 0;
        list-style-type: none;
        padding: 0;
        background-color: lighten($kids-speech-background-color, 2%);
        border-radius: 0 10px 10px 0;
        li {
          border-left: $kids-speech-border;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          padding: 0;
          margin: 0;
          height: 50%;
          width: 100%;
          &:first-child {
            border-radius: 0 10px 0 0
          }
          &:last-child {
            border-radius: 0 0 10px 0
          }
        }
        li.separator {
          cursor: default;
          pointer-events: none;
          height: 0;
          width: 100%;
          border-top: $kids-speech-border;
        }
        li.active {
          border-left: none;
          background-color: $kids-speech-background-color;
        }
      }
      .mu-kids-prev-speech {
        top: 0;
      }
      .mu-kids-next-speech {
        bottom: 0;
      }
      position: relative;
      display: flex;
      align-items: center;
      padding: 15px 50px 15px 15px;
      &.no-tabs {
        padding-right: 25px;
      }
      color: #333;
      border-radius: 10px;
      background: $kids-speech-background-color;
      border: $kids-speech-border;
      height: 90px;
      width: 100%;
      p {
        margin-bottom: 0;
        &:not(:first-child) {
          display: none;
        }
      }
      &:before {
        position: absolute;
        top: calc(50% - #{$kids-speech-arrow-size + 2px} / 2);
        left: -$kids-speech-arrow-size - 2px;
        border-width: (1px + $kids-speech-arrow-size / 2) (2px + $kids-speech-arrow-size) (1px + $kids-speech-arrow-size / 2) 0;
        content: '';
        border-style: solid;
        border-color: transparent $kids-speech-border-color;
      }
      &:after {
        position: absolute;
        top: calc(50% - #{$kids-speech-arrow-size} / 2);
        left: -$kids-speech-arrow-size;
        border-width: ($kids-speech-arrow-size / 2) $kids-speech-arrow-size ($kids-speech-arrow-size / 2) 0;
        border-color: transparent $kids-speech-background-color;
        content: '';
        border-style: solid;
      }

      $classes: (
              failed: $mu-color-danger,
              passed: $mu-color-success,
              aborted: $mu-color-broken,
              errored: $mu-color-broken,
              passed_with_warnings: $mu-color-warning
      );
      @each $status, $class in $classes {
        $lighten-class: lighten($class, 35%);
        &.#{$status} {
          border: none;
          background: $lighten-class;
          &:before {
            border: none;
          }
          &:after {
            border-color: transparent $lighten-class;
          }
        }
      }

    }

  }

  .mu-kids-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    strong {
      margin-top: 7.5px;
    }
    #mu-actual-state-text {
      display: none;
    }
    .mu-kids-state-image {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
      gs-board {
        > table {
          transform: scale(1.5);
          background-color: $kids-speech-border-color !important;
          border: $kids-speech-border !important;
          border-radius: 12px;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1px;
        max-height: 100%;
        td, th {
          &.gs-board {
            border: $kids-speech-border !important;
            background-color: #FFFFFF;
          }
          &.gbs_lx,
          &.gbs_lh,
          &.gbs_lv {
            background-color: $kids-speech-background-color !important;
            border: 0 solid transparent !important;
          }
          &.gbs_gh.gs-cell {
            background: rgba(221, 221, 136, 0.7) !important;
            outline: 3px solid $kids-speech-border-color !important;
          }
        }
      }
    }
  }

  .mu-kids-blocks {
    form,
    [id*="custom-editor"],
    gs-element-blockly,
    #blocklyDiv,
    .blocklySvg {
      min-width: 100% !important;
      min-height: 100% !important;
      width: 100% !important;
      height: 100% !important;
    }
    gs-element-blockly {
      padding: 0;
      margin: 0;
    }
    .blocklyMainBackground {
      rx: 10px !important;
      ry: 10px !important;
    }
    .blocklyScrollbarHandle {
      display: none;
      fill: $kids-speech-background-color !important;
      stroke: $kids-speech-border-color !important;
      stroke-width: 1px !important;
    }
    .blocklyScrollbarVertical,
    .blocklyScrollbarHorizontal {
      display: none;
    }
    .blocklyToolboxDiv {
      background-color: $kids-speech-background-color !important;
      border: $kids-speech-border !important;
      border-right: none !important;
      border-top-left-radius: 10px !important;
      border-bottom-left-radius: 10px !important;
    }
    .blocklyFlyoutBackground {
      fill: $kids-speech-background-color !important;
      border: $kids-speech-border !important;
      border-right: none !important;
    }
  }
}

.mu-kids-landscape-support {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: $kids-height;
  min-height: $kids-height;
  max-height: $kids-height;
}

@media screen and (orientation: landscape) {
  .mu-kids-landscape-support {
    display: none;
  }
  .mu-kids-exercise {
    visibility: unset;
  }
  .mu-kids-reset-button,
  .mu-kids-submit-button {
    display: block;
  }
}

@media screen and (orientation: portrait) {
  .mu-kids-landscape-support {
    display: flex;
  }
  .mu-kids-exercise {
    visibility: hidden;
  }
  .mu-kids-reset-button,
  .mu-kids-submit-button {
    display: none;
  }
}

@media screen and (max-height: $screen-xs-min) {
  .mu-kids-exercise {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;

    .mu-kids-state {
      height: 50vh;
    }
    .mu-kids-blocks {
      height: calc(100vh - #{$kids-characters-height} - 30px);
    }
  }
}