@mixin full-size-character {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
  }
}

@each $class in success, warning, danger, broken {
  .mu-kids-callout-#{$class} {
    h4 {
      @extend .text-#{$class};
    }
  }
}

$capital-animation-width: 135px;
.capital-animation {
  float: left;
  width: $capital-animation-width;
  height: $capital-animation-width;
  margin-left: -20px;
  margin-top: -20px;
}

.modal-open {
  .mu-kids-exercise,
  .mu-navbar,
  footer {
    filter: blur(5px);
  }
  .modal-header,
  .modal-footer,
  .modal-body {
    padding: 20px;
    .text-box,
    .submission-results {
      padding: 0;
    }
    .submission-result-error {
      padding-bottom: 30px;
    }
  }
}

.mu-kids-default-success {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0 0;
  img {
    padding-bottom: 10px;
  }
}

.mu-kids-modal-border {

  .modal-dialog {

    height: 100vh;
    width: 100vw;
    margin: 0;

    .modal-content {

      position: absolute;

      $width-lg: 800px;

      width: $width-lg;

      top: 60px;
      left: calc(50% - #{$width-lg} / 2);

      @media (max-width: $width-lg + 30px) {
        width: calc(100vw - 30px);
      }

      $border-width: 16px;
      border-width: $border-width;
      border-style: solid;
      border-color: $mu-color-link;
      border-radius: $border-width;
      box-shadow: none;

      .modal-body {
        div, p {
          height: 100%;
          .mu-kids-results-carrousel,
          .mu-kindergarten-context-image-slides {
            > :not(.active) {
              display: none;
            }
          }
        }
        .mu-level p {
          height: unset;
        }
      }

      .mu-kids-modal-button {
        $diameter: 64px;
        position: absolute;
        border-radius: 50%;
        height: $diameter;
        width: $diameter;
        color: white;
        font-weight: bold;
        border: none;
        padding: 0;
        background: $mu-color-link;
        &.mu-next,
        &.mu-close {
          top: - $diameter / 2 - $border-width / 2;
          right: - $diameter / 2 - $border-width / 2;
        }
        &.mu-previous {
          top: - $diameter / 2 - $border-width / 2;
          left: - $diameter / 2 - $border-width / 2;
        }
      }

      $mu-statuses-colors: (
        'broken': $mu-color-broken,
        'danger': $mu-color-danger,
        'success': $mu-color-success,
        'warning': $mu-color-warning,
        'passed': $mu-color-success,
        'passed_with_warnings': $mu-color-warning,
        'passed-with-warnings': $mu-color-warning,
        'failed': $mu-color-danger,
        'errored': $mu-color-broken,
        'aborted': $mu-color-broken,
        'pending': $mu-color-info
      );

      @each $class, $color in $mu-statuses-colors {
        &.#{$class} {
          border-color: $color;
          .mu-kids-modal-button {
            background: $color;
          }
        }
        .mu-kids-character.kindergarten {
          @include full-size-character;
        }

        .submission-results.kindergarten {
          width: 100%;
          height: 100%;
          .mu-kids-callout-#{$class},
          p {
            display: none;
          }
          .mu-kids-default-#{$class} {
            @include full-size-character;
          }
        }
      }
    }
  }
}