@import '../utilities/_variables.scss';

.card {
  margin-bottom: 1.5rem;
  line-height: $base-line-height;

  @media (min-width: $breakpoint-xsmall) {
    margin-bottom: 2rem;
  }
}

.card__img {
  position: relative;
  height: 0;
  padding-top: 150.27%;
  overflow: hidden;
  background-color: $secondary-color;
  transition: transform 0.3s ease-in-out;

  img,
  span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(0.97);
  }

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;

    @media (min-width: $breakpoint-large) {
      font-size: 1.6rem;
    }
  }

  &.lazyloaded img {
    transform: scale(1);
  }
}

.card__link:hover,
.card__link:focus {
  .card__img {
    transform: scale(1.02);
  }
}

.card__name {
  margin-top: 1rem;
  overflow: hidden;
  font-size: 1.3rem;
  text-overflow: ellipsis;
  letter-spacing: $letter-spacing;
  white-space: nowrap;
  text-transform: capitalize;

  @media (min-width: $breakpoint-large) {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
  }
}

.card__rating {
  display: flex;
  align-items: center;
}

.card__vote {
  margin-left: 1rem;
  font-size: 1.2rem;
  color: $text-color-grey;

  @media (min-width: $breakpoint-large) {
    font-size: 1.4rem;
  }
}

.card__stars {
  width: 7.3rem;
  height: 1.2rem;
  background-image: url(../../images/stars.png);
  background-repeat: no-repeat;
  background-size: auto 100%;

  >div {
    height: 100%;
    background-image: url(../../images/stars-filled.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
  }
}

@media (max-width: $breakpoint-xsmall - 1) {

  .card__name,
  .card__rating {
    display: none;
  }
}