/* Aperçu d'une option de template de type `linear` (dégradé de fond).
   Markup produit par CMS_CMS_Template_Option_Linear::noteValue(), piloté par
   form/gradient/preview.js. Chargé pour tout le back-office par
   GCS_Controller_Admin, comme les assets Coloris. */

.cs-linearPreview {
    display: flex;
    gap: 1rem;
    margin: .5rem 0;
}

.cs-linearPreview_panel {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1 1 0;
}

/* Le damier n'est pas décoratif : le dégradé se pose PAR-DESSUS le fond du
   bloc, et une couleur semi-transparente ou un départ vide doivent se lire
   comme tels. Sur un pavé opaque, un dégradé vers le transparent ressemblerait
   à un dégradé vers le blanc. */
.cs-linearPreview_swatch {
    position: relative;
    display: block;
    height: 4rem;
    overflow: hidden;
    border: 1px solid rgba(128, 128, 128, .5);
    border-radius: .3rem;
    background-image: conic-gradient(#d8d8d8 0 25%, transparent 0 50%, #d8d8d8 0 75%, transparent 0);
    background-size: 1.2rem 1.2rem;
}

.cs-linearPreview_panel[data-cs-linear-mode="dark"] .cs-linearPreview_swatch {
    background-image: conic-gradient(#3a3a3a 0 25%, #222 0 50%, #3a3a3a 0 75%, #222 0);
}

/* Le dégradé se peint dans SA propre couche, au-dessus du damier. Peint sur le
   damier lui-même, il héritait du `background-size` qui carrelle celui-ci et
   sortait en bandes répétées (constaté au banc d'essai du 2026-09-25). */
.cs-linearPreview_paint {
    position: absolute;
    inset: 0;
}

.cs-linearPreview_label {
    font-size: .85em;
    opacity: .7;
}