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

@import "messenger-spinner"

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

$defaultThemeBorderRadius: 4px
$spinnerSize: 32px

ul.messenger-theme-future
  +box-shadow(inset 0px 1px rgba(255, 255, 255, 0.24), 0px 1px 5px rgba(0, 0, 0, 0.6))
  +border-radius($defaultThemeBorderRadius)
  +unselectable
  +background-image(linear-gradient(rgb(92, 91, 91), rgb(53, 53, 53)))
  background-color: rgb(92, 91, 91)
  border: 1px solid rgba(0, 0, 0, 0.5)

  .messenger-message
    +box-shadow(inset 0px 1px rgba(255, 255, 255, 0.13), inset 0px -1px rgba(0, 0, 0, 0.23), inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07))
    +border-radius(0px)
    position: relative
    border: 0px
    margin-bottom: 0px
    font-size: 13px
    background: transparent
    color: #f0f0f0
    text-shadow: 0px 1px #111
    font-weight: 500
    padding: 10px 30px 13px 65px

    a
      color: #5599ff

    .messenger-close
      position: absolute
      top: 0px
      right: 0px
      color: #888
      text-shadow: 0px 1px #000
      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: #bbb

      &:active
        color: #777

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

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

        &:hover
          +box-shadow(0px 0px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 1px rgba(255, 255, 255, 0.2))
          color: #f0f0f0

        &:active
          +box-shadow(0px 0px 0px 1px rgba(0, 0, 0, 0.28), inset 0px 1px rgba(0, 0, 0, 0.1))
          background: rgba(0, 0, 0, 0.04)
          color: #aaa

      .messenger-phrase
        display: none

    .messenger-message-inner:before
      +box-shadow(inset 0px 1px 3px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(0, 0, 0, 0.2))
      +border-radius(50%)
      position: absolute
      left: 17px
      display: block
      content: " "
      top: 50%
      margin-top: -8px
      height: 13px
      width: 13px
      z-index: 20

    &.alert-success .messenger-message-inner:before
      +background-image(linear-gradient(top, rgb(95, 202, 74), rgb(9, 141, 56)))
      background-color: rgb(95, 202, 74)

    &.alert-info .messenger-message-inner:before
      +background-image(linear-gradient(top, rgb(97, 196, 184), rgb(25, 146, 163)))
      background-color: rgb(97, 196, 184)

    &.alert-error

      .messenger-message-inner:before
        +background-image(linear-gradient(top, rgb(221, 106, 69), rgb(145, 54, 26)))
        background-color: rgb(221, 106, 69)

      &.messenger-retry-soon
        +ui-spinner(#333, $spinnerSize, transparent, rgb(221, 106, 69), 1, 10s)

      &.messenger-retry-later
        +ui-spinner(#333, $spinnerSize, transparent, rgb(221, 106, 69), 1, 300s)

  .messenger-message-slot

    &.messenger-last .messenger-message
      +border-radius($defaultThemeBorderRadius $defaultThemeBorderRadius 0px 0px)

    &.messenger-first .messenger-message
      +border-radius(0px 0px $defaultThemeBorderRadius $defaultThemeBorderRadius)
      +box-shadow(inset 0px 1px rgba(255, 255, 255, 0.13), inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07))

    &.messenger-first.messenger-last .messenger-message
      +border-radius($defaultThemeBorderRadius)
      +box-shadow(inset 48px 0px 0px rgba(0, 0, 0, 0.3), inset 46px 0px 0px rgba(255, 255, 255, 0.07))

  .messenger-spinner
    display: block
    position: absolute
    left: 7px
    top: 50%
    margin-top: -1 * (($spinnerSize / 2) + 2px)
    z-index: 999
    height: $spinnerSize
    width: $spinnerSize
    z-index: 10