@import '../helpers/helpers';

.card-product-banner {
  @include make-col(4);
  margin-bottom: 30px;

  @include media-breakpoint-down(md) {
    @include make-col(6);
  }

  @include media-breakpoint-down(sm) {
    position: relative;
    padding: 0 5px;
    margin-bottom: 20px;

    &::before {
      content: '';
      position: absolute;
      top: -20px;
      left: 5px;
      width: calc(100% - 10px);
      border-bottom: 1px solid #ccc;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 5px;
      width: calc(100% - 10px);
      border-bottom: 1px solid #ccc;
    }
  }

  &__link {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0 15px;

    @include media-breakpoint-down(sm) {
      display: inline-block;
      padding: 0;
      width: 100%;
    }
  }

  &__image {
    display: inline-block;
    width: 100%;
  }
}

.products-list {
  .card-sponsor-product,
  .card-sponsor-banner {
    @include make-col(4);
    margin-bottom: 0;
  }

  .card-sponsor-banner {
    &__link {
      display: inline-block;
      width: 100%;
      height: 100%;
      padding: 0 15px;
    }

    &__image {
      display: inline-block;
      width: 100%;
    }
  }

  .card-sponsor-product {
    .product-card {
      max-width: 100%;
    }
  }

  .product-card__sponsored {
    @include font-size(12);
    @include line-height(16);
    color: $squant;
    font-weight: 400;
    margin-top: -3px;
    margin-bottom: 15px;
    padding: 2px 4px;

    &:not(.product-card__sponsored--empty) {
      width: max-content;
      background: $gray-light;
    }
  }
}

@include media-breakpoint-down(md) {
  .products-list {
    .card-sponsor-product,
    .card-sponsor-banner {
      @include make-col(6);

      .card {
        max-width: 100%;
      }
    }
  }

  .products-list-v2 {
    .card-sponsor-product:nth-of-type(n+3) {
      .card {
        &:before {
          content: none;
        }
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .products-list {
    .product-card__sponsored {
      margin-right: auto;
      margin-left: auto;
    }

    .card-sponsor-banner {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 20px;
        left: 5px;
        width: calc(100% - 10px);
        border-bottom: 1px solid $gray;
      }
    }
  }
}