@import (reference) '../../styles/custom.less';

.PostRecommendation {
  &__link {
    border-bottom: @base-border;
    font-size: 15px;
    display: flex;
    padding: 10px 0;
    overflow-wrap: break-word;

    &__header {
      color: @blue-heather;
      display: flex;
      flex-wrap: wrap;
    }

    &__author {
      color: @blue-heather !important;
    }

    &__bullet {
      &:after {
        content: '\2022';
        font-size: 14px;
        margin: 0 8px;
        color: @blue-heather;
      }
    }

    &__post-title {
      color: @black;
      display: block;
      font-size: 16px;
      font-weight: bold;
      margin-right: 10px;
      max-width: 175px;

      &:hover {
        color: @black !important;
      }
    }

    &__image-container {
      margin-left: auto;
      margin-top: 5px;
    }

    &__image {
      border-radius: @border-radius-base;
      height: 40px;
      width: 40px;
      object-fit: contain;
    }

    &:first-of-type {
      padding-top: 0;
    }

    &:last-of-type {
      border-bottom: 0;
      padding-bottom: 0;
    }
  }

  &__link--title {
    font-size: 16px;
    font-weight: bold;
  }

  &__comments {
    align-items: center;
    color: @blue-heather;
    display: flex;

    &__icon {
      font-size: 20px !important;
      margin-right: 3px;
    }

    &:hover {
      color: @primary-color !important;
    }
  }
}

@import 'PostRecommendation-nightmode';
