$modal-header-height: 95px;
$modal-footer-height: 95px;

.mu-kids-exercise.mu-kindergarten {

  // layout

  display: flex;
  flex-flow: column;

  .mu-kids-exercise-workspace {
    display: flex;
    flex-flow: row;
    height: calc(100% - #{$kids-characters-height} - 15px);
    width: 100%;

    .mu-kids-single-state,
    .mu-kids-blocks {
      width: 50%;
      height: 100%;
    }

    .mu-kids-blocks {
      margin-right: 15px;
    }

    &.mu-full-workspace {
      .mu-kids-single-state {
        display: none
      }
      .mu-kids-blocks {
        width: 100%;
        height: 100%
      }
    }

  }

  .mu-kids-blocks {
    margin-top: 0;
  }

  // no board numbers,
  // but a thicker border instead

  table.gbs_board.style-scope.gs-board {
    padding: 3px;
  }

  .gbs_lv.gbs_lvl.style-scope.gs-board,
  .gbs_lv.gbs_lvr.style-scope.gs-board,
  tr.style-scope.gs-board:first-child,
  tr.style-scope.gs-board:last-child {
    display: none
  }

  // no final state,
  // initial state fills its area

  .mu-kids-state {
    &.mu-state-initial {
      height: 100%;
      width: 100%;
    }
    &.mu-state-final {
      display: none;
    }
    .mu-kids-state-image {
      padding: 30px;
      img {
        padding: 0;
        border: 3px solid black;
        border-radius: 30px;
      }
    }
  }

  .mu-kids-compass-rose {
    display: none;
  }
}

.mu-kindergarten.container-fluid {
  .mu-kids-exercise-description,
  .mu-kids-exercise-description-fixed {
    padding: 0;
  }
}

.modal-content.kindergarten {
  $width-lg: 800px;
  $height-lg: $width-lg * 0.625;

  width: $width-lg;
  height: $height-lg;

  top: calc(50vh - #{$height-lg} / 2);

  @media (orientation: landscape)  and (max-height: $height-lg + 50px) {
    $height-sm: 85vh;
    $width-sm: $height-sm / 0.625;

    width: $width-sm;
    height: $height-sm;

    top: calc(50vh - #{$height-sm} / 2);
    left: calc(50vw - #{$width-sm} / 2);
  }

  @media (orientation: portrait) {
    $height-sm: 85vh;
    $width-sm: 85vw;

    width: $width-sm;
    height: $height-sm;

    top: calc(50vh - #{$height-sm} / 2);
    left: calc(50vw - #{$width-sm} / 2);
  }

  .modal-header,
  .modal-footer {
    text-align: center;
    text-transform: uppercase;
  }

  .modal-body.mu-kids-context-body {
    height: 100%;
    div img, p img {
      width: 100%;
      height: 100%;
      object-position: center;
      object-fit: contain;
    }
  }
}

#kids-results.mu-kids-modal-border {
  .modal-body{
    height: calc(100% - #{$modal-header-height} - #{$modal-footer-height});
  }
}

#kids-results-aborted.mu-kids-modal-border {
  .modal-content.kindergarten {
    .modal-body {
      height: calc(100% - #{$modal-header-height});
    }

    h4.modal-header {
      margin: 0;
    }
  }
}

$bubble-border-width: 3px;
$bubble-height: 90px;
$bubble-border: $bubble-border-width solid $kids-speech-border-color;
$bubble-ballon-size: 24px;

$bubble-background-color: white;
$bubble-padding: 30px;

.mu-kindergarten-header {
  @include display-flex(row nowrap, flex-start, flex-start);

  align-self: flex-start;

  width: 100%;

  .mu-kindergarten-character {
    @include display-flex(row nowrap, flex-start, flex-start);

    margin-right: 15px;

    width: 50%;

    $bubble-border-width: 3px;
    $bubble-height: 90px;
    $bubble-border: $bubble-border-width solid $kids-speech-border-color;
    $bubble-ballon-size: 24px;

    $bubble-background-color: white;
    $bubble-padding: 30px;

    .mu-kindergarten-character-speech-bubble {
      @include display-flex(row, flex-start, center);
      position: relative;

      padding: $bubble-padding;
      padding-right: $bubble-height / 2 + $bubble-padding;

      color: #333;
      border-radius: 10px;
      background: white;
      border: $bubble-border;
      height: $bubble-height;
      min-height: $bubble-height;
      max-height: $bubble-height;

      width: 100%;
      max-width: 100%;

      margin-top: 10px;

      p {
        margin: 0;
      }

      &:before {
        content: "";
        position: absolute;
        bottom: -20px;
        top: $bubble-height / 2 - $bubble-ballon-size / 2;
        left: -$bubble-ballon-size / 2;
        width: $bubble-ballon-size;
        height: $bubble-ballon-size;
        background: white;
        border: $bubble-border;
        border-left-color: $bubble-background-color;
        border-top-color: $bubble-background-color;
        transform: rotate(135deg);
        border-radius: 50%;
      }
    }

    .mu-kindergarten-buttons {
      display: flex;
      flex-flow: column;
      position: absolute;
      top: -$bubble-border-width;
      right: -$bubble-border-width;
      height: calc(100% + #{$bubble-border-width} * 3);
      border-radius: 10px;

      .mu-kindergarten-show-context,
      .mu-kindergarten-play-description {
        border: $bubble-border;
        height: calc(50% - #{$bubble-border-width} / 2);
        width: $bubble-height / 2;
      }

      .mu-kindergarten-show-context {
        border-top-right-radius: 10px;
        border-bottom-width: $bubble-border-width * 2/3;
      }

      .mu-kindergarten-play-description {
        border-bottom-right-radius: 10px;
        border-top-width: $bubble-border-width * 2/3;
      }

      .mu-kindergarten-button-image {
        width: 100%;
      }

    }
  }

  .mu-kindergarten-hint {

    $light-bubble-color: #FAD59F;
    $light-bubble-border: $bubble-border-width solid $light-bubble-color;

    @include display-flex(row-reverse nowrap, flex-start, flex-start);

    width: 50%;
    margin-left: 15px;

    margin-top: 10px;

    button {
      background: none;
      border: none;
      outline: none;
    }

    .mu-hint-light {
      $light-height: 80px;
      padding-left: 15px;

      &.off {
        height: $light-height * 0.75;
        margin-right: 11px;
        margin-top: 21px;
      }
      &.on {
        cursor: pointer;
        height: $light-height;
        &:hover {
          filter: brightness(1.15);
        }
      }
    }

    .mu-kindergarten-light-speech-bubble {
      @include display-flex(column, center, flex-start);

      position: relative;

      padding: $bubble-padding;

      color: #333;
      border-radius: 10px;
      background: $light-bubble-color;
      border: $light-bubble-border;
      min-height: $bubble-height;
      z-index: 1;

      width: 75%;
      max-width: 100%;

      p {
        margin: 0;
        text-align: center;
      }

      &:after {
        content: "";
        position: absolute;
        bottom: -20px;
        top: $bubble-height / 2 - $bubble-ballon-size / 2;
        right: -$bubble-ballon-size / 2;
        width: $bubble-ballon-size;
        height: $bubble-ballon-size;
        background: $light-bubble-color;
        border: $light-bubble-border;
        border-radius: 50%;
      }

      .mu-kindergarten-exercise-hint {
        width: 100%;
      }

      .mu-kindergarten-hint-media {

        @include display-flex(column, center, center);

        background: white;
        width: calc(100% + #{$bubble-padding} * 10/6);
        margin: $bubble-padding (-$bubble-padding * 5/6) (-$bubble-padding * 5/6) (-$bubble-padding * 5/6);
        padding: $bubble-padding * 5/6;

        &.closed {
          display: none;
        }

        .media-object {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }

      .expand-or-collapse-hint-media {
        $button-width: 60px;

        position: absolute;
        width: $button-width;
        height: $button-width / 2;
        bottom: 3px;
        left: calc(50% - #{$button-width / 2});

        .fa-caret-down {
          color: white;
        }

        .fa-caret-up {
          color: $light-bubble-color;
        }
      }

      &:not(.open) {
        display: none;
      }
    }

  }
}