.message {
  @apply com-flex com-flex-row com-flex-nowrap com-justify-start;

  .content-controls {
    @apply com-w-full;

    .author-details {
      a,
      a:hover,
      a:focus,
      a:active {
        @apply com-no-underline;
      }

      .name {
        @apply com-font-semibold com-text-sm com-text-gunmetal;
      }

      .username {
        @apply com-ml-2 com-text-xs com-text-gunmetal com-opacity-80;
      }

      .date {
        @apply com-text-sm com-leading-4 com-text-Sonic-Silver;
      }
    }

    .content {
      word-break: break-word;
      @apply com-mt-1 com-whitespace-pre-wrap com-text-sm com-leading-4 com-text-gunmetal;
    }

    .details-flag {
      @apply com-items-start com-flex com-justify-start;

      nb-icon {
        @apply com-text-Sonic-Silver com-text-base;
      }

      > div {
        @apply com-mr-[10px];

        p {
          @apply com-text-Sonic-Silver com-mt-5px com-mx-0 com-mb-0;
        }
      }
    }
  }
}

.replies-container {
  @apply com-my-4 com-mr-0 com-ml-4;

  .reply-message {
    margin-bottom: 0.5 * 16px;
  }

  .reply-form {
    nb-form-field {
      textarea {
        resize: none;
        @apply com-resize-none com-py-2 com-pr-20 com-pl-10;

        &::placeholder {
          @apply com-pt-20px;
        }
      }

      &::ng-deep {
        .nb-form-field-prefix-medium {
          @apply com-mb-auto;
        }

        .nb-form-field-suffix-medium {
          @apply com-mt-0 com-mr-0 com-mb-auto -com-ml-16;

          button {
            @apply com-capitalize;
          }
        }
      }
    }
  }
}
