@mixin chat-dark {
  .chat-container {
    background-color: $md-dark-surface;
  }

  .chat {
    background-color: $md-dark-background;
  }

  .chat-left {
    background-color: $md-dark-surface;

    .chat-cont {
      border-bottom-color: $md-dark-divider;
      @include interaction-dark-surface;

      .chat-cont-face {
        border-color: $md-dark-surface;
      }

      label {
        color: $md-dark-text-primary;
      }

      span {
        border-color: $md-dark-surface;
      }
    }
  }

  .chat-type {
    background-color: rgba($md-dark-primary, 0.18);
    color: $md-dark-text-primary;

    .chat-card-warning-k,
    .chat-card-warning-scope {
      color: $md-dark-text-primary;
    }
  }

  .chat-question,
  .chat-input {
    background-color: $md-dark-background;
  }

  .chat-input {
    input {
      background-color: $md-dark-surface;
      border-color: $md-dark-divider;
      color: $md-dark-text-primary;

      &::placeholder {
        color: $md-dark-text-primary;
        opacity: 0.7;
      }
    }

    span {
      background-color: $md-dark-primary;
      @include interaction-dark-primary;

      svg {
        fill: $md-dark-on-primary;
      }

      &:active {
        background-color: $md-dark-secondary;
      }
    }
  }

  .chat-section {
    .chat-section-comment {
      background-color: $md-dark-surface;
      color: $md-dark-text-primary;

      .chat-section-text {
        color: $md-dark-text-primary;
      }

      .chat-section-time {
        color: $md-dark-text-primary;
        opacity: 0.56;

        svg {
          fill: $md-dark-text-primary;
        }
      }

      > svg {
        fill: $md-dark-surface;
      }
    }

    &.chat-section-2 {
      .chat-section-comment {
        background-color: rgba($md-dark-primary, 0.2);

        > svg {
          fill: rgba($md-dark-primary, 0.2);
        }
      }
    }

    &.chat-section-date {
      .chat-section-comment {
        background-color: rgba($md-dark-primary, 0.16);

        span {
          color: $md-dark-text-primary;
          opacity: 0.7;
        }
      }
    }
  }
}