@import "../variables/dimensions";
@import "../variables/colors";

.rc-card {
  background: $lightestGrayColor;
  box-shadow: 0 4px 5px rgba($blackColor, 0.08);
  border-radius: 2px;
  min-width: 100px;
  max-width: 300px;
  min-height: 315px;
  overflow: hidden;
  transition: box-shadow 0.2s ease-in;

  &:hover {
    box-shadow: 0 4px 10px rgba($blackColor, 0.08);
  }

  &--secondary {
    background: $whiteColor;
    box-shadow: none;
    border: 1px solid $mediumGrayColor;

    &:hover {
      box-shadow: none;
    }
  }

  &--clickable {
    cursor: pointer;
  }

  &--with-footer {
    padding-bottom: 20px;
  }
}

.rc-card__image {
  display: block;
  width: auto;
  height: auto;
  pointer-events: none;

  &--cover {
    width: 100%;
  }
}

.rc-card__image-placeholder {
  min-height: 150px;
  background: $whiteColor;
}

.rc-card__content {
  padding: 20px 20px 0;

  & + .rc-card__content {
    padding-top: 0;

    &--top-offset {
      padding-top: 10px;
    }
  }

  &--center {
    text-align: center;
  }

  &--top-offset {
    padding-top: 30px;
  }

  &--bottom-offset {
    padding-bottom: 20px;
  }
}