$messagingBoxWidth: 20em;
$messagingBoxHeight: 100%;
$conversationBoxHeight: 20em;

.fixed-box {
  border: solid 1px white;
  padding: 1em;
  position: fixed;
  bottom: 0;
}

.airmail-border {
  border: 0.25em solid transparent;
  border-image: 4 repeating-linear-gradient(-45deg, red 0, red 1em, white 0, white 2em,
    #58a 0, #58a 3em, white 0, white 4em);

}

.status-direct,
.item-list .conversation {
  @extend .airmail-border;
}

.messaging-box {
  @extend .fixed-box;

  right: 1em;
  width: $messagingBoxWidth;
  background: $ui-base-color;
  height: 4em;
  color: white;
  z-index: 10;

  &.active {
    height: $messagingBoxHeight;
  }

  .messager-textarea {
    width: 100%;
  }

  .title {
    color: white;
  }
}

.contact-list-container {
  overflow-x: auto;
}

.contact-list {
  display: block;
  padding: 1em;
  min-height: 5em;
  list-style-type: none;
  color: white;

  .contact {
    margin-bottom: 0.5rem;
  }
}


.toggle-list {
  float: right;
  margin-left: 1em;
  background: $ui-primary-color;
  border: 0;
  padding: .5em;

  &.active {
    background: $highlight-text-color;
  }
}

.conversation {


  .conversation__content {
    padding-right: 0;
  }

  .conversation_reply,
  .icon-button {
    &:hover {
      color: $ui-highlight-color;
      background: mix($ui-base-color, $ui-secondary-color);
    }
  }

  .conversation_reply,
  .icon-button,
  .status__action-bar-dropdown {
    display: inline-block;
    float: right;
    width: 18em;
    height: 3.2em;
    text-align: center;
  }
}

.conversations_list {
  @extend .fixed-box;
  right: $messagingBoxWidth + 2em;
  bottom: 0;
  width: 100%;
  padding: 0.5em;

  overflow-x: auto;
}

.conversation-item {
  float: right;
  width: 20em;
  margin-left: 2em;
  padding: 1em;
  border-radius: 15px;
  background: $classic-base-color;

  &.has-new-message {
    background: $ui-highlight-color;
    color: $classic-primary-color;
  }
}

.conversation_created-at {
  margin-right: 1em;
}

.conversation_stream {
  padding-top: 1em;
  height: $conversationBoxHeight;
  overflow: auto;
  background: $ui-secondary-color;

  .message {
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5em;
    padding: 0.5em 1em;
    width: 80%;
  }

  .mine {
    text-align: right;
    background: $classic-primary-color;
    float: right;

    .arrow-down {
      border-top-color: $classic-primary-color;
      left: 1em;
    }
  }

  .theirs {
    text-align: left;
    background: $ui-highlight-color;
    float: left;

    .arrow-down {
      border-top-color: $ui-highlight-color;
      right: 1em;
    }
  }

  .arrow-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid $classic-primary-color;
    position: relative;
    bottom: -1em;

  }
}