/**
 * Copyright since 2002 Creabilis.
 *
 * NOTICE OF LICENSE
 *
 * @author     Creabilis <contact@creabilis.com>
 * @copyright Since 2002 Creabilis
 * @license
 *  International Registered Trademark & Property of Creabilis
 *
 * Popup showing the composition of a cart line.
 */

/* trigger : the eye sits after the label, at the size of the text */
.composition-zoom-link {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
}

.composition-zoom-link .feather-icon {
    font-size: 1em;
}

.composition-zoom__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* the composition takes the whole width : the fields are read after it, underneath */
.composition-zoom__image {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    text-align: center;
}

/* the thumbnail is blown up to the width the zoom will occupy : both are the same
   composition, so they share the same ratio and the swap moves nothing */
.composition-zoom__image img {
    width: 100%;
    height: auto;
}

.composition-zoom__fields {
    margin: 0;
}

.composition-zoom__field + .composition-zoom__field {
    margin-top: .75rem;
}

.composition-zoom__field-label {
    font-weight: 600;
}

.composition-zoom__field-value {
    margin: 0;
}

/* the zoom is rendered on the first request : the thumbnail waits under a spinner */
.composition-zoom__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1rem 0 0 -1rem;
    display: none;
}

.composition-zoom-modal.is-loading .composition-zoom__spinner {
    display: block;
}

/* the placeholder is the cart thumbnail blown up : blurred, it reads as a preview loading
   instead of a pixelated image. Removed once the zoom has replaced it */
.composition-zoom-modal .js-composition-zoom-image {
    transition: filter .3s ease-out, opacity .3s ease-out, transform .3s ease-out;
}

.composition-zoom-modal.is-loading .js-composition-zoom-image {
    opacity: .75;
    filter: blur(12px);
    /* the blur fades out at the edges : scaling up keeps the frame filled */
    transform: scale(1.03);
}