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

Space Vanta Theme 1.0

Module:
Cart Continue Shopping

File:
public/cart/cs/continue-shopping.css

Version:
1.2

Phase:
CART-FRAME-001

Purpose:

Secondary Cart Navigation

Responsibilities:

- Continue Shopping visual hierarchy
- Secondary action interaction
- Spatial navigation treatment
- Responsive presentation

Does NOT handle:

- Navigation routing
- Cart mutation
- Checkout logic

DNA:

Spatial
Editorial
Geometric
Constructed
Restrained

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


/* =================================================
01. SECONDARY ACTION
================================================= */

.sv-cart-summary__continue {

  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  min-height: 42px;

  margin-top: 11px;

  padding:
    0 18px;

  box-sizing: border-box;

  border: 0;

  border-top:
    1px solid
    rgba(110, 118, 126, 0.24);

  background: transparent;

  color:
    var(
      --sv-color-text-secondary,
      #6F6C65
    );

  font-family:
    inherit;

  font-size: 10px;

  line-height: 1;

  font-weight: 400;

  letter-spacing: 0.105em;

  text-transform: uppercase;

  text-align: center;

  text-decoration: none;

  opacity: 0.72;

  transition:
    color
      var(--sv-transition-fast, 160ms ease),

    opacity
      var(--sv-transition-fast, 160ms ease),

    border-color
      var(--sv-transition-fast, 160ms ease);
}


/* =================================================
02. CONSTRUCTED NAVIGATION MARKER
================================================= */

.sv-cart-summary__continue::before {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 26px;

  height: 1px;

  background:
    currentColor;

  transform:
    translateX(-50%);

  opacity: 0.34;

  transition:
    width
      var(--sv-transition-fast, 160ms ease),

    opacity
      var(--sv-transition-fast, 160ms ease);
}


/* =================================================
03. NAVIGATION ARROW
================================================= */

.sv-cart-summary__continue::after {

  content: "→";

  position: absolute;

  right: 12px;

  top: 50%;

  transform:
    translateY(-50%)
    translateX(-2px);

  font-size: 12px;

  line-height: 1;

  letter-spacing: 0;

  opacity: 0.36;

  transition:
    transform
      var(--sv-transition-fast, 160ms ease),

    opacity
      var(--sv-transition-fast, 160ms ease);
}


/* =================================================
04. HOVER
================================================= */

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

  .sv-cart-summary__continue:hover {

    color:
      var(
        --sv-color-text-primary,
        #2D2D2B
      );

    opacity: 0.92;

    border-top-color:
      rgba(82, 89, 96, 0.38);
  }


  .sv-cart-summary__continue:hover::before {

    width: 48px;

    opacity: 0.62;
  }


  .sv-cart-summary__continue:hover::after {

    transform:
      translateY(-50%)
      translateX(2px);

    opacity: 0.72;
  }
}


/* =================================================
05. ACTIVE
================================================= */

.sv-cart-summary__continue:active {

  opacity: 0.62;
}


/* =================================================
06. MOBILE
================================================= */

@media (max-width: 767px) {

  .sv-cart-summary__continue {

    min-height: 40px;

    margin-top: 10px;

    padding:
      0 32px 0 18px;

    font-size: 9px;

    letter-spacing: 0.095em;
  }


  .sv-cart-summary__continue::after {

    right: 10px;

    font-size: 11px;
  }
}


/* =================================================
07. REDUCED MOTION
================================================= */

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

  .sv-cart-summary__continue,
  .sv-cart-summary__continue::before,
  .sv-cart-summary__continue::after {

    transition: none;
  }
}