@import "compass/utilities/general/clearfix"
@import "compass/css3"

ul.messenger.messenger-theme-block.messenger-fixed
  width: 100%
  top: 0
  left: 0
  margin-left: 0px

  &.messenger-on-bottom
    top: auto
    bottom: 0

  &.messenger-on-top
    top: 0px
    bottom: auto

  &.messenger-on-top, &.messenger-on-bottom
    left: 0px
    right: 0px

    &.messenger-on-right, &.messenger-on-left
      width: 350px

    &.messenger-on-left
      right: auto

    &.messenger-on-right
      left: auto

  .messenger-message-slot
    max-width: none

  .messenger-message
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
    border-width: 1px
    border-style: solid
    text-align: center
    padding: 1em

    &.alert-warning
      color: #c09853
      background-color: #fcf8e3
      border-color: #fbeed5

    &.alert-error, &.alert-danger
      color: #b94a48
      background-color: #f2dede
      border-color: #eed3d7

    &.alert-success
      color: #468847
      background-color: #dff0d8
      border-color: #d6e9c6

    &.alert-info
      color: #3a87ad
      background-color: #d9edf7
      border-color: #bce8f1

    .messenger-close
      +opacity(0.5)
      padding: 0
      cursor: pointer
      color: inherit
      background: transparent
      border: 0
      -webkit-appearance: none
      float: right
      position: relative
      top: -13px
      left: 11px
      font-size: 22px

      &:hover
        +opacity(0.8)

      &:active
        +opacity(1)