codecombat/app/styles/play/level/tome/problem_alert.sass

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"


#problem-alert-view.problem-alert
  z-index: 10
  position: absolute
  // Position these at the end of the spell editor, right above the spell toolbar.
  top: 45px
  right: 500px
  background: transparent
  border: 1px solid transparent
  padding: 0
  font-size: 18px
  text-shadow: none
  color: white
  word-wrap: break-word
  border-image: url(/images/level/code_editor_error_background.png) 16 20 fill round
  border-width: 16px 20px

  // Jiggle animation
  // TODO: Cleanup browser compat nonsense with sass mixin
  // TODO: http://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
  animation-duration: .4s
  animation-name: jiggle
  animation-play-state: running
  animation-iteration-count: infinite
  @keyframes jiggle
    0%
      transform: rotate(0deg)
    25%
      transform: rotate(1deg)
    50%
      transform: rotate(0deg)
    75%
      transform: rotate(-1deg)
    100%
      transform: rotate(0deg)
  -moz-animation-duration: .4s
  -moz-animation-name: jiggle
  -moz-animation-play-state: running
  -moz-animation-iteration-count: infinite
  @-moz-keyframes jiggle
    0%
      -moz-transform: rotate(0deg)
    25%
      -moz-transform: rotate(1deg)
    50%
      -moz-transform: rotate(0deg)
    75%
      -moz-transform: rotate(-1deg)
    100%
      -moz-transform: rotate(0deg)
  -webkit-animation-duration: .4s
  -webkit-animation-name: jiggle
  -webkit-animation-play-state: running
  -webkit-animation-iteration-count: infinite
  @-webkit-keyframes jiggle
    0%
      -webkit-transform: rotate(0deg)
    25%
      -webkit-transform: rotate(1deg)
    50%
      -webkit-transform: rotate(0deg)
    75%
      -webkit-transform: rotate(-1deg)
    100%
      -webkit-transform: rotate(0deg)

  &.no-hint
    // Since it's probably only one line, let's make it not look weird by being tiny.
    padding: 7px

  .close
    @include opacity(0.80)
    text-shadow: none
    cursor: pointer
    color: white
    float: right

    &:hover, &:focus
      @include opacity(1)

  .problem-subtitle
    font-size: 80%

  //&.alert-error

  &.alert-warning
    border-image-source: url(/images/level/code_editor_warning_background.png)

  &.alert-info
    border-image-source: url(/images/level/code_editor_info_background.png)

html.no-borderimage
  .problem-alert
    border-width: 0
    border-image: none
    background: transparent url(/images/level/code_editor_error_background.png) no-repeat
    background-size: 100% 100%
    padding: 18px 35px 18px 14px

    &.alert-warning
      background-image: url(/images/level/code_editor_warning_background.png)
      
    &.alert-info
      background-image: url(/images/level/code_editor_info_background.png)