@import './apps/commudle-admin/src/assets/styles/variables';

p {
  margin: 0;
  font-size: $fs-13;
  line-height: 15px;
  color: $gunmetal;
}

.message-container {
  padding: $space-8 0 $space-8 $space-8;

  .prefix {
    width: 100%;

    .avatar {
      @apply com-h-8 com-w-8 com-rounded-full com-object-cover com-object-center;
    }

    .user-container {
      width: 100%;
      margin-left: $space-8;

      .user {
        .name {
          a {
            text-decoration: none;
            color: inherit;
            font-weight: $fw-600;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        .time {
          @apply com-ml-2 com-text-xs com-text-gray-500;
        }
      }

      .content {
        margin: $space-4 0;
        word-break: break-word;
      }
    }

    .upvote-btn {
      align-self: center;
    }
  }

  .suffix {
    margin-left: $space-32;

    app-votes-display {
      &::ng-deep {
        .votes {
          p {
            height: 18px;
            font-size: $fs-h6;

            .count {
              color: $spanish-gray;
            }

            nb-icon {
              font-size: $fs-13;
            }
          }
        }
      }
    }

    nb-action {
      border: none;
      padding: 0 $space-8;

      p {
        margin-top: $space-1;
        font-size: $fs-h6;
        line-height: 14px;
        color: $spanish-gray;
      }

      nb-icon {
        font-size: $fs-13;
      }
    }
  }

  .replies {
    margin-left: $space-32;

    .reply-form {
      margin-top: $space-8;

      emoji-mart {
        display: none;

        &.active {
          display: initial;
        }
      }
    }
  }
}
