@import '../../utils/variables';
@import '../../utils/mixins';

.post {
  background-color: $component-background;
  border-radius: 0.5rem;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: 0px 5px 7px -7px $box-shadow;
  margin: 0.8rem;

  @include for-xl-devices {
    width: 90%;
  }

  @include for-large-devices {
    width: 85%;
  }

  .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.3rem;

    .info {
      margin-left: 0.6rem;

      h4 {
        text-transform: capitalize;
        margin-bottom: 0;
        padding-bottom: 0;
      }

      span {
        font-size: small;
        color: $comment-text;
      }
    }
  }

  .text {
    display: flex;
    padding: 0.3rem 0;
    flex-wrap: wrap;
    margin: 0.6rem 0.3rem;
    word-break: break-all;
    word-wrap: break-word;
  }

  .image {
    padding: 0.3rem;
    img {
      width: 100%;
    }
  }
}

.bottomAction {
  padding: 0.3rem 0.3rem 0;
  border-top: 1px solid $border-color;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  .action {
    transition: linear 200ms;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    padding: 0.5rem 1rem ;
    flex: 1;
    align-items: center;
    justify-content: center;
     
    &:hover {
      background-color: $button-hover;
      transform: translateY(-2px);
      border-radius: 0.3rem;
    }

    h4 {
      color: $comment-text;
      margin-left: 0.5rem;

      @include for-small-screens {
        display: none;
      }
    }
    
    .postAction {
      margin: 0 0.5rem;
      color: $icon;
    }
  }
}
