.thb-article-reactions {
  border-top: 1px solid $border;
  padding-top: 30px;
  margin-bottom: 15px;

  h6 {
    font-size: 12px;
    text-transform: uppercase;
    color: $black;
    margin-bottom: 20px;
  }
  .row {
    margin: 0 -11px;
    padding: 0;
    .columns {
      padding: 0 11px;
      display: flex;
      flex-direction: column;
      .thb-reaction {
        text-align: center;
        margin-bottom: 15px;
        cursor: pointer;
        height: 100%;
        display: flex;
        flex-direction: column;
        .thb-reaction-image {
          padding: 10px;
          border-radius: 2px;
          border: 1px solid $border;
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          margin-bottom: 15px;
          @extend .mid-transition;

          @include ie11() {
            flex: none;
          }
          svg {
            width: 32px;
            height: 32px;
            margin-top: 10px;
            @extend .quick-transition;
          }
          .thb-reaction-name {
            text-transform: uppercase;
            font-size: 10px;
            margin-top: 15px;
          }
          @include min-break($break-small) {
            padding: 15px;
          }
        }
        .thb-reaction-count {
          font-size: 14px;
        }
        &:hover {
          .thb-reaction-image {
            border-color: $accent;

            svg {
              @include scale(1.07);
            }
          }
        }
        &.thb-reaction-loading {
          cursor: not-allowed;
          opacity: 0.5
        }
        &.active {
          .thb-reaction-image {
            border-color: $accent;
            background: rgba($accent, 0.05);
          }
          .thb-reaction-count {
            color: $accent;
          }
        }
      } // .thb-reaction
    }
  }
}