/* ==========================================================================
   The in-cart stepper in a buy bar - .pdp-buybar__qty
   --------------------------------------------------------------------------
   The product page's mobile buy bar and the variant sheet's buy bar
   (assets/quickview) both hand the selected variant's cart line to a real QSM V2
   control once it is in the cart. This is that control's look in a bar, stated once
   for both, so the two cannot drift. It was body.page-product rules in product.less;
   the bar's state (which of the CTA and the stepper shows) stays there.

   QSM's own stylesheet (assets/qsm/qsm.css) draws the face - white, a hairline,
   trash | count | plus, the trash at the minimum. Only the size, the hairlines and
   the expanded face over the compact state are set here.

   Every rule starts `html body`: qsm.css writes its own as `html .vp-quantity-...`, and
   these have to outrank it whichever of the two sheets a page links first - on the
   product page they did so through body.page-product .bottom-fix-pdp-mobile.
   ========================================================================== */

/* ALWAYS THE EXPANDED FACE IN A BAR.

   QSM's compact state (`.vp-collapsed`) is the product-card affordance: a 34px square holding
   just the add icon, with the decrement and the count collapsed to `width: 0; opacity: 0;
   pointer-events: none`. A bar only shows this control when the selected variant IS in the
   cart, so the compact state has no meaning here and is overridden away. CSS only - the markup,
   the classes QSM sets and its behaviour are all untouched. */
html body .pdp-buybar__qty .vp-quantity-supermarket-theme-v2.vp-collapsed {
    width: 116px;
    height: 44px;
    padding: 0 8px;
    justify-content: space-between;
    border-radius: 14px;
}

html body .pdp-buybar__qty .vp-quantity-supermarket-theme-v2.vp-collapsed .vp-btn.vp-minus {
    width: 30px;
    min-width: 30px;
    flex: 0 0 auto;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
}

html body .pdp-buybar__qty .vp-quantity-supermarket-theme-v2.vp-collapsed .vp-btn.vp-plus {
    position: static;
    width: 30px;
    min-width: 30px;
    height: 100%;
    flex: 0 0 auto;
    transform: none;
}

html body .pdp-buybar__qty .vp-quantity-supermarket-theme-v2.vp-collapsed .vp-input {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
}

/* ...and the compact state's artwork with it: a cart glyph on the increment and a count badge
   off the container are right for a card and wrong next to a real quantity */
html body .pdp-buybar__qty .vp-quantity-supermarket-theme-v2.vp-collapsed .vp-btn.vp-plus:after {
    --tc-qsm-glyph: var(--tc-qsm-plus);
    width: 17px;
    height: 17px;
    color: inherit;
}

html body .pdp-buybar__qty .vp-quantity-supermarket-theme-v2.vp-collapsed.vp-has-count:before {
    content: none;
}

html body .pdp-buybar__qty .vp-quantity-supermarket-theme-v2 {
    width: 116px;
    height: 44px;
    border-radius: 14px;
    /* one step darker than the component's own #ededed hairline, which reads as almost nothing
       against a bar; border-color only, so the width and style stay qsm.css's */
    border-color: #e0e0e0;
}

/* the two hairlines between trash | count | plus, inset so they stop short of the corners */
html body .pdp-buybar__qty .vp-quantity-supermarket-theme-v2 .vp-input {
    border-right: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    align-self: stretch;
    margin: 8px 0;
}

html body .pdp-buybar__qty .vp-quantity-supermarket-theme-v2 .vp-btn {
    width: 30px;
}