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

.user-feed-post {
  border: 1px solid $platinum;
  border-radius: $border-10;

  .user-feed-post-prefix {
    padding: $space-16;

    .user-feed-post-details {
      nb-user {
        &::ng-deep {
          .user-name {
            color: $gunmetal;
            font-size: $fs-h5;
            font-weight: $fw-600;
          }

          .user-title {
            color: $spanish-gray;
            font-style: italic;
          }
        }
      }

      button {
        font-weight: $fw-400;
        text-transform: capitalize;
      }
    }

    .user-feed-post-content {
      color: $gunmetal;
      font-size: $fs-h5;
      margin-top: $space-28;
    }

    .user-feed-post-tags {
      gap: $space-4;
      margin-top: $space-20;

      .user-feed-post-tag {
        background-color: $lavender;
        border-radius: $border-20;
        color: $neon-blue;
        font-size: $fs-h6;
        padding: 0 $space-8;
      }
    }
  }

  .user-feed-post-images {
    height: 200px;
    overflow: auto;

    img {
      border: 0.5px solid $platinum;
      box-sizing: border-box;
      flex: 1;
      height: inherit;
      object-fit: cover;
      object-position: center;
      width: 32%;
    }
  }

  .user-feed-post-suffix {
    padding: $space-16;

    .user-feed-post-votes {
      color: $spanish-gray;
      font-size: $fs-h6;

      nb-icon {
        color: rgba($brilliant-azure, 0.5);
        font-size: $fs-h4;
      }
    }
  }
}

@media all and (max-width: $tab-width) {
  .user-feed-post {
    .user-feed-post-images {
      flex-direction: column;
      height: max-content;

      img {
        width: 100%;
      }
    }
  }
}
