/*! _chat-dark.scss | Friendkit | © Css Ninja. 2020-2021 */

/* ==========================================================================
Chat dark styles
========================================================================== */

/*
    0. Chat wrapper dark
    1. Add conversation modal dark
*/

/* ==========================================================================
0. Chat wrapper dark
========================================================================== */

body {
  &.is-dark {
    .chat-wrapper {
      .chat-inner {
        .chat-nav,
        .users-sidebar {
          background: darken($dark, 6%);
          border-color: darken($dark, 6%);
        }

        .chat-nav {
          .nav-start {
            .recipient-block {
              .username {
                span {
                  &:first-child {
                    color: $white-light;
                  }
                }
              }
            }
          }

          .nav-end {
            .chat-search {
              .control {
                .input {
                  background: lighten($dark, 4%);
                  border-color: lighten($dark, 4%);
                  color: $white-light;

                  &::placeholder {
                    color: lighten($dark, 24%);
                  }

                  &:focus ~ .form-icon {
                    svg {
                      stroke: $primary !important;
                    }
                  }
                }

                .form-icon {
                  svg {
                    stroke: lighten($dark, 24%);
                  }
                }
              }
            }

            .close-chat {
              &:hover {
                background: lighten($dark, 4%);
              }
            }
          }
        }

        .users-sidebar {
          .conversations-list {
            .user-item {
              &.is-active {
                background: lighten($dark, 2%);

                .avatar-container {
                  .user-status {
                    border-color: lighten($dark, 2%);
                  }
                }
              }

              &:hover {
                background: lighten($dark, 4%);

                .avatar-container {
                  .user-status {
                    border-color: lighten($dark, 4%);
                  }
                }
              }

              .avatar-container {
                .user-status {
                  border-color: darken($dark, 6%);
                }
              }
            }
          }
        }

        .chat-body,
        .chat-action {
          background: lighten($dark, 8%);
        }

        .chat-body {
          .chat-body-inner {
            .date-divider {
              hr {
                background: lighten($dark, 18%);
              }

              span {
                background: lighten($dark, 8%);
                color: darken($white-light, 20%);
              }
            }

            .chat-message {
              &.is-sent {
                .message-text {
                  background: lighten($dark, 1%);

                  &:before {
                    border-top-color: lighten($dark, 1%);
                  }
                }
              }
            }
          }
        }

        .chat-action {
          .chat-action-inner {
            .control {
              .textarea {
                background: lighten($dark, 1%);
                border-color: lighten($dark, 5%);
                color: $white-light;

                &:focus {
                  border-color: lighten($dark, 10%) !important;
                }
              }
            }
          }
        }

        .chat-panel {
          background: lighten($dark, 4%);
          border-color: lighten($dark, 4%);

          .panel-inner {
            .panel-header {
              background: lighten($dark, 4%);
              border-color: lighten($dark, 4%);

              h3 {
                color: $white-light;
              }

              .panel-close {
                &:hover {
                  background: lighten($dark, 12%);
                }
              }
            }

            .panel-body {
              .panel-body-inner {
                .subheader {
                  .action-icon {
                    &:hover {
                      background: lighten($dark, 12%);
                    }
                  }
                }

                .details-avatar {
                  .call-me {
                    border-color: lighten($dark, 4%);
                  }
                }

                .user-meta {
                  h3 {
                    color: $white-light;
                  }
                }

                .user-about {
                  .about-block {
                    background: lighten($dark, 1%);
                    border-color: lighten($dark, 8%);

                    .about-text {
                      span {
                        &:first-child {
                          color: $white-light;
                        }

                        &:nth-child(2) {
                          color: $light-text !important;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
1. Add conversation modal dark
========================================================================== */

body {
  &.is-dark {
    .add-conversation-modal {
      .modal-content {
        .card {
          .card-heading {
            h3 {
              color: $white-light;
            }

            .close-wrap {
              .close-modal {
                &:hover {
                  background: lighten($dark, 6%);
                }
              }
            }
          }
        }
      }
    }
  }
}
