@use "../common/utils" as *;
@use "../common/mixins" as *;

.product-card {
  position: relative;
  background: rgba(var(--color-white));
  padding: calc-rem(10px);
  border-radius: var(--border-radius);
  height: 100%;
  display: grid;
  grid-template-rows: calc-rem(210px) 1fr;

  @include media-breakpoint-up(lg) {
    grid-template-rows: calc-rem(260px) 1fr;
  }

  &__thumbnail {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-block: calc-rem(40px 50px);

    @include media-breakpoint-up(lg) {
      padding-block: calc-rem(50px 60px);
    }

    img {
      height: calc-rem(140px);
      width: auto;
      object-fit: contain;

      @include media-breakpoint-up(lg) {
        height: calc-rem(158px);
      }
    }
  }

  &__content {
    background: rgba(var(--color-background));
    padding: calc-rem(30px 25px);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    position: relative;

    @include media-breakpoint-up(lg) {
      padding: calc-rem(34px 30px);
      min-height: calc-rem(240px);
    }

    .pill-category{
      position: absolute;
      top: calc-rem(-9px);
      left: calc-rem(25px);

      @include media-breakpoint-up(lg) {
        left: calc-rem(30px);

      }


    }

    .product-name {
      font-size: clamp-font(14px, 14px);
      text-transform: uppercase;
      line-height: 1.29;
      margin-bottom: calc-rem(20px);
    }

    .product-usps {
      list-style-type: none;
      padding-left: 0;
      margin-bottom: calc-rem(45px);

      li {
        display: flex;
        gap: calc-rem(6px);

        .icon-checkmark {
          width: calc-rem(13px);
          margin-top: calc-rem(1px);
          height: auto;
        }
      }
    }

    .product-price {
      display: flex;
      flex-direction: column;
      max-width: calc(100% - 2.5rem);
      margin-top: auto;

      .label-vat {
        color: rgba(var(--color-text-label));
        font-weight: var(--font-weight-bold);
        margin-bottom: calc-rem(6px);
        line-height: 1;
      }

      .price {
        font-size: clamp-font(16px, 16px);
        font-weight: var(--font-weight-extra-bold);
        line-height: 1;
        white-space: nowrap;

        &.in-sale {
          del {
            color: rgba(var(--color-danger));
            margin-right: calc-rem(5px);
            white-space: nowrap;
          }

          ins {
            text-decoration: none;
            white-space: nowrap;
          }
        }

      }
    }
  }

  &__btn-buy-product {
    position: absolute;
    bottom: calc-rem(30px);
    right: calc-rem(30px);
    width: calc-rem(45px);
    height: calc-rem(45px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: rgba(Var(--color-white));
    border: calc-rem(1px) solid rgba(var(--color-border));
    transition: .24s ease;
    z-index: 2;

    svg {
      flex: none;
      transition: .24s ease;

      path {
        transition: .24s ease;
      }
    }

    &:before {
      content: '';
      width: 100%;
      height: 100%;
      background: rgba(var(--color-secondary));
      position: absolute;
      inset: 0;
      border-radius: 100%;
      scale: 0;
      transform-origin: center;
      transition: .24s ease;
      z-index: -1;
    }

    &:hover {
      color: rgba(var(--color-white));

      .st0-1 {
        fill: rgba(var(--color-white));
      }

      .st0-2 {
        stroke: rgba(var(--color-secondary));
      }

      &:before {
        scale: 1;
      }
    }
  }
}
