// * App Chat
// *******************************************************************************

@use '../_bootstrap-extended/include' as light;
@use '../_bootstrap-extended/include-dark' as dark;
@import '../_components/include';
@import '../_custom-variables/pages';

// Variables
$chat-app-height: calc(100vh - 11.3rem);
$chat-app-height-with-no-navbar: calc(100vh - 6.5rem);
$chat-app-horizontal-height-diff: 3rem;

$chat-contact-width: 21rem;

$chat-contact-list-padding-x: 0.75rem;
$chat-contact-list-padding-y: 0.528rem;

$chat-contact-list-margin-x: $chat-contact-list-padding-x;
$chat-contact-list-margin-y: 0.25rem;

$chat-history-padding-x: 1.5rem;
$chat-history-padding-y: 1.5rem;
$chat-history-height: calc(100vh - 22rem);
$chat-history-height-with-no-nabvar: calc(100vh - 17.6rem);
$chat-history-header-padding-x: $chat-history-padding-x;
$chat-history-header-padding-y: 1.05rem;
$chat-history-footer-padding: 0.5rem;
$chat-history-footer-margin: $chat-history-padding-x;

$chat-message-text-padding-x: 1rem;
$chat-message-text-padding-y: 0.543rem;
$chat-message-text-border-radius: light.$border-radius;
$chat-list-margin: 3rem;

$app-chat-shadow-light: light.$box-shadow-xs !default;
$app-chat-shadow-dark: dark.$box-shadow-xs !default;

$chat-bg-light: #f7f8f8;
$chat-bg-dark: #20202e;

// App Chat Global
.app-chat {
  position: relative;
  height: $chat-app-height;
  .layout-navbar-hidden & {
    height: $chat-app-height-with-no-navbar;
  }
  @include light.media-breakpoint-up($menu-collapsed-layout-breakpoint) {
    .layout-horizontal & {
      height: calc($chat-app-height - $chat-app-horizontal-height-diff);
    }
  }
  // Common Styles Of two sidebars
  .app-sidebar {
    @media (max-width: 992px) {
      z-index: 4;
    }

    .sidebar-header {
      position: relative;

      .close-sidebar {
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
      }
      .chat-sidebar-avatar {
        width: 84px;
        height: 84px;
        &::after {
          bottom: 6px;
          width: 16.8px;
          height: 16.8px;
        }
      }
    }
  }

  .app-chat-contacts {
    position: absolute;
    left: calc(-#{$chat-contact-width} - 1rem);
    height: $chat-app-height;
    width: $chat-contact-width;
    flex-basis: $chat-contact-width;
    transition: all 0.25s ease;
    .sidebar-header {
      height: 4.75rem;
    }
    .layout-navbar-hidden & {
      height: $chat-app-height-with-no-navbar;
    }
    @include light.media-breakpoint-up($menu-collapsed-layout-breakpoint) {
      .layout-horizontal & {
        height: calc($chat-app-height - $chat-app-horizontal-height-diff);
      }
    }

    @media (min-width: 992px) {
      position: static;
    }

    &.show {
      left: 0rem;
    }

    .sidebar-body {
      height: calc(#{$chat-app-height} - 4.7rem);
      .layout-navbar-hidden & {
        height: calc(#{$chat-app-height-with-no-navbar} - 4.7rem);
      }
      @include light.media-breakpoint-up($menu-collapsed-layout-breakpoint) {
        .layout-horizontal & {
          height: calc(#{$chat-app-height} - 4.7rem - #{$chat-app-horizontal-height-diff});
        }
      }

      .chat-contact-list {
        li.chat-contact-list-item {
          display: flex;
          justify-content: space-between;
          border-radius: $chat-message-text-border-radius;
          padding: $chat-contact-list-padding-y $chat-contact-list-padding-x;
          margin: $chat-contact-list-margin-y $chat-contact-list-margin-x;
          cursor: pointer;
          a {
            width: 100%;
          }
          .chat-contact-info {
            min-width: 0;
            .chat-contact-name {
              line-height: 1.5;
            }
          }
          small {
            white-space: nowrap;
          }
        }
        li.chat-contact-list-item-title {
          padding: $chat-contact-list-padding-y $chat-contact-list-padding-y * 1.9 $chat-contact-list-padding-y * 0.5;
        }
      }
    }
  }

  .app-chat-sidebar-left {
    position: absolute;
    top: 0;
    left: calc(-#{$chat-contact-width} - 1rem);
    width: $chat-contact-width;
    height: $chat-app-height;
    opacity: 0;
    z-index: 5;
    transition: all 0.25s ease;
    .layout-navbar-hidden & {
      height: $chat-app-height-with-no-navbar;
    }
    @include light.media-breakpoint-up($menu-collapsed-layout-breakpoint) {
      .layout-horizontal & {
        height: calc($chat-app-height - $chat-app-horizontal-height-diff);
      }
    }

    &.show {
      left: 0;
      opacity: 1;
    }

    .sidebar-body {
      height: calc(#{$chat-app-height} - 12.5rem);
      .layout-navbar-hidden & {
        height: calc(#{$chat-app-height-with-no-navbar} - 12.5rem);
      }
      @include light.media-breakpoint-up($menu-collapsed-layout-breakpoint) {
        .layout-horizontal & {
          height: calc(#{$chat-app-height} - 12.3rem - #{$chat-app-horizontal-height-diff});
        }
      }
    }
  }

  .app-chat-history {
    position: relative;
    height: $chat-app-height;
    transition: all 0.25s ease;
    .layout-navbar-hidden & {
      height: $chat-app-height-with-no-navbar;
    }
    @include light.media-breakpoint-up($menu-collapsed-layout-breakpoint) {
      .layout-horizontal & {
        height: calc($chat-app-height - $chat-app-horizontal-height-diff);
      }
    }

    .chat-history-header {
      padding: $chat-history-header-padding-y $chat-history-header-padding-x;
      margin-top: -1px;
    }

    .chat-history-body {
      height: $chat-history-height;
      padding: $chat-history-padding-y $chat-history-padding-x;
      overflow: hidden;
      .layout-navbar-hidden & {
        height: $chat-history-height-with-no-nabvar;
      }
      @include light.media-breakpoint-up($menu-collapsed-layout-breakpoint) {
        .layout-horizontal & {
          height: calc($chat-history-height - $chat-app-horizontal-height-diff);
        }
      }

      .chat-history {
        .chat-message {
          display: flex;
          justify-content: flex-start;

          .chat-message-text {
            border-radius: $chat-message-text-border-radius;
            padding: $chat-message-text-padding-y $chat-message-text-padding-x;
          }

          &.chat-message-right {
            justify-content: flex-end;

            .chat-message-text {
              border-top-right-radius: 0;
            }

            .user-avatar {
              margin-right: 0rem;
              margin-left: 1rem;
            }
          }
          &:not(.chat-message-right) .chat-message-text {
            border-top-left-radius: 0;
          }

          .thumbnail {
            cursor: zoom-in;
          }

          &:not(:last-child) {
            margin-bottom: $chat-list-margin;
          }
        }
      }
    }

    .chat-history-footer {
      padding: $chat-history-footer-padding;
      padding-inline-start: 2px;
      margin: $chat-history-footer-margin;
      border-radius: $chat-message-text-border-radius;
      .form-control.message-input {
        padding: calc(light.$input-padding-y - light.$input-border-width)
          calc(light.$input-padding-x - light.$input-border-width);
      }
    }
  }

  .app-chat-sidebar-right {
    position: absolute;
    top: 0;
    right: calc(-#{$chat-contact-width} - 1rem);
    width: $chat-contact-width;
    height: $chat-app-height;
    opacity: 0;
    z-index: 5;
    transition: all 0.25s ease;
    .layout-navbar-hidden & {
      height: $chat-app-height-with-no-navbar;
    }
    @include light.media-breakpoint-up($menu-collapsed-layout-breakpoint) {
      .layout-horizontal & {
        height: calc($chat-app-height - $chat-app-horizontal-height-diff);
      }
    }

    &.show {
      opacity: 1;
      right: 0;
    }

    .sidebar-body {
      height: calc(#{$chat-app-height} - 12.3rem);
      .layout-navbar-hidden & {
        height: calc(#{$chat-app-height-with-no-navbar} - 12.3rem);
      }
      @include light.media-breakpoint-up($menu-collapsed-layout-breakpoint) {
        .layout-horizontal & {
          height: calc(#{$chat-app-height} - 12.1rem - #{$chat-app-horizontal-height-diff});
        }
      }
    }
  }
}

// Small screen media
@media (max-width: 576px) {
  .app-chat {
    .app-chat-sidebar-right,
    .app-chat-sidebar-left,
    .app-chat-contacts {
      &.show {
        width: 100%;
      }
    }
  }
}

// Light style
@if $enable-light-style {
  .light-style {
    .app-chat {
      .app-sidebar .sidebar-header .chat-sidebar-avatar::after {
        box-shadow: 0 0 0 0.25rem light.$card-bg;
      }
      .app-chat-contacts,
      .app-chat-sidebar-left {
        background-color: light.$white;

        .chat-actions {
          .chat-search-input {
            background-color: light.$body-bg;
          }
        }

        .sidebar-body {
          .chat-contact-list {
            li {
              &.active {
                color: light.$white;
                box-shadow: 0px 0.125rem 0.25rem 0px rgba(light.$primary, 0.4);
                h6,
                .text-muted {
                  color: light.$white !important;
                }
              }
            }
          }
        }
      }

      .app-chat-history {
        background-color: $chat-bg-light;
        .chat-history-wrapper {
          background-color: $chat-bg-light;
        }
        .chat-history-header,
        .chat-history-footer {
          background-color: light.$card-bg;
        }
        .chat-history-footer {
          box-shadow: $app-chat-shadow-light;
        }

        .chat-history-body {
          .chat-history {
            .chat-message {
              .chat-message-text {
                background-color: light.$card-bg;
                box-shadow: $app-chat-shadow-light;
              }

              &.chat-message-right {
                justify-content: flex-end;

                .chat-message-text {
                  color: light.$white;
                }
              }
            }
          }
        }
      }

      .app-chat-sidebar-right {
        background-color: light.$white;
        box-shadow: 16px 1px 45px 3px rgba(light.$black, 0.5);
      }

      @media (max-width: 992px) {
        .app-chat-contacts {
          .chat-actions {
            .chat-search-input {
              background-color: light.$white;
            }
          }
        }
      }
    }
  }
}

// Dark Style
@if $enable-dark-style {
  .dark-style {
    .app-chat {
      .app-sidebar .sidebar-header .chat-sidebar-avatar::after {
        box-shadow: 0 0 0 0.25rem dark.$card-bg;
      }
      .app-chat-contacts,
      .app-chat-sidebar-left {
        background-color: dark.$card-bg;

        .chat-actions {
          .chat-search-input {
            background-color: dark.$body-bg;
          }
        }

        .sidebar-body {
          .chat-contact-list {
            li {
              &.active {
                color: dark.$white;
                box-shadow: 0px 0.125rem 0.25rem 0px rgba(dark.$primary, 0.4);
                h6,
                .text-muted {
                  color: dark.$white !important;
                }
              }
            }
          }
        }
      }

      .app-chat-history {
        background-color: $chat-bg-dark;
        .chat-history-wrapper {
          background-color: $chat-bg-dark;
        }

        .chat-history-header,
        .chat-history-footer {
          background-color: dark.$card-bg;
        }
        .chat-history-footer {
          box-shadow: $app-chat-shadow-dark;
        }

        .chat-history-body {
          .chat-history {
            .chat-message {
              .chat-message-text {
                background-color: dark.$card-bg;
                box-shadow: $app-chat-shadow-dark;
              }

              &.chat-message-right {
                justify-content: flex-end;

                .chat-message-text {
                  color: dark.$white;
                }
              }
            }
          }
        }
      }

      .app-chat-sidebar-right {
        background-color: dark.$card-bg;
      }
    }
  }
}

// RTL
@if $enable-rtl-support {
  [dir='rtl'] .app-chat {
    .app-chat-sidebar-left,
    .app-chat-contacts {
      right: calc(-#{$chat-contact-width} - 1rem);
      left: auto;

      &.show {
        left: auto;
        right: 0;
      }
    }

    .app-chat-sidebar-right {
      left: calc(-#{$chat-contact-width} - 1rem);
      right: auto;

      &.show {
        left: 0;
        right: auto;
      }
    }

    .app-chat-history {
      .chat-history-body .chat-history .chat .user-avatar {
        margin-left: 1rem;
        margin-right: 0;
      }
      .chat-message {
        &:not(.chat-message-right) {
          .chat-message-text {
            border-top-right-radius: 0 !important;
            border-top-left-radius: $chat-message-text-border-radius !important;
          }
        }
        &.chat-message-right {
          .chat-message-text {
            border-top-left-radius: 0 !important;
            border-top-right-radius: $chat-message-text-border-radius !important;
          }
        }
      }
    }
  }
}