// Don't forget to handle the background of the popup windows!

body.dark-theme {
  background-color: $color-black;
  color: $color-gray-05;
}

.dark-theme {
  // _conversation

  .conversation {
    background-color: $color-gray-95;
  }

  .discussion-container {
    background-color: $color-gray-95;
  }

  .key-verification {
    .key {
      color: $color-dark-05;
      background: $color-dark-85;
      border: solid 1px $color-dark-60;
      border-radius: $border-radius;
    }

    .icon {
      &.verified {
        @include color-svg('../images/verified-check.svg', $color-dark-05);
      }
      &.shield {
        @include color-svg('../images/shield.svg', $color-dark-05);
      }
    }
  }

  .bottom-bar {
    form.active {
      textarea {
        border: solid 1px $blue;
      }
    }

    form.send {
      background-color: $color-gray-95;

      &.video-attachment {
        .outer {
          .play.icon {
            @include color-svg('../images/play.svg', white);
          }
        }
      }
    }

    .send-message {
      background-color: $color-dark-85;
      color: $color-dark-05;
      border: 1px solid $color-light-60;
      outline: 0;
    }
  }

  .toast {
    background-color: $color-gray-45;
    color: $color-white;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12),
      0 0 0 0.5px rgba(0, 0, 0, 0.08);
  }

  .confirmation-dialog {
    .content {
      background: $color-black;
      color: $color-dark-05;

      .buttons {
        button {
          background-color: $color-dark-85;
          border-radius: $border-radius;
          border: 1px solid $color-dark-60;
          color: $color-dark-05;

          &:hover {
            background-color: $color-dark-70;
            border-color: $color-dark-55;
          }
        }
      }
    }
  }

  .conversation-loading-screen {
    background-color: $color-gray-95;
  }

  .module-last-seen-indicator__bar {
    background-color: $color-dark-30;
  }

  .module-last-seen-indicator__text {
    color: $color-dark-30;
  }

  .module-scroll-down__button {
    background-color: $color-light-35;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);

    &:hover {
      background-color: $color-light-45;
    }
  }

  .module-scroll-down__button--new-messages {
    background-color: $color-signal-blue;

    &:hover {
      background-color: #1472bd;
    }
  }

  .module-scroll-down__icon {
    @include color-svg('../images/down.svg', $color-white);
  }

  // _debugLog

  .debug-log {
    &.modal {
      .content {
        textarea {
          background-color: $color-dark-85;
          border: 1px solid $color-dark-60;
          color: $color-dark-05;
        }
      }
    }

    .result {
      .open {
        border: solid 1px $color-dark-60;
        background-color: $color-dark-85;
        color: $color-dark-05;

        &:before {
          @include header-icon-white('../images/open_link.svg');
        }
      }

      .link {
        color: $color-dark-05;
        border: solid 1px $color-dark-60;
        border-right: none;
        background-color: $color-dark-85;
      }
    }
  }

  // _emoji
  .ep-emojies {
    background-color: $color-gray-95;
  }

  .ep-categories {
    background-color: $color-dark-85;
  }

  button.emoji {
    &:before {
      margin-top: 4px;
      @include color-svg('../images/smile.svg', $color-dark-30);
    }
  }

  .emoji-panel-container {
    .ep ::-webkit-scrollbar-thumb {
      background: $color-dark-55;

      &:hover {
        background: $color-dark-30;
      }
    }
  }

  // _global

  ::-webkit-scrollbar-track {
    background: $color-black;
  }

  ::-webkit-scrollbar-thumb {
    background: $color-dark-55;
    border: 2px solid $color-black;

    &:hover {
      background: $color-dark-30;
    }
  }

  ::-webkit-scrollbar-corner {
    background: $color-black;
  }

  .dark-overlay {
    background-color: $color-gray-95;
  }

  .title-bar {
    color: $color-dark-05;
  }

  button.grey {
    border: solid 1px #ccc;
    color: $grey;
    background: $grey_l;
    box-shadow: 0 0 10px -5px rgba($grey, 0.5);

    &:hover {
      box-shadow: 0 0 10px -3px rgba($grey, 0.7);
    }
  }

  a {
    color: $blue;
  }

  .file-input {
    .paperclip {
      &:before {
        @include color-svg('../images/paperclip.svg', $color-dark-30);
      }
    }
  }

  .contact-details {
    .number {
      color: $color-dark-30;
    }

    .verified-icon {
      @include color-svg('../images/verified-check.svg', $grey);
    }
  }

  .recipients-input {
    .recipients-container {
      background-color: white;
      border-bottom: 1px solid #f2f2f2;
    }

    .recipient {
      background-color: $blue;
      color: white;

      &.error {
        background-color: #f00;
      }
    }

    .results {
      box-shadow: 0px 0px 1px rgba(#aaa, 0.8);
    }
  }

  .loading {
    position: relative;
    &::before {
      border: solid 3px;
      border-color: $blue_l $blue_l $grey_l $grey_l !important;
    }
  }

  .x {
    &:before {
      @include color-svg('../images/x.svg', white);
    }
  }

  .expiredAlert {
    background: #f3f3a7;

    button {
      color: white;
      background: $blue;
    }
  }

  .full-screen-flow {
    color: black;
    a {
      color: $blue;
    }
    background: linear-gradient(
      to bottom,
      /* (1 - 0.41) * 255 + 0.41 * 213*/ rgb(238, 238, 238) 0%,
      /* (1 - 0.19) * 255 + 0.19 * 191*/ rgb(243, 243, 243) 12%,
      rgb(255, 255, 255) 27%,
      rgb(255, 255, 255) 60%,
      /* (1 - 0.19) * 255 + 0.19 * 222*/ rgb(249, 249, 249) 85%,
      /* (1 - 0.27) * 255 + 0.27 * 98 */ rgb(213, 213, 213) 100%
    );
    input {
      border: 2px solid $blue;
    }

    #qr {
      &.ready {
        border: 5px solid $blue;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }

      img {
        border: 5px solid white;
      }

      .dot {
        border: 3px solid $blue;
      }
    }

    .os-icon {
      &.apple {
        @include color-svg('../images/apple.svg', black);
      }
      &.android {
        @include color-svg('../images/android.svg', black);
      }
    }

    .banner-icon {
      // generic
      &.check-circle-outline {
        @include color-svg('../images/check-circle-outline.svg', #dedede);
      }
      &.alert-outline {
        @include color-svg('../images/alert-outline.svg', #dedede);
      }

      // import and export
      &.folder-outline {
        @include color-svg('../images/folder-outline.svg', #dedede);
      }
      &.import {
        @include color-svg('../images/import.svg', #dedede);
      }
      &.export {
        @include color-svg('../images/export.svg', #dedede);
      }

      // registration process
      &.lead-pencil {
        @include color-svg('../images/lead-pencil.svg', #dedede);
      }
      &.sync {
        @include color-svg('../images/sync.svg', #dedede);
      }

      // delete
      &.alert-outline-red {
        @include color-svg('../images/alert-outline.svg', red);
      }
      &.delete {
        @include color-svg('../images/delete.svg', #dedede);
      }
    }

    .button {
      color: white;
      background: $blue;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

      &.neutral {
        color: black;
        background: #dedede;
      }
      &.destructive {
        background: red;
      }
    }
    a.link {
      color: #2090ea;
    }

    .progress {
      .bar-container {
        background-color: $grey_l;
      }
      .bar {
        background-color: $blue_l;
      }
    }
  }

  // _index

  .gutter {
    background-color: $color-dark-85;

    ::-webkit-scrollbar-track {
      background: $color-dark-85;
    }

    ::-webkit-scrollbar-thumb {
      border: 2px solid $color-dark-85;
    }
  }
  .network-status-container {
    .network-status {
      background: url('../images/error_red.svg') no-repeat left 10px center;
      background-size: 25px 25px;
      background-color: #fcd156;

      .network-status-message {
        color: $color-dark-85;
      }

      .action {
        button {
          border: solid 1px #ccc;
          color: white;
          background: $blue;
        }
      }
    }
  }

  .tool-bar {
    color: $color-dark-05;

    .search-icon {
      background-color: $color-light-35;
    }
  }

  input.search {
    border: 1px solid $color-light-60;
    color: $color-dark-05;
    background-color: $color-gray-95;

    &:focus {
      outline: solid 1px $blue;
    }
  }

  .last-timestamp {
    color: $grey;
  }

  .index {
    .gutter .timestamp {
      color: $grey;
    }
  }

  .hint {
    color: white;
    border: 2px dashed white;

    &.firstRun {
      &:before,
      &:after {
        border: solid 10px white;
        border-color: transparent white transparent transparent;
      }
      &:after {
        border-color: transparent #2eace0 transparent transparent;
      }
    }
  }

  .contact.placeholder {
    color: white;
    border: 2px dashed white;
    p {
      color: white;
    }
    &:before,
    &:after {
      border: solid 10px white;
      border-color: transparent transparent white transparent;
    }
    &:after {
      border-color: transparent transparent #2eace0 transparent;
    }
  }

  // _lightbox

  .iconButton {
    background: transparent;

    &:hover {
      background: $grey;
    }

    &.save {
      &:before {
        @include color-svg('../images/save.svg', white);
      }
    }

    &.close {
      &:before {
        @include color-svg('../images/x.svg', white);
      }
    }

    &.previous {
      &:before {
        @include color-svg('../images/back.svg', white);
      }
    }

    &.next {
      &:before {
        @include color-svg('../images/forward.svg', white);
      }
    }
  }

  // _modal

  .modal {
    background-color: rgba(0, 0, 0, 0.3);

    .content {
      background-color: $color-gray-95;
      box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
    }
  }

  // _modules

  // Module: Message

  .module-message__buttons__download {
    @include color-svg('../images/download.svg', $color-light-45);
    &:hover {
      @include color-svg('../images/download.svg', $color-dark-05);
    }
  }

  .module-message__buttons__reply {
    @include color-svg('../images/reply.svg', $color-light-45);
    &:hover {
      @include color-svg('../images/reply.svg', $color-dark-05);
    }
  }

  .module-message__buttons__menu {
    @include color-svg('../images/ellipsis.svg', $color-light-45);
    &:hover {
      @include color-svg('../images/ellipsis.svg', $color-dark-05);
    }
  }

  .module-message__error {
    @include color-svg('../images/error.svg', $color-core-red);
  }

  .module-message__container--outgoing {
    background-color: $color-dark-70;
  }

  // In case the color gets messed up
  .module-message__container--incoming {
    background-color: $color-conversation-grey;
  }

  .module-message__container--incoming-red {
    background-color: $color-conversation-red;
  }
  .module-message__container--incoming-deep_orange {
    background-color: $color-conversation-deep_orange;
  }
  .module-message__container--incoming-brown {
    background-color: $color-conversation-brown;
  }
  .module-message__container--incoming-pink {
    background-color: $color-conversation-pink;
  }
  .module-message__container--incoming-purple {
    background-color: $color-conversation-purple;
  }
  .module-message__container--incoming-indigo {
    background-color: $color-conversation-indigo;
  }
  .module-message__container--incoming-blue {
    background-color: $color-conversation-blue;
  }
  .module-message__container--incoming-teal {
    background-color: $color-conversation-teal;
  }
  .module-message__container--incoming-green {
    background-color: $color-conversation-green;
  }
  .module-message__container--incoming-light_green {
    background-color: $color-conversation-light_green;
  }
  .module-message__container--incoming-blue_grey {
    background-color: $color-conversation-blue_grey;
  }

  .module-message__attachment-container {
    background-color: $color-gray-95;
  }

  .module-message__img-border-overlay {
    box-shadow: inset 0px 0px 0px 1px $color-white-015;
  }

  .module-message__img-overlay {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0) 9%,
      rgba(0, 0, 0, 0.02) 17%,
      rgba(0, 0, 0, 0.05) 24%,
      rgba(0, 0, 0, 0.08) 31%,
      rgba(0, 0, 0, 0.12) 37%,
      rgba(0, 0, 0, 0.16) 44%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0.24) 56%,
      rgba(0, 0, 0, 0.28) 63%,
      rgba(0, 0, 0, 0.32) 69%,
      rgba(0, 0, 0, 0.35) 76%,
      rgba(0, 0, 0, 0.38) 83%,
      rgba(0, 0, 0, 0.4) 91%,
      rgba(0, 0, 0, 0.4)
    );
  }

  .module-message__broken-image {
    color: $color-dark-05;
  }

  .module-message__broken-image--incoming {
    color: $color-white;
  }

  .module-message__video-overlay__circle {
    background-color: $color-white;
  }

  .module-message__video-overlay__play-icon {
    @include color-svg('../images/play.svg', $color-signal-blue);
  }

  .module-message__broken-video-screenshot {
    color: $color-dark-05;
  }

  .module-message__broken-video-screenshot--incoming {
    color: $color-white;
  }

  .module-message__generic-attachment__icon {
    // background: url('../images/file-gradient.svg') no-repeat center;
  }

  .module-message__generic-attachment__file-name {
    color: $color-dark-05;
  }

  .module-message__generic-attachment__file-name--incoming {
    color: $color-white;
  }

  .module-message__generic-attachment__file-size {
    color: $color-dark-05;
  }

  .module-message__generic-attachment__file-size--incoming {
    color: $color-white;
  }

  .module-message__link-preview__content {
    background-color: $color-gray-95;
    border: 1px solid $color-gray-60;
  }

  .module-message__link-preview__content--with-content-above {
    border-top: none;
    border-bottom: none;
  }

  .module-message__link-preview__title {
    color: $color-gray-05;
  }

  .module-message__link-preview__location {
    color: $color-gray-25;
  }

  .module-message__author {
    color: $color-white;
  }

  .module-message__author_with_sticker {
    color: $color-gray-05;
  }

  .module-message__text {
    color: $color-dark-05;
    a {
      color: $color-dark-05;
    }
  }

  .module-message__text--incoming {
    color: $color-white;
    a {
      color: $color-white;
    }
  }

  .module-message__metadata__date {
    color: $color-white-08;
  }
  .module-message__metadata__date--incoming {
    color: $color-white-08;
  }
  .module-message__metadata__date--with-image-no-caption {
    color: $color-white-08;
  }

  .module-message__metadata__status-icon--sending {
    @include color-svg('../images/sending.svg', $color-white-08);
  }

  .module-message__metadata__status-icon--sent {
    @include color-svg('../images/check-circle-outline.svg', $color-white-08);
  }

  .module-message__metadata__status-icon--delivered {
    @include color-svg('../images/double-check.svg', $color-white-08);
  }

  .module-message__metadata__status-icon--read {
    @include color-svg('../images/read.svg', $color-white-08);
  }

  // When status indicators are overlaid on top of an image, they use different colors
  .module-message__metadata__status-icon--with-image-no-caption {
    background-color: $color-dark-05;
  }

  .module-message__send-message-button {
    color: $color-signal-blue;
    background-color: $color-dark-70;
    border: 1px solid $color-dark-60;
  }

  // Module: Expire Timer

  .module-expire-timer {
    @include color-svg('../images/timer-60.svg', $color-white-08);
  }

  .module-expire-timer--55 {
    @include color-svg('../images/timer-55.svg', $color-white-08);
  }
  .module-expire-timer--50 {
    @include color-svg('../images/timer-50.svg', $color-white-08);
  }
  .module-expire-timer--45 {
    @include color-svg('../images/timer-45.svg', $color-white-08);
  }
  .module-expire-timer--40 {
    @include color-svg('../images/timer-40.svg', $color-white-08);
  }
  .module-expire-timer--35 {
    @include color-svg('../images/timer-35.svg', $color-white-08);
  }
  .module-expire-timer--30 {
    @include color-svg('../images/timer-30.svg', $color-white-08);
  }
  .module-expire-timer--25 {
    @include color-svg('../images/timer-25.svg', $color-white-08);
  }
  .module-expire-timer--20 {
    @include color-svg('../images/timer-20.svg', $color-white-08);
  }
  .module-expire-timer--15 {
    @include color-svg('../images/timer-15.svg', $color-white-08);
  }
  .module-expire-timer--10 {
    @include color-svg('../images/timer-10.svg', $color-white-08);
  }
  .module-expire-timer--05 {
    @include color-svg('../images/timer-05.svg', $color-white-08);
  }
  .module-expire-timer--00 {
    @include color-svg('../images/timer-00.svg', $color-white-08);
  }

  .module-expire-timer--incoming {
    background-color: $color-white-08;
  }

  // When status indicators are overlaid on top of an image, they use different colors
  .module-expire-timer--with-image-no-caption {
    background-color: $color-dark-05;
  }

  // Module: Quoted Reply

  .module-quote--outgoing {
    border-left-color: $color-conversation-grey;
    background-color: $color-conversation-grey-shade;
  }
  .module-quote--outgoing-red {
    border-left-color: $color-conversation-red;
    background-color: $color-conversation-red-shade;
  }
  .module-quote--outgoing-deep_orange {
    border-left-color: $color-conversation-deep_orange;
    background-color: $color-conversation-deep_orange-shade;
  }
  .module-quote--outgoing-brown {
    border-left-color: $color-conversation-brown;
    background-color: $color-conversation-brown-shade;
  }
  .module-quote--outgoing-pink {
    border-left-color: $color-conversation-pink;
    background-color: $color-conversation-pink-shade;
  }
  .module-quote--outgoing-purple {
    border-left-color: $color-conversation-purple;
    background-color: $color-conversation-purple-shade;
  }
  .module-quote--outgoing-indigo {
    border-left-color: $color-conversation-indigo;
    background-color: $color-conversation-indigo-shade;
  }
  .module-quote--outgoing-blue {
    border-left-color: $color-conversation-blue;
    background-color: $color-conversation-blue-shade;
  }
  .module-quote--outgoing-teal {
    border-left-color: $color-conversation-teal;
    background-color: $color-conversation-teal-shade;
  }
  .module-quote--outgoing-green {
    border-left-color: $color-conversation-green;
    background-color: $color-conversation-green-shade;
  }
  .module-quote--outgoing-light_green {
    border-left-color: $color-conversation-light_green;
    background-color: $color-conversation-light_green-shade;
  }
  .module-quote--outgoing-blue_grey {
    border-left-color: $color-conversation-blue_grey;
    background-color: $color-conversation-blue_grey-shade;
  }

  .module-quote--incoming {
    border-left-color: $color-black;
    background-color: $color-conversation-grey-shade;
  }
  .module-quote--incoming-red {
    background-color: $color-conversation-red-shade;
  }
  .module-quote--incoming-deep_orange {
    background-color: $color-conversation-deep_orange-shade;
  }
  .module-quote--incoming-brown {
    background-color: $color-conversation-brown-shade;
  }
  .module-quote--incoming-pink {
    background-color: $color-conversation-pink-shade;
  }
  .module-quote--incoming-purple {
    background-color: $color-conversation-purple-shade;
  }
  .module-quote--incoming-indigo {
    background-color: $color-conversation-indigo-shade;
  }
  .module-quote--incoming-blue {
    background-color: $color-conversation-blue-shade;
  }
  .module-quote--incoming-teal {
    background-color: $color-conversation-teal-shade;
  }
  .module-quote--incoming-green {
    background-color: $color-conversation-green-shade;
  }
  .module-quote--incoming-light_green {
    background-color: $color-conversation-light_green-shade;
  }
  .module-quote--incoming-blue_grey {
    background-color: $color-conversation-blue_grey-shade;
  }

  .module-quote__primary__author {
    color: $color-dark-05;
  }

  .module-quote__primary__author-red {
    color: $color-dark-05;
  }
  .module-quote__primary__author-deep_orange {
    color: $color-dark-05;
  }
  .module-quote__primary__author-brown {
    color: $color-dark-05;
  }
  .module-quote__primary__author-pink {
    color: $color-dark-05;
  }
  .module-quote__primary__author-purple {
    color: $color-dark-05;
  }
  .module-quote__primary__author-indigo {
    color: $color-dark-05;
  }
  .module-quote__primary__author-blue {
    color: $color-dark-05;
  }
  .module-quote__primary__author-teal {
    color: $color-dark-05;
  }
  .module-quote__primary__author-green {
    color: $color-dark-05;
  }
  .module-quote__primary__author-light_green {
    color: $color-dark-05;
  }
  .module-quote__primary__author-blue_grey {
    color: $color-dark-05;
  }

  .module-quote__primary__text {
    color: $color-dark-05;

    a {
      color: $color-dark-05;
    }
  }

  .module-quote__primary__type-label {
    color: $color-dark-05;
  }

  .module-quote__close-container {
    background-color: rgba(255, 255, 255, 0.75);
  }

  .module-quote__close-button {
    @include color-svg('../images/x.svg', $grey);
  }

  .module-quote__icon-container__circle-background {
    background-color: $color-white;
  }

  .module-quote__icon-container__icon--file {
    @include color-svg('../images/file.svg', $color-signal-blue);
  }
  .module-quote__icon-container__icon--image {
    @include color-svg('../images/image.svg', $color-signal-blue);
  }
  .module-quote__icon-container__icon--microphone {
    @include color-svg('../images/microphone.svg', $color-signal-blue);
  }
  .module-quote__icon-container__icon--play {
    @include color-svg('../images/play.svg', $color-signal-blue);
  }
  .module-quote__icon-container__icon--movie {
    @include color-svg('../images/movie.svg', $color-signal-blue);
  }

  .module-quote__generic-file__text {
    color: $color-dark-05;
  }

  .module-quote__reference-warning {
    background-color: $color-black-06;
  }

  .module-quote__reference-warning__icon {
    @include color-svg('../images/broken-link.svg', $color-dark-30);
  }

  .module-quote__reference-warning__text {
    color: $color-dark-05;
  }

  // Module: Embedded Contact

  .module-embedded-contact__contact-name {
    color: $color-dark-05;
  }

  .module-embedded-contact__contact-name--incoming {
    color: $color-white;
  }

  .module-embedded-contact__contact-method {
    color: $color-white-07;
  }

  .module-embedded-contact__contact-method--incoming {
    color: $color-white-07;
  }

  // Module: Contact Detail

  .module-contact-detail__send-message {
    background-color: $blue;
    color: $color-white;
  }

  .module-contact-detail__send-message__bubble-icon {
    @include color-svg('../images/chat-bubble.svg', white);
  }

  .module-contact-detail__additional-contact {
    border-top: 1px solid $color-dark-70;
  }

  .module-contact-detail__additional-contact__type {
    color: $color-light-45;
  }

  // Module: Group Notification

  .module-group-notification {
    color: $color-dark-30;
  }

  // Module: Reset Session Notification

  .module-reset-session-notification {
    color: $color-dark-30;
  }

  // Module: Safety Number Notification

  .module-safety-number-notification__icon {
    @include color-svg('../images/shield.svg', $color-dark-30);
  }

  .module-safety-number-notification__text {
    color: $color-dark-30;
  }

  .module-verification-notification__button {
    color: $color-signal-blue;
    background-color: $color-gray-75;
  }

  // Module: Verification Notification

  .module-verification-notification {
    color: $color-dark-30;
  }

  .module-verification-notification__icon--mark-verified {
    @include color-svg('../images/verified-check.svg', $color-dark-30);
  }

  .module-verification-notification__icon--mark-not-verified {
    @include color-svg('../images/shield.svg', $color-dark-30);
  }

  // Module: Timer Notification

  .module-timer-notification {
    color: $color-dark-30;
  }

  .module-timer-notification__icon {
    @include color-svg('../images/timer.svg', $color-dark-30);
  }

  .module-timer-notification__icon--disabled {
    @include color-svg('../images/timer-disabled.svg', $color-dark-30);
  }

  // Module: Contact List Item

  .module-contact-list-item {
    color: $color-dark-30;
  }

  .module-contact-list-item__text__verified-icon {
    @include color-svg('../images/verified-check.svg', $color-dark-30);
  }

  // Module: Conversation Header

  .module-conversation-header {
    color: $color-dark-05;
    background-color: $color-gray-95;
    border-bottom: 1px solid $color-light-60;
  }

  .module-conversation-header__back-icon {
    @include color-svg('../images/back.svg', $color-dark-05);
  }

  .module-conversation-header__title {
    color: $color-dark-05;
  }

  .module-conversation-header__note-to-self {
    color: $color-dark-05;
  }

  .module-conversation-header__title__verified-icon {
    @include color-svg('../images/verified-check.svg', $color-dark-05);
  }

  .module-conversation-header__expiration__clock-icon {
    @include color-svg('../images/timer.svg', $color-dark-30);
  }

  .module-conversation-header__gear-icon {
    @include color-svg('../images/gear.svg', $color-dark-30);
  }

  // Module: Message Detail

  .module-message-detail__unix-timestamp {
    color: $color-dark-55;
  }

  .module-message-detail__delete-button {
    background-color: $color-core-red;
    color: $color-white;
    box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
    border: solid 1px $color-light-35;
  }

  .module-message-detail__contact__error {
    color: $color-core-red;
  }

  .module-message-detail__contact__status-icon--sending {
    @include color-svg('../images/sending.svg', $color-light-35);
  }

  .module-message-detail__contact__status-icon--sent {
    @include color-svg('../images/check-circle-outline.svg', $color-light-35);
  }
  .module-message-detail__contact__status-icon--delivered {
    @include color-svg('../images/double-check.svg', $color-light-35);
  }
  .module-message-detail__contact__status-icon--read {
    @include color-svg('../images/read.svg', $color-light-35);
  }
  .module-message-detail__contact__status-icon--error {
    @include color-svg('../images/error.svg', $color-core-red);
  }

  .module-message-detail__contact__show-safety-number {
    color: $color-white;
    background-color: $color-light-35;
  }
  .module-message-detail__contact__send-anyway {
    color: $color-white;
    background-color: $color-core-red;
  }

  // Module: Media Gallery

  .module-media-gallery__tab {
    background-color: $color-dark-85;
  }

  .module-media-gallery__tab--active {
    border-bottom: 2px solid $color-signal-blue;
  }

  // Module: Document List Item

  .module-document-list-item--with-separator {
    border-bottom: 1px solid $color-dark-70;
  }

  .module-document-list-item__icon {
    @include color-svg('../images/file.svg', $color-dark-60);
  }

  // Module: Media Grid Item

  .module-media-grid-item {
    background-color: $color-dark-85;
  }

  .module-media-grid-item__icon-image {
    @include color-svg('../images/image.svg', $color-dark-60);
  }

  .module-media-grid-item__icon-video {
    @include color-svg('../images/movie.svg', $color-dark-60);
  }

  .module-media-grid-item__icon-generic {
    @include color-svg('../images/file.svg', $color-dark-60);
  }

  // Module: Empty State

  .module-empty-state {
    color: $color-dark-55;
  }

  // Module: Conversation List Item

  .module-conversation-list-item {
    &:hover {
      background-color: $color-dark-70;
    }
  }

  .module-conversation-list-item--has-unread {
    border-left: 4px solid $color-signal-blue;
  }

  .module-conversation-list-item--is-selected {
    background-color: $color-dark-70;
  }

  .module-conversation-list-item__unread-count {
    color: $color-white;
    background-color: $color-signal-blue;
    box-shadow: 0px 0px 0px 1px $color-dark-85;
  }

  .module-conversation-list-item__header__name {
    color: $color-gray-05;
  }

  .module-conversation-list-item__header__timestamp {
    color: $color-gray-25;
  }

  .module-conversation-list-item__header__date--has-unread {
    color: $color-gray-05;
  }

  .module-conversation-list-item__message__text {
    color: $color-gray-25;
  }

  .module-conversation-list-item__message__text--has-unread {
    color: $color-gray-05;
  }

  .module-conversation-list-item__message__status-icon--sending {
    @include color-svg('../images/sending.svg', $color-light-35);
  }

  .module-conversation-list-item__message__status-icon--sent {
    @include color-svg('../images/check-circle-outline.svg', $color-light-35);
  }
  .module-conversation-list-item__message__status-icon--delivered {
    @include color-svg('../images/double-check.svg', $color-light-35);
    width: 18px;
  }
  .module-conversation-list-item__message__status-icon--read {
    @include color-svg('../images/read.svg', $color-light-35);
    width: 18px;
  }

  // Module: Avatar

  .module-avatar__label {
    color: $color-gray-05;
  }

  .module-avatar__icon--group {
    background-color: $color-gray-05;
  }

  .module-avatar__icon--direct {
    background-color: $color-gray-05;
  }

  .module-avatar__icon--note-to-self {
    background-color: $color-gray-05;
  }

  .module-avatar--no-image {
    background-color: $color-conversation-grey-shade;
  }

  .module-avatar--signal-blue {
    background-color: $color-signal-blue;
  }
  .module-avatar--red {
    background-color: $color-conversation-red-shade;
  }
  .module-avatar--deep_orange {
    background-color: $color-conversation-deep_orange-shade;
  }
  .module-avatar--brown {
    background-color: $color-conversation-brown-shade;
  }
  .module-avatar--pink {
    background-color: $color-conversation-pink-shade;
  }
  .module-avatar--purple {
    background-color: $color-conversation-purple-shade;
  }
  .module-avatar--indigo {
    background-color: $color-conversation-indigo-shade;
  }
  .module-avatar--blue {
    background-color: $color-conversation-blue-shade;
  }
  .module-avatar--teal {
    background-color: $color-conversation-teal-shade;
  }
  .module-avatar--green {
    background-color: $color-conversation-green-shade;
  }
  .module-avatar--light_green {
    background-color: $color-conversation-light_green-shade;
  }
  .module-avatar--blue_grey {
    background-color: $color-conversation-blue_grey-shade;
  }

  // Module: Main Header

  .module-main-header {
    border-bottom: 1px solid $color-gray-75;
  }

  .module-main-header__search__input {
    background-color: $color-gray-95;
    border-radius: 14px;
    border: solid 1px $color-gray-75;
    color: $color-gray-05;

    &::placeholder {
      color: $color-gray-45;
    }

    &:focus {
      border: solid 1px blue;
      outline: none;
    }
  }

  .module-main-header__search__icon {
    @include color-svg('../images/search.svg', $color-gray-25);
  }

  .module-main-header__search__cancel-icon {
    @include color-svg('../images/x-16.svg', $color-gray-25);
  }

  // Module: Image

  .module-image--with-background {
    background-color: $color-black;
  }

  .module-image__border-overlay {
    box-shadow: inset 0px 0px 0px 1px $color-white-015;
  }

  .module-image__loading-placeholder {
    background-color: $color-white-015;
  }

  // Module: Image Grid

  // Module: Typing Animation

  .module-typing-animation__dot {
    background-color: $color-white;
  }

  .module-typing-animation__dot--light {
    background-color: $color-white;
  }

  // Module: Attachments

  .module-attachments {
    border-top: 1px solid $color-gray-75;
  }

  .module-attachments__close-button {
    @include color-svg('../images/x-16.svg', $color-gray-45);
  }

  // Module: Staged Generic Attachment

  .module-staged-generic-attachment {
    box-shadow: inset 0px 0px 0px 1px $color-gray-45;
    background-color: $color-gray-75;
    color: $color-dark-05;
  }

  .module-staged-generic-attachment__close-button {
    @include color-svg('../images/x.svg', $color-gray-45);
  }

  .module-staged-generic-attachment__icon {
    background: url('../images/file-gradient.svg') no-repeat center;
  }

  .module-staged-generic-attachment__icon__extension {
    color: $color-gray-90;
  }

  // Module: Staged Placeholder Attachment

  .module-staged-placeholder-attachment {
    border: 1px solid $color-gray-60;

    &:hover {
      background: $color-gray-75;
    }
  }

  .module-staged-placeholder-attachment__plus-icon {
    @include color-svg('../images/plus-36.svg', $color-gray-60);
  }

  // Module: Staged Link Preview

  .module-staged-link-preview__loading {
    color: $color-gray-25;
  }
  .module-staged-link-preview__title {
    color: $color-gray-05;
  }
  .module-staged-link-preview__location {
    color: $color-gray-25;
  }
  .module-staged-link-preview__close-button {
    @include color-svg('../images/x-16.svg', $color-gray-25);
  }

  // Module: Spinner

  .module-spinner__circle {
    background-color: $color-white-04;
  }
  .module-spinner__arc {
    background-color: $color-gray-05;
  }

  .module-spinner__circle--incoming {
    background-color: $color-white-04;
  }
  .module-spinner__arc--incoming {
    background-color: $color-gray-05;
  }

  .module-spinner__circle--outgoing {
    background-color: $color-white-04;
  }
  .module-spinner__arc--outgoing {
    background-color: $color-gray-05;
  }

  // Module: Caption Editor

  .module-caption-editor {
    background-color: $color-black;
  }

  .module-caption-editor__close-button {
    @include color-svg('../images/x-16.svg', $color-white);
  }

  .module-caption-editor__media-container {
    background-color: $color-black;
  }

  .module-caption-editor__caption-input {
    border: 1px solid $color-white;
    color: $color-white;
    background-color: $color-black;

    &::placeholder {
      color: $color-white-07;
    }
    &:focus {
      border: 1px solid $color-signal-blue;
      outline: none;
    }
  }

  .module-caption-editor__save-button {
    background-color: $color-signal-blue;
    color: $color-white;
  }

  // Module: Highlighted Message Body

  // Module: Search Results

  .module-search-results__conversations-header {
    color: $color-gray-05;
  }
  .module-search-results__contacts-header {
    color: $color-gray-05;
  }
  .module-search-results__messages-header {
    color: $color-gray-05;
  }

  // Module: Message Search Result

  .module-message-search-result {
    &:hover {
      background-color: $color-dark-70;
    }
  }

  .module-message-search-result--is-selected {
    background-color: $color-dark-70;
  }

  .module-message-search-result__header__from {
    color: $color-gray-05;
  }

  .module-message-search-result__header__timestamp {
    color: $color-gray-25;
  }

  .module-message-search-result__body {
    color: $color-gray-05;
  }

  // Module: Left Pane

  .module-left-pane {
    background-color: $color-dark-85;
    border-right: 1px solid $color-gray-75;
  }

  .module-left-pane__archive-header {
    border-bottom: 1px solid $color-gray-75;
  }

  .module-left-pane__to-inbox-button {
    background-color: $color-gray-25;
  }

  .module-left-pane__archive-header-text {
    color: $color-gray-05;
  }

  .module-left-pane__archive-helper-text {
    color: $color-gray-25;
    background-color: $color-gray-75;
  }

  .module-left-pane__archived-button {
    color: $color-gray-25;
    &:hover {
      background-color: $color-gray-75;
    }
  }

  .module-left-pane__archived-button__archived-count {
    color: $color-gray-25;
    background-color: $color-gray-75;
  }

  // Module: Start New Conversation

  .module-start-new-conversation {
    &:hover {
      background-color: $color-dark-70;
    }
  }

  .module-start-new-conversation__number {
    color: $color-gray-05;
  }

  .module-start-new-conversation__text {
    color: $color-gray-45;
  }

  // Third-party module: react-contextmenu

  .react-contextmenu {
    background-color: $color-dark-85;
    border: 1px solid $color-light-60;
  }

  .react-contextmenu-item {
    color: $color-dark-05;
  }

  .react-contextmenu-item--checked:before {
    color: $color-dark-05;
  }

  .react-contextmenu-item.react-contextmenu-submenu
    > .react-contextmenu-item:after {
    color: $color-dark-05;
  }

  .react-contextmenu-item.react-contextmenu-item--active,
  .react-contextmenu-item.react-contextmenu-item--selected {
    color: $color-white;
    background-color: $color-light-35;
  }

  .react-contextmenu-item.react-contextmenu-item--active.react-contextmenu-item--checked:before,
  .react-contextmenu-item.react-contextmenu-item--selected.react-contextmenu-item--checked:before {
    color: $color-white;
  }

  .react-contextmenu-item.react-contextmenu-submenu
    > .react-contextmenu-item.react-contextmenu-item--active:after,
  .react-contextmenu-item.react-contextmenu-submenu
    > .react-contextmenu-item.react-contextmenu-item--selected:after {
    color: $color-white;
  }

  // _options

  .intl-tel-input .country-list .country .country-name {
    color: #000;
  }

  // _progress

  // Not sure we need to change anything there - it's blue

  // _recorder

  .capture-audio {
    .microphone {
      &:before {
        @include color-svg('../images/microphone.svg', $color-dark-30);
      }
    }
  }
  .recorder {
    background: $color-black;

    .finish {
      background: lighten($color-core-green, 20%);
      border: 1px solid $color-core-green;

      .icon {
        @include color-svg('../images/check.svg', $color-core-green);
      }
    }

    .close {
      background: lighten($color-core-red, 20%);
      border: 1px solid $color-core-red;

      .icon {
        @include color-svg('../images/x.svg', $color-core-red);
      }
    }

    .time {
      color: $grey;
    }
  }

  // _settings

  hr {
    border-color: $color-dark-60;
  }

  .syncSettings {
    .synced_at {
      color: $grey;
    }
    .sync_failed {
      color: red;
    }
  }

  .clear-data-settings {
    .destructive {
      background-color: red;
      color: white;
    }
  }
}