.android {
  #header {
    background-color: $blue;
    color: white;
    transition: background-color 0.5s;

    &.inactive {
      background-color: $grey_l;
      color: $grey_d;
    }
  }
  .contact-details .name {
    font-weight: 400;
  }
  .conversation.placeholder .conversation-header {
    display: none;
  }
  .conversation-header,
  .bubble {
    @include avatar-colors;
  }
  .bottom-bar {
    min-height: 10px;
  }
  .bubble {
    padding: 9px 12px;
    border-radius: $border-radius;
    box-shadow: 0 3px 3px -4px black;
  }

  .outgoing .bubble {
    background-color: white;
  }
  .outgoing .hourglass {
    @include hourglass(#999);
  }
  .incoming .hourglass {
    @include hourglass(#fff);
  }

  .incoming .bubble {
    .sender,
    .content,
    .body,
    .meta,
    a,
    .fileView {
      @include invert-text-color;
    }
    .attachments,
    .content {
      a {
        color: $grey_l;
      }
    }
  }

  .incoming .bubble .fileView .icon {
    @include color-svg('../images/file.svg', white);
    &.audio {
      @include color-svg('../images/audio.svg', white);
    }
    &.video {
      @include color-svg('../images/video.svg', white);
    }
    &.voice {
      @include color-svg('../images/voice.svg', white);
    }
  }

  button.clock {
    @include header-icon-white('../images/clock.svg');
  }
  .inactive button.clock {
    @include header-icon-black('../images/clock.svg');
  }
  button.hamburger {
    @include header-icon-white('../images/menu.svg');
  }
  .inactive button.hamburger {
    @include header-icon-black('../images/menu.svg');
  }
  button.back {
    @include header-icon-white('../images/back.svg');
  }
  .inactive button.back {
    @include header-icon-black('../images/back.svg');
  }
}