/* ==========================================================================
   The add-to-cart button in a buy bar - .pdp-buybar__cta
   --------------------------------------------------------------------------
   The product page's mobile buy bar and the variant sheet's buy bar (assets/quickview)
   show the same button - the product page's own _AddToCart markup, a filled 168x48
   .km-add-product-to-cart.km-add-product-to-cart. This is its 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 layout and
   its state (which of this and the stepper shows) stay there.

   Every rule starts `html body` and names its classes twice: the product page's desktop
   box rules (body.page-product .km-product-page-top .km-product-left
   .km-add-product-to-cart, 16px corners) reach this button as well, and these have to
   outrank them whichever sheet a page links first - on the product page they did so
   through body.page-product .bottom-fix-pdp-mobile.
   ========================================================================== */

/* the button's size: fixed and comfortable, not stretched to whatever is left over - the price
   cluster takes the slack */
html body .pdp-buybar__cta.pdp-buybar__cta .addProductBtnParent {
    position: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
}

html body .pdp-buybar__cta.pdp-buybar__cta .addProductBtnParent .km-add-product-to-cart.km-add-product-to-cart {
    width: 168px;
    min-width: 168px;
    height: 48px;
    max-height: 48px;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 15px;
    /* the theme's button carries `line-height: 60px`, which clipped a one-line label out of a
       48px button */
    line-height: 1;
    /* the 8px either side of the divider is the icon's own padding */
    gap: 0;
}

html body .pdp-buybar__cta.pdp-buybar__cta .addProductBtnParent .km-add-product-to-cart.km-add-product-to-cart .title-add-to-cart {
    line-height: 1;
    white-space: nowrap;
    padding-top: 0;
    font-size: 15px;
}

html body .pdp-buybar__cta.pdp-buybar__cta .addProductBtnParent .km-add-product-to-cart.km-add-product-to-cart svg {
    flex: 0 0 auto;
    margin: 0;
}

/* The CTA is a filled coloured button, so the shared partial's grey (#5E5E5E) cart glyph reads as
   a smudge on it. The design ships a white raster of the same icon; the svg is replaced rather
   than recoloured because it is the desktop button's icon too and must stay grey there. */
html body .pdp-buybar__cta.pdp-buybar__cta .km-add-product-to-cart.km-add-product-to-cart > svg {
    display: none;
}

/* the icon and, as this pseudo-element's own left border (the text side in RTL), the divider -
   `content-box` keeps the icon at 22px instead of letting the padding stretch the artwork */
html body .pdp-buybar__cta.pdp-buybar__cta .km-add-product-to-cart.km-add-product-to-cart:before {
    content: '';
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 22px;
    height: 22px;
    padding-left: 17px; /* 8px + the 1px rule + 8px */
    background-image: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)),
                      url('../img/icons/quick-atc-add-to-cart-white.png');
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, content-box;
    background-clip: padding-box, content-box;
    background-position: left 8px center, center;
    background-size: 1px 80%, contain;
}

/* WHILE THE ADD IS IN FLIGHT THE WHOLE BUTTON IS THE LOADING SURFACE.
   vp.loadingBtnStart() (core.js) moves the label and the svg into a hidden box and leaves its
   spinner; the icon and divider above are a pseudo-element it cannot move, so they go for as
   long as its class is present and the spinner sits alone in a box that never changes size.
   loadingBtnEnd removes the class on every exit path, so a failed add puts everything back. */
html body .pdp-buybar__cta.pdp-buybar__cta .km-add-product-to-cart.km-add-product-to-cart.vp-btn-loading {
    justify-content: center;
}

html body .pdp-buybar__cta.pdp-buybar__cta .km-add-product-to-cart.km-add-product-to-cart.vp-btn-loading:before {
    content: none;
}

html body .pdp-buybar__cta.pdp-buybar__cta .km-add-product-to-cart.km-add-product-to-cart.vp-btn-loading .loading-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

html body .pdp-buybar__cta.pdp-buybar__cta .km-add-product-to-cart.km-add-product-to-cart.vp-btn-loading .loading-btn img {
    /* the shared spinner asset is authored large; the button is 48px */
    width: 40px;
    height: 40px;
}