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

.problem-alert
  z-index: 10
  position: absolute
  // Position these at the end of the spell editor, right above the spell toolbar.
  bottom: -20px
  left: 10px
  right: 10px
  background: transparent
  border: 1px solid transparent
  padding: 0
  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

  &.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)