/*
================================================

Space Vanta Theme 1.0

Module:
Cart Item Image

File:
public/cart/cs/image.css

Version:
1.1

Phase:
CART-FRAME-001

Responsibilities:

- Image frame
- Image containment
- Image reflection
- Image border / surface

Does NOT handle:

- Cart item layout
- Product information
- Pricing
- Quantity

================================================
*/


/* =================================================
01. IMAGE FRAME
================================================= */

.sv-cart-item__image-frame {

  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background:
    var(--sv-color-bg-secondary);

  border:
    1px solid rgba(145, 151, 158, 0.42);

  border-radius:
    var(--sv-radius-md, 4px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 18px rgba(54, 60, 68, 0.05);
}


/* =================================================
02. INTERNAL REFLECTION
================================================= */

.sv-cart-item__image-frame::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 2;

  background:
    linear-gradient(112deg,
      transparent 22%,
      rgba(255, 255, 255, 0.28) 46%,
      rgba(112, 155, 204, 0.055) 52%,
      transparent 70%);

  transform:
    translateX(-120%);

  transition:
    transform 700ms var(--sv-ease-brand, cubic-bezier(.22, .61, .36, 1));
}


/* =================================================
03. INNER EDGE
================================================= */

.sv-cart-item__image-frame::after {

  content: "";

  position: absolute;

  inset: 4px;

  z-index: 2;

  pointer-events: none;

  border:
    1px solid rgba(255, 255, 255, 0.26);

  opacity: 0.72;
}


/* =================================================
04. IMAGE LINK
================================================= */

.sv-cart-item__image-link {

  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;
  height: 100%;

  text-decoration: none;
}


/* =================================================
05. IMAGE
================================================= */

.sv-cart-item__image {

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  padding:
    clamp(10px, 2vw, 24px);

  box-sizing: border-box;

  transform:
    scale(0.985);

  transition:
    transform var(--sv-transition-base, 220ms ease),
    opacity var(--sv-transition-base, 220ms ease);
}


/* =================================================
06. DESKTOP HOVER
================================================= */

@media (hover: hover) and (pointer: fine) {

  .sv-cart-item__image-frame:hover::before {

    transform:
      translateX(120%);
  }


  .sv-cart-item__image-frame:hover .sv-cart-item__image {

    transform:
      scale(1);
  }
}


/* =================================================
07. MOBILE
================================================= */

@media (max-width: 767px) {

  .sv-cart-item__image-frame {

    min-height: 0;

    width: 100%;

    aspect-ratio: 1 / 1;

    border-radius: 3px;

    /*
         * Slightly more constructed than the
         * surrounding Product Frame.
         */
    border:
      1px solid rgba(128, 136, 145, 0.46);

    background:
      linear-gradient(145deg,
        rgba(235, 237, 239, 0.96),
        rgba(205, 209, 213, 0.76));

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),

      inset 0 -1px 0 rgba(100, 108, 116, 0.10),

      0 4px 12px rgba(55, 61, 68, 0.07);
  }


  .sv-cart-item__image-frame::after {

    inset: 3px;

    border:
      1px solid rgba(255, 255, 255, 0.34);

    opacity: 0.8;
  }


  .sv-cart-item__image {

    padding: 8px;

    transform:
      scale(0.985);
  }
}


/* =================================================
08. VERY SMALL MOBILE
================================================= */

@media (max-width: 390px) {

  .sv-cart-item__image {

    padding: 7px;
  }
}


/* =================================================
09. REDUCED MOTION
================================================= */

@media (prefers-reduced-motion: reduce) {

  .sv-cart-item__image-frame::before {

    transition: none;
  }


  .sv-cart-item__image {

    transition: none;
  }
}