@mixin invert-text-color {
  &, .meta {
    color: white;
  }

  &, .content {
    &::selection, a::selection {
      background: white;
      color: $grey_d;
    }

    &::-moz-selection, a::-moz-selection {
      background: white;
      color: $grey_d;
    }
  }

  &, .attachments, .content {
    a {
      color: $grey_l;
    }
  }
}

.ios {
  .bubble {
    .content .body {
      display: inline-block;
      padding: 10px;
    }
    .content, .attachments img {
      border-radius: 15px;
    }
    .meta {
      float: none;
      clear: both;
    }
  }
  .incoming .content {
    background-color: #e5e5e5;
    color: black;
    float: left;
  }
  .outgoing {
    .content {
      background-color: $blue;
      @include invert-text-color;
      float: right;
    }
    .timestamp {
      float: none;
    }
    .status {
      float: right;
    }
  }
  .attachment {
    a {
      border-radius: 15px;
    }
    margin-bottom: 1px;
  }
}

.android {
  .bubble {
    padding: 9px 12px;
    border-radius: $border-radius;
    box-shadow: 0 3px 3px -4px black;
  }
  .outgoing .bubble {
    background-color: $grey_l;
  }

  .incoming .bubble {
    @include invert-text-color;
  }
}

.avatar, .conversation-header, .android .bubble {
  &.red         { background-color: $material_red         ; }
  &.pink        { background-color: $material_pink        ; }
  &.purple      { background-color: $material_purple      ; }
  &.deep_purple { background-color: $material_deep_purple ; }
  &.indigo      { background-color: $material_indigo      ; }
  &.blue        { background-color: $material_blue        ; }
  &.light_blue  { background-color: $material_light_blue  ; }
  &.cyan        { background-color: $material_cyan        ; }
  &.teal        { background-color: $material_teal        ; }
  &.green       { background-color: $material_green       ; }
  &.light_green { background-color: $material_light_green ; }
  &.orange      { background-color: $material_orange      ; }
  &.deep_orange { background-color: $material_deep_orange ; }
  &.amber       { background-color: $material_amber       ; }
  &.blue_grey   { background-color: $material_blue_grey   ; }
  &.grey        { background-color: #999999               ; }
  &.default     { background-color: $blue                 ; }
}