@best-answer-badge-color: #58a400;
@best-answer-post-background: rgba(88, 164, 0, 0.23);

.Badge--bestAnswer {
  background-color: @best-answer-badge-color;
}

.Button-jumpBestAnswer {
  background-color: @best-answer-badge-color;
  color: @text-on-dark;
  &:hover {
    background-color: @best-answer-post-background;
    color: @text-on-light;
  }
}

.Post-header {
  & > ul > li.item-isBestAnswer {
    margin-top: 3px;

    & when(is-extension-enabled('ianm-level-ranks') = true) {
      margin-right: 60px;
    }
  }
}

.Post-footer {
  width: 100%;
  .item-bestAnswerPost {
    padding: 10px 10px 0 10px;
    background-color: @best-answer-post-background;
    margin-top: 20px;
    border-radius: 5px;
    user-select: none;

    .Post-body {
      color: @text-color;
      word-break: break-word;

      &.Post-body--truncate {
        max-height: ~"calc(var(--post-body-lh, 1.7em) * var(--max-lines, 10))";
        mask-image: linear-gradient(180deg, #000 60%, transparent);
        text-overflow: ellipsis;
        overflow: hidden;
      }

      &:not(.Post-body--truncate) {
        padding-bottom: 5px;
      }
    }

    .PostUser-badges,
    .PostUser-avatar {
      display: none;
    }

    .Post--BestAnswer {
      margin-right: 0;

      a .icon {
        display: inline-block;
      }
    }

    .CommentPost {
      min-height: auto;
    }
  }
}

.UserCard-bestAnswerCount {
  .icon {
    margin-right: 5px;
  }
}

.Post--BestAnswer {
  background: @best-answer-badge-color;
  display: inline-block;
  border-radius: 5px;
  padding: 2px 5px;

  &,
  a {
    color: white;
  }

  .icon {
    margin-right: 5px;
  }

  .BestAnswer--User {
    display: none;
  }
}

@media @desktop-up {
  .Post-header {
    & > ul {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .item-isBestAnswer {
    margin-left: auto;
  }

  .Post--BestAnswer {
    margin-left: auto;
    .BestAnswer--User {
      display: initial;
      margin-left: 7.5px;
      font-size: 0.9em;
    }
  }
}

.Post-actions {
  .item-bestAnswer {
    .Button--primary {
      margin: 0px 10px;
    }
  }
}

.SolutionSearchResult {
  &-bestAnswer {
    background-color: @best-answer-post-background;
    border-radius: 5px;
    padding: 10px;
    margin-top: 20px;
  }
}