.chat-toaster {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;

  .icon-img {
    display: none !important;
  }

  &.static {
    position: relative;
  }

  &.rounded {

    .chat-toaster-content {
      border-radius: 4px;

      &:first-child:not(:last-child) {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }

      &:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
      }

      &:not(:first-child):not(:last-child) {
        border-radius: 0;
      }
    }
  }

  .chat-toaster-content {
    background-color: #888;
    border-top: 1px solid darken(#888, 5%);
    color: #fff;
    width: 100%;
    font-size: 12px;
    line-height: 1.2;
    position: relative;
    clear: both;
    word-break: break-word;
    text-align: center;
    display: table;

    .chat-toaster-text, .chat-toaster-icon, .chat-toaster-close {
      display: table-cell;
      vertical-align: top;
      padding: 5px;
    }

    .chat-toaster-icon, .chat-toaster-close {
      width: 10%;
    }

    &.error {
      background-color: rgba(#90414b, .9);
      border-color: darken(#90414b, 5%);
    }

    &.info {
      background-color: rgba($chat-info, .9);
      border-color: darken($chat-info, 5%);
    }

    &.warn {
      background-color: rgba($status-away, .9);
      border-color: darken($status-away, 5%);
    }

    &.success {
      background-color: rgba($status-online, .9);
      border-color: darken($status-online, 5%);
    }
  }

  .chat-toaster-close {
    &:hover {
      cursor: pointer;
    }
  }
}