/* ============================================================
   Anteprima dei modelli "Codice HTML" (.jo-hp)
   ------------------------------------------------------------
   Solo per la modalita' HTML: chi compone col drag & drop ha
   gia' l'anteprima di Unlayer (icona occhio), con lo stesso
   switch desktop/tablet/mobile che riproduciamo qui.

   Foglio dedicato e non Tailwind per la ragione di sempre: il
   pannello non compila le utility su queste viste. Tema scuro
   agganciato a `.dark`.

   Il PALCO segue il tema del pannello, ma la CORNICE resta
   bianca: un'email si guarda su fondo bianco, e scurirla
   falserebbe l'anteprima.
   ============================================================ */

.jo-hp {
    --jo-hp-line: var(--jo-surface-200, #e4e4e7);
    --jo-hp-stage: var(--jo-surface-100, #f4f4f5);
    --jo-hp-text: var(--jo-surface-700, #3f3f46);
    --jo-hp-muted: var(--jo-surface-500, #71717a);
    --jo-hp-btn-bg: #ffffff;
    --jo-hp-on-bg: var(--jo-primary-base, #7400ff);
    --jo-hp-on-text: #ffffff;
}

.dark .jo-hp {
    --jo-hp-line: rgba(255, 255, 255, .1);
    --jo-hp-stage: rgba(0, 0, 0, .35);
    --jo-hp-text: var(--jo-surface-200, #e4e4e7);
    --jo-hp-muted: var(--jo-surface-400, #a1a1aa);
    --jo-hp-btn-bg: rgba(255, 255, 255, .06);
    --jo-hp-on-bg: #8b5cf6;
}

.jo-hp-bar {
    display: flex;
    justify-content: center;
    gap: .25rem;
    padding: 0 0 .75rem;
}

.jo-hp-btn {
    padding: .3rem .75rem;
    border: 1px solid var(--jo-hp-line);
    border-radius: 9999px;
    background: var(--jo-hp-btn-bg);
    font-size: .75rem;
    font-weight: 500;
    color: var(--jo-hp-text);
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

.jo-hp-btn:hover {
    border-color: var(--jo-hp-on-bg);
}

.jo-hp-btn.is-on {
    border-color: var(--jo-hp-on-bg);
    background: var(--jo-hp-on-bg);
    color: var(--jo-hp-on-text);
}

.jo-hp-stage {
    display: flex;
    justify-content: center;
    padding: 1rem;
    border: 1px solid var(--jo-hp-line);
    border-radius: .75rem;
    background: var(--jo-hp-stage);
    /* La cornice puo' essere piu' larga del modale in vista
       desktop: si scorre dentro il palco, non si sfonda. */
    overflow: auto;
}

.jo-hp-frame {
    flex: none;
    height: 60vh;
    min-height: 20rem;
    max-width: 100%;
    border: 1px solid var(--jo-hp-line);
    border-radius: .5rem;
    /* Bianco fisso: e' la tela dell'email, non un elemento di
       pannello, e su fondo scuro non si giudicherebbe niente. */
    background: #ffffff;
    transition: width .18s ease;
}

.jo-hp-empty {
    margin: 0;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--jo-hp-line);
    border-radius: .75rem;
    text-align: center;
    font-size: .8125rem;
    color: var(--jo-hp-muted);
}