@import "../../helpers";
.sf-product-card {
  box-sizing: border-box;
  position: relative;
  z-index: var(--product-card-z-index);
  max-width: var(--product-card-max-width, 10.625rem);
  flex: 0 1 var(--product-card-max-width, 10.625rem);
  height: var(--product-card-height);
  padding: var(--product-card-padding, var(--spacer-xs));
  background-color: var(--product-card-background, var(--c-white));
  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: var(--product-card-transition);
    box-shadow: var(--product-card-box-shadow);
  }
  &:hover {
    --product-card-image-opacity: 1;
    --product-card-image-even-opacity: 1;
    --product-card-wishlist-icon-opacity: 1;
    --product-card-add-button-opacity: 1;
    --product-card-z-index: 1;
    --product-card-box-shadow: 0px 4px 11px rgba(29, 31, 34, 0.1);
  }
  &:active {
    --product-card-box-shadow: 0px 4px 11px rgba(29, 31, 34, 0.1);
  }
  &__link {
    display: block;
    width: 100%;
    line-height: 0;
    text-decoration: none;
    margin: var(--product-card-link-margin, 0);
    text-align: left;
  }
  &__title {
    @include font(
      --product-card-title-font,
      var(--font-weight--normal),
      var(--h5-font-size),
      1.6,
      var(--font-family--secondary)
    );
    color: var(--product-card-title-color, var(--c-link));
    margin: var(--product-card-title-margin, var(--spacer-xs) 0 0 0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__image-wrapper {
    position: relative;
  }
  &__image,
  &__picture {
    transition: var(--product-card-image-transition, opacity 150ms ease-in-out);
    opacity: var(--product-card-image-opacity);
    &:nth-child(even) {
      position: absolute;
      top: 0;
      left: 0;
      opacity: var(--product-card-image-even-opacity, 0);
    }
    .sf-image {
      --image-width: 100%;
      --image-height: auto;
    }
  }
  &__badge {
    position: absolute;
    top: var(--product-card-badge-top, var(--spacer-xs));
    left: var(--product-card-badge-left, 0);
  }
  &__add-button {
    --circle-icon-position: absolute;
    --button-box-shadow: 0px 4px 11px rgba(29, 31, 34, 0.1);
    right: var(--product-card-add-button-right, 1rem);
    bottom: var(--product-card-add-button-bottom, 0);
    display: var(--product-card-add-button-display, none);
    transform: var(--product-card-add-button-transform, translate3d(0, 50%, 0));
    opacity: var(--product-card-add-button-opacity, 0);
    &:focus {
      --product-card-add-button-opacity: 1;
    }
  }
  &__price {
    margin: var(--product-card-margin, 0);
  }
  &__reviews {
    display: flex;
    align-items: center;
  }
  &__rating {
    display: flex;
  }
  &__reviews-count {
    margin: var(--product-card-reviews-count-margin, 0 0 0 var(--spacer-xs));
    color: var(--product-card-reviews-count-color, var(--c-text));
    text-decoration: none;
    @include font(
      --product-reviews-count-font,
      var(--font-weight--light),
      var(--font-size--sm),
      1.6,
      var(--font-family--secondary)
    );
  }
  &__wishlist-icon {
    --icon-color: var(--c-dark-variant);
    position: absolute;
    top: var(--product-card-wishlist-icon-top, var(--spacer-xs));
    right: var(--product-card-wishlist-icon-right, var(--spacer-xs));
    padding: var(--product-card-wishlist-icon-padding, 0);
    opacity: var(--product-card-wishlist-icon-opacity, 1);
    transition: var(
      --product-card-wishlist-icon-transition,
      opacity 150ms ease-in-out
    );
    cursor: pointer;
    &:focus {
      --product-card-wishlist-icon-opacity: 1;
    }
  }
  &.on-wishlist {
    --product-card-wishlist-icon-opacity: 1;
  }
  @include for-desktop {
    --product-card-max-width: 15.5rem;
    --product-card-padding: var(--spacer-sm);
    --product-card-transition: box-shadow 150ms ease-in-out;
    --product-card-wishlist-icon-top: var(--spacer-base);
    --product-card-wishlist-icon-right: var(--spacer-base);
    --product-card-wishlist-icon-opacity: 0;
    --product-card-add-button-display: flex;
    --product-card-title-margin: var(--spacer-sm) 0 0 0;
    --product-card-margin: var(--spacer-xs) 0;
  }
}