/**
 * pacompose - repris de crea_customproduct 2.8.0 (Creabilis).
 *
 * NOTICE OF LICENSE
 *
 * @author     Creabilis <contact@creabilis.com>
 * @copyright Since 2002 Creabilis
 * International Registered Trademark & Property of Creabilis
 *
 * State shown over the compositions while a picture is being sent and treated. Neutral on
 * purpose : the theme is free to restyle it, the module only makes sure something is said.
 */

.composition-preview {
    position: relative;
    /* 0.7.8 (change 20, règle 9) : la zone remplit son cadre ; `front.js` lui donne le fond des sorties */
    min-height: 100%;
}

.composition-preview__loader {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, .82);
}

.composition-preview__spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid rgba(0, 0, 0, .12);
    border-top-color: rgba(0, 0, 0, .45);
    border-radius: 50%;
    animation: composition-preview-spin 900ms linear infinite;
}

.composition-preview__loader-text {
    max-width: 18rem;
    padding: 0 1rem;
    font-size: .9375rem;
    line-height: 1.4;
}

@keyframes composition-preview-spin {
    to {
        transform: rotate(360deg);
    }
}

/* a visitor who asked for less movement gets a still ring rather than none : the message
   carries the information, the animation only makes it livelier */
@media (prefers-reduced-motion: reduce) {
    .composition-preview__spinner {
        animation: none;
    }
}

/* 0.7.7 (change 20) : la boussole des vues, en haut à droite de l'aperçu - le dessin en SVG, un bouton invisible par
   flèche ; les couleurs suivent le texte de la page, la vue affichée aussi (0.7.8, décision d'Emmanuel du 27/10 : la
   couleur du titre, pas l'accent), pleine au lieu de creuse ; le thème peut surcharger l'accent */
.composition-compass {
    position: absolute;
    z-index: 3;
    top: .75rem;
    right: .75rem;
    width: 11rem;
    aspect-ratio: 4 / 3;
    color: currentColor;
    --composition-compass-accent: currentColor;
    --composition-compass-body: #ffffff;
    --composition-compass-edge: #ece4d4;
}

.composition-compass[hidden] {
    display: none;
}

.composition-compass__drawing {
    display: block;
    width: 100%;
    height: 100%;
}

.composition-compass__shadow {
    fill: currentColor;
    opacity: .08;
}

.composition-compass__body {
    fill: var(--composition-compass-body);
    stroke: currentColor;
    stroke-width: 1.8;
}

.composition-compass__ring {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    opacity: .35;
}

.composition-compass__shaft,
.composition-compass__chevron {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.composition-compass__halo,
.composition-compass__shaft-full,
.composition-compass__full {
    display: none;
}

.composition-compass__arrow.is-active .composition-compass__shaft,
.composition-compass__arrow.is-active .composition-compass__chevron {
    display: none;
}

.composition-compass__arrow.is-active .composition-compass__halo {
    display: block;
    fill: var(--composition-compass-accent);
    opacity: .12;
}

.composition-compass__arrow.is-active .composition-compass__shaft-full {
    display: block;
    fill: none;
    stroke: var(--composition-compass-accent);
    stroke-width: 4.5;
    stroke-linecap: round;
}

.composition-compass__arrow.is-active .composition-compass__full {
    display: block;
    fill: var(--composition-compass-accent);
    stroke: var(--composition-compass-accent);
    stroke-width: 2;
    stroke-linejoin: round;
}

.composition-compass__hit {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
}

.composition-compass__hit:focus-visible {
    outline: 2px solid var(--composition-compass-accent);
    outline-offset: 2px;
}

.composition-compass__hit:hover + .composition-compass__hit,
.composition-compass__hit:hover {
    background: transparent;
}

@media (max-width: 575.98px) {
    .composition-compass {
        top: .5rem;
        right: .5rem;
        width: 8.5rem;
    }
}

/* 0.9.6 (décision d'Emmanuel du 29/10) : l'aperçu s'agrandit au clic ; la loupe, en bas à droite, le dit. La vue agrandie
   est une fenêtre posée sur `body` (hors des contextes d'empilement de la fiche), que la souris parcourt. */
.composition-preview .js-composition-stage {
    cursor: zoom-in;
}

.composition-zoom-button {
    position: absolute;
    z-index: 3;
    right: .75rem;
    bottom: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: currentColor;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    cursor: zoom-in;
}

.composition-zoom-button:hover,
.composition-zoom-button:focus-visible {
    border-color: currentColor;
}

.composition-zoom-button__icon,
.composition-zoom__close svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

html.composition-zoom-open,
html.composition-zoom-open body {
    overflow: hidden;
}

.composition-zoom {
    position: fixed;
    /* 0.9.7 : au-dessus des pastilles flottantes de la boutique (avis clients, conversation) */
    z-index: 2147483000;
    inset: 0;
    background: #f7f3ec;
    /* 0.9.14 : un clic n'importe où dans la fenêtre la ferme */
    cursor: zoom-out;
}

.composition-zoom__viewport {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    -webkit-overflow-scrolling: touch;
}

.composition-zoom__stage {
    position: relative;
    flex: none;
    margin: auto;
    /* 0.9.7 : les canvas d'une projection débordent du canevas ; sans coupe, une barre de défilement de trop */
    overflow: hidden;
}

.composition-zoom .composition-preview__loader {
    background: transparent;
}

.composition-zoom__close {
    position: absolute;
    z-index: 3;
    top: .75rem;
    right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: #22302f;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    cursor: pointer;
}