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

.message {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;

  p {
    font-size: 0.8rem;
  }

  nb-icon {
    font-size: 0.8rem;
  }

  .author-image {
    width: 40px;
    margin-right: $space-8;
    display: flex;
    align-self: start;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 100%;
    }
  }

  .content-controls {
    width: 100%;

    .author-details {
      .name {
        font-weight: $fw-600;
        font-size: $fs-h5;
        line-height: 16px;
        color: $gunmetal;
      }

      .username {
        margin-left: $space-8;
        font-size: $fs-h6;
        line-height: 14px;
        color: rgba($gunmetal, 0.85);
      }

      .date {
        font-size: $fs-h5;
        line-height: 16px;
        color: $spanish-gray;
      }
    }

    .content {
      margin-top: $space-4;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: $fs-h5;
      line-height: 16px;
      color: $raisin-black;
    }

    .details-flag {
      align-items: flex-start;
      display: flex;
      justify-content: flex-start;

      > div {
        margin-right: 10px;

        p {
          margin: 5px 0 0;
        }
      }

      .votes {
        nb-icon {
          font-size: 1.2rem;
        }
      }

      .votes,
      .reply-button {
        p {
          font-size: 1.1rem;
        }
      }
    }
  }
}

.replies-container {
  margin: 1rem;
  // border-bottom: 1px solid lightgrey;
  // border-left: 1px solid lightgrey;
  // border-right: 1px solid lightgrey;

  .reply-message {
    margin-bottom: 0.5rem;
  }

  .reply-form {
    width: 100%;

    form {
      display: flex;
      width: 100%;

      button {
        width: 30px;
      }
    }
  }
}
