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

@import url("//fonts.googleapis.com/css?family=Raleway:400")

@mixin unselectable
  -moz-user-select: none
  -webkit-user-select: none
  -o-user-select: none
  user-select: none

ul.messenger-theme-ice
  +unselectable
  font-family: "Raleway", sans-serif

  .messenger-message
    +border-radius(5px)
    +box-shadow(0 0 0 1px rgba(0, 0, 0, 0.14), 0 4px #aaa, 0 5px rgba(0, 0, 0, 0.05))
    border: 0px
    background-color: #f6f6f6
    position: relative
    margin-bottom: 1.5em
    font-size: 13px
    color: #666
    font-weight: 500
    padding: 12px 22px

    .messenger-close
      position: absolute
      top: 0px
      right: 0px
      color: #888
      opacity: 1
      font-weight: bold
      display: block
      font-size: 20px
      line-height: 20px
      padding: 8px 10px 7px 7px
      cursor: pointer
      background: transparent
      border: 0
      -webkit-appearance: none

      &:hover
        color: #444

      &:active
        color: #222

    .messenger-actions
      float: none
      margin-top: 10px

      a
        +box-shadow(0px 0px 0px 1px rgba(0, 0, 0, 0.1), inset 0px 1px rgba(255, 255, 255, 0.05))
        +border-radius(4px)
        position: relative
        text-decoration: none
        display: inline-block
        padding: 10px
        color: #888
        margin-right: 10px
        padding: 3px 10px 5px
        text-transform: capitalize

        &:hover, &:active
          +box-shadow(0px 0px 0px 1px rgba(0, 0, 0, 0.1), inset 0px 1px rgba(255, 255, 255, 0.15), 0 2px #aaa)
          color: #444

        &:active
          +box-shadow(0px 0px 0px 1px rgba(0, 0, 0, 0.1), inset 0px 1px rgba(255, 255, 255, 0.15), 0 1px #aaa)
          top: 1px

      .messenger-phrase
        display: none

    .messenger-message-inner:before
      display: block
      z-index: 20
      font-weight: bold
      margin-bottom: 2px

    &.alert-success
      .messenger-message-inner:before
        content: "Success"

    &.alert-error
      .messenger-message-inner:before
        content: "Error"

    &.alert-info
      .messenger-message-inner:before
        content: "Information"