:host {
  @apply com-h-full;

  .discussion-chat-component {
    @apply com-h-full com-relative;

    .messages {
      @apply com-h-full;

      .message {
        @apply com-p-0 com-px-3;
      }

      .filler-message {
        transform: translate(-50%, -50%);
        @apply com-absolute com-top-1/2 com-left-1/2 com-w-4/5 com-text-center;

        h4 {
          @apply com-text-gray-400;
        }
      }
    }

    .send-message-form {
      @apply com-bg-white com-sticky com-bottom-0 com-w-full;

      form {
        align-items: self-start;
        @apply com-flex com-p-1;

        nb-form-field {
          @apply com-relative com-w-full;

          input {
            @apply com-font-normal com-resize-none;
          }

          .nbPrefix {
            @apply com-items-center com-flex -com-mt-2px;

            .emoji-button {
              @apply com-p-[0.1rem];
            }

            emoji-mart {
              @apply com-bottom-12 com-left-6 com-absolute;

              ::ng-deep {
                .emoji-mart-scroll {
                  @apply com-h-64;
                }

                .emoji-mart-bar {
                  @apply com-hidden;
                }
              }
            }
          }
        }

        > button {
          @apply com-items-center com-flex com-justify-center com-ml-1 com-max-w-[40px] com-w-1/5;
        }
      }
    }
  }

  .grouped-date {
    @apply com-m-0 com-mt-2 com-mb-3 com-flex com-items-center com-justify-center com-text-xs com-font-medium com-text-gray-500 com-px-[20px] #{!important};
  }

  .grouped-date::before,
  .grouped-date::after {
    @apply com-border-0 com-border-b com-border-solid com-border-Bright-Gray com-flex-1;
    content: '';
  }

  .grouped-date::before {
    @apply com-mr-3;
  }

  .grouped-date::after {
    @apply com-ml-3;
  }
}

.blocked-text {
  @apply com-text-base com-font-medium com-text-Yankees-Blue com-p-4;
}
