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

ul.messenger
  margin: 0
  padding: 0

  > li
    list-style: none

    margin: 0
    padding: 0

  &.messenger-empty
    display: none

  .messenger-message
    +clearfix

    &.messenger-hidden
      display: none

    .messenger-phrase, .messenger-actions a
      padding-right: 5px

    .messenger-actions
      float: right

      a
        cursor: pointer
        text-decoration: underline

    ul, ol
      margin: 10px 18px 0

  &.messenger-fixed
    position: fixed
    z-index: 10000

    .messenger-message
      min-width: 0

      +box-sizing(border-box)

    .message .messenger-actions
      float: left

    &.messenger-on-top
      top: 20px

    &.messenger-on-bottom
      bottom: 20px

    &.messenger-on-top, &.messenger-on-bottom
      left: 50%
      width: 800px
      margin-left: -400px

      @media (max-width: 960px)
        left: 10%
        width: 80%
        margin-left: 0px

      &.messenger-on-right
        right: 20px
        left: auto

      &.messenger-on-left
        left: 20px
        margin-left: 0px

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

      .messenger-actions
        float: left

  .messenger-spinner
    display: none // Default theme doesn't use the spinner

  .messenger-clickable
    cursor: pointer