@import '../contrast.scss';

$lightContrast: contrast($primary, white);
$darkContrast: contrast($primary, black);

.rsccard {
  &__card {
    border: 1px solid $border-color;
  }

  &__meta {
    &-author {
      color: $gray-500;
    }

    &-link {
      background: $primary;
      border: none;
      transition: all 0.2s ease;

      @if ($lightContrast > $darkContrast) {
        color: $white;
      } @else {
        color: $dark;
      }

      &:hover {
        background: $secondary;
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .rsccard {
    &__card .card-body {
      flex-direction: column;
    }

    &__img {
      flex: auto;
      margin: 3%;
      width: 94%;
    }

    &__meta {
      margin: 3%;
    }
  }
}
