.dark-theme {
  // _debugLog

  .debug-log {
    &.modal {
      .content {
        textarea {
          background-color: var(--color-darkest-gray-color);
          border: 1px solid var(--color-gray-color);
          color: var(--color-lighter-gray-color);
        }
      }
    }

    .result {
      .open {
        border: solid 1px var(--color-gray-color);
        background-color: var(--color-darkest-gray-color);
        color: var(--color-lighter-gray-color);

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

      .link {
        color: var(--color-lighter-gray-color);
        border: solid 1px var(--color-gray-color);
        border-right: none;
        background-color: var(--color-darkest-gray-color);
      }
    }
  }

  // _global
  .title-bar {
    color: var(--color-lighter-gray-color);
  }

  button.grey {
    border: solid 1px var(--color-light-gray-color);
    color: var(--color-gray-color);
    background: var(--color-lightest-gray-color);
    box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5);

    &:hover {
      box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7);
    }
  }

  .loading {
    position: relative;
    &::before {
      border: solid 3px;
      border-color: var(--color-light-blue-color) var(--color-light-blue-color)
        var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
    }
  }

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

  input.search {
    border: 1px solid var(--color-gray-color);
    color: var(--color-lighter-gray-color);
    background-color: var(--color-darkest-gray-color);

    &:focus {
      outline: solid 1px var(--color-dark-blue-color);
    }
  }

  .hint {
    color: var(--color-white-color);
    border: 2px dashed var(--color-white-color);

    &.firstRun {
      &:before,
      &:after {
        border: solid 10px var(--color-white-color);
        border-color: transparent var(--color-white-color) transparent transparent;
      }
      &:after {
        border-color: transparent var(--color-dark-blue-color) transparent transparent;
      }
    }
  }

  .contact.placeholder {
    color: var(--color-white-color);
    border: 2px dashed var(--color-white-color);
    p {
      color: var(--color-white-color);
    }
    &:before,
    &:after {
      border: solid 10px var(--color-white-color);
      border-color: transparent transparent var(--color-white-color) transparent;
    }
    &:after {
      border-color: transparent transparent var(--color-dark-blue-color) transparent;
    }
  }
  // _modal

  .modal {
    background-color: rgba(var(--color-black-color-rgb), 0.3);

    .content {
      background-color: var(--color-darkest-gray-color);
      box-shadow: 0px 3px 5px 0px var(--color-light-black-color);
    }
  }

  // _modules

  // Module: Message

  .module-message__error {
    @include color-svg('../images/error.svg', var(--color-destructive));
  }

  .module-message__img-border-overlay {
    box-shadow: inset 0px 0px 0px 1px var(--color-lighter-white-color);
  }

  .module-message__img-overlay {
    /* TODO does this work? */
    background-image: linear-gradient(
      to bottom,
      var(--color-transparent-color),
      var(--color-transparent-color) 9%,
      rgba(var(--color-black-color-rgb), 0.02) 17%,
      rgba(var(--color-black-color-rgb), 0.05) 24%,
      rgba(var(--color-black-color-rgb), 0.08) 31%,
      rgba(var(--color-black-color-rgb), 0.12) 37%,
      rgba(var(--color-black-color-rgb), 0.16) 44%,
      rgba(var(--color-black-color-rgb), 0.2) 50%,
      rgba(var(--color-black-color-rgb), 0.24) 56%,
      rgba(var(--color-black-color-rgb), 0.28) 63%,
      rgba(var(--color-black-color-rgb), 0.32) 69%,
      rgba(var(--color-black-color-rgb), 0.35) 76%,
      rgba(var(--color-black-color-rgb), 0.38) 83%,
      rgba(var(--color-black-color-rgb), 0.4) 91%,
      rgba(var(--color-black-color-rgb), 0.4)
    );
  }

  .module-message__broken-image {
    color: var(--color-lighter-gray-color);
  }

  .module-message__broken-image--incoming {
    color: var(--color-white-color);
  }

  .module-message__video-overlay__circle {
    background-color: var(--color-white-color);
  }

  .module-message__video-overlay__play-icon {
    @include color-svg('../images/play.svg', var(--color-session-green-color));
  }

  .module-message__broken-video-screenshot {
    color: var(--color-lighter-gray-color);
  }

  .module-message__link-preview__content {
    background-color: var(--color-darkest-gray-color);
    border: 1px solid var(--color-gray-color);
  }

  .module-message__link-preview__title {
    color: var(--color-lighter-gray-color);
  }

  .module-message__link-preview__location {
    color: var(--color-light-gray-color);
  }

  // Module: Contact Detail

  .module-contact-detail__send-message {
    background-color: var(--color-dark-blue-color);
    color: var(--color-white-color);
  }

  .module-contact-detail__additional-contact {
    border-top: 1px solid var(--color-dark-gray-color);
  }

  .module-contact-detail__additional-contact__type {
    color: var(--color-light-gray-color);
  }

  // Module: Contact List Item

  .module-contact-list-item {
    color: var(--color-light-gray-color);
  }

  // Module: Message Detail

  .module-message-detail__delete-button {
    background-color: var(--color-destructive);
    color: var(--color-white-color);
    box-shadow: 0 0 10px -3px var(--color-gray-color-rgb);
    border: solid 1px var(--color-light-gray-color);
  }

  .module-message-detail__contact__error {
    color: var(--color-destructive);
  }

  // Module: Media Gallery

  .module-media-gallery__tab {
    background-color: var(--color-darkest-gray-color);
  }

  .module-media-gallery__tab--active {
    border-bottom: 2px solid var(--color-session-green-color);
  }

  // Module: Document List Item

  .module-document-list-item--with-separator {
    border-bottom: 1px solid var(--color-dark-gray-color);
  }

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

  // Module: Media Grid Item

  .module-media-grid-item {
    background-color: var(--color-darkest-gray-color);
  }

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

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

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

  // Module: Empty State

  .module-empty-state {
    color: var(--color-light-gray-color);
  }

  // TODO Theming Remove
  // Module: Conversation List Item

  // .module-conversation-list-item--is-selected {
  //   background-color: var(--color-dark-gray-color);
  // }

  // .module-conversation-list-item__unread-count {
  //   color: var(--color-white-color);
  //   background-color: var(--color-session-green-color);
  //   box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
  // }

  // .module-conversation-list-item__header__name {
  //   color: var(--color-lighter-gray-color);
  // }

  // .module-conversation-list-item__header__date--has-unread {
  //   color: var(--color-lighter-gray-color);
  // }

  // .module-conversation-list-item__message__text {
  //   color: var(--color-light-gray-color);
  // }

  // .module-conversation-list-item__message__text--has-unread {
  //   color: var(--color-lighter-gray-color);
  // }

  // Module: Image

  .module-image {
    background: none;
  }

  .module-image__loading-placeholder {
    background-color: var(--color-lighter-white-color);
  }

  // Module: Typing Animation

  .module-typing-animation__dot {
    background-color: var(--color-white-color);
  }

  .module-typing-animation__dot--light {
    background-color: var(--color-white-color);
  }

  // Module: Attachments

  .module-attachments {
    border-top: 1px solid var(--color-dark-gray-color);
  }

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

  // Module: Staged Generic Attachment

  .module-staged-generic-attachment {
    box-shadow: inset 0px 0px 0px 1px var(--color-light-gray-color);
    background-color: var(--color-dark-gray-color);
    color: var(--color-lighter-gray-color);
  }

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

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

  .module-staged-generic-attachment__icon__extension {
    color: var(--color-darkest-gray-color);
  }

  // Module: Staged Placeholder Attachment

  .module-staged-placeholder-attachment {
    border: 1px solid var(--color-gray-color);

    &:hover {
      background: var(--color-dark-gray-color);
    }
  }

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

  // Module: Staged Link Preview

  .module-staged-link-preview__close-button {
    @include color-svg('../images/x-16.svg', var(--color-light-gray-color));
  }

  // Module: Message Search Result

  // TODO Theming remove
  // .module-message-search-result {
  //   &:hover {
  //     background-color: var(--color-dark-gray-color);
  //   }
  // }

  .module-message__link-preview__icon-container__circle-background {
    background-color: var(--color-light-gray-color);
  }
}