/* Échantillon de couleur — modèle canonique ; son emploi : canon_swatch.md. */

@layer components {
    .swatch {
        display: inline-block;
        flex: none;
        inline-size: var(--swatch-side, var(--canon-space-6));
        block-size: var(--swatch-side, var(--canon-space-6));
    }

    .swatch {
        border: var(--swatch-line-width, var(--canon-line-width)) solid var(--swatch-line, var(--canon-theme-line));
        border-radius: var(--swatch-radius, var(--canon-radius-control));
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer components {
    .palette .swatch {
        --swatch-side: 36px;
    }
}