@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 {
  #header {
    height: 64px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background-color: $grey_l;
    color: $grey_d;
    h1 { display: none; }
  }
  .tool-bar {
    float: left;
    padding: 15px;
  }
  textarea.send-message,
  input.search {
    border-radius: 5px;
    height: 34px;
    line-height: 34px;
  }
  .conversation-header {
    background-color: $grey_l;
    color: $grey_d;
    border-color: rgba(0,0,0,0.05);
  }
  .menu .hamburger {
    @include header-icon-black('/images/menu.svg');
  }

  .control .content {
    padding: 10px;
  }
  .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 {
  #header {
    background-color: $blue;
    color: white;
    transition: background-color 0.5s;

    &.inactive {
      background-color: $grey_l;
      color: $grey_d;
    }
  }
  .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, .android .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                 ; }
}