Retrospring/app/assets/stylesheets/components/_answerbox.scss

@use "sass:map";

.answerbox {
  &__question-text,
  &__question-user,
  &__answer-user,
  &__answer-date {
    margin-bottom: 0;
    overflow: hidden;
    word-break: break-word;
  }

  &__answer-date {
    font-size: .8rem;
    line-height: .8;
    overflow: visible;
  }

  .card-header,
  &__answer-body {
    position: relative;
  }

  &__answer-text {
    margin-bottom: map.get($spacers, 3);
  }

  &__question-user-avatar,
  &__answer-user-avatar {
    margin-right: map.get($spacers, 2);
    border-radius: $avatar-border-radius;
  }

  & .text-muted a,
  & .text-muted a:hover {
    color: var(--muted-text);
    text-decoration: none;
  }

  &__action {
    padding-left: 0;
    padding-right: map.get($spacers, 1);
    text-decoration: none;

    & i {
      font-size: 1.4rem;
      vertical-align: top;
    }

    &:hover,
    &:focus,
    &:active {
      text-decoration: none;
    }

    &[name="ab-smile"],
    &[name="ab-smile-comment"] {
      color: var(--primary);

      &:hover {
        color: var(--success);
      }

      &[data-action="unsmile"] {
        color: var(--success);

        &:hover {
          color: var(--danger);
        }
      }
    }
  }

  &__actions {
    text-align: right;
    justify-content: space-between;
    padding-top: 10px;

    @include media-breakpoint-up('sm') {
      justify-content: flex-end;
      padding-top: 0;
    }
  }

  &__pinned {
    display: none;
  }

  .card-body {
    padding-bottom: .6rem;
  }
}

#pinned-answers {

  .answerbox__pinned {
    display: inline;
  }
}