/* Palette — choix de la couleur du thème modulo, construit par gbl_palette.js dans le contenu de la
   popup, à son ouverture depuis l'en-tête : l'échantillon du canon (canon_swatch) et sa valeur, puis
   le plan de saturation et de clarté et la bande de teinte, deux graphiques dessinés au canevas. */

@layer components {
    .palette {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .palette-preview {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: center;
    }
    .palette-area {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .palette-tone {
        display: block;
        width: 100%;
    }
    .palette-hue {
        position: relative;
        width: 100%;
        height: 16px;
        overflow: hidden;
    }
    .palette-strip {
        display: block;
        width: 100%;
        height: 100%;
    }

    .palette-area {
        border-radius: var(--canon-radius-control);
        border: 1px solid var(--canon-theme-line);
    }
    .palette-hue {
        border-radius: var(--local-radius-palette-hue);
        border: 1px solid var(--canon-theme-line);
    }

    .palette-hex {
        font-family: var(--local-font-palette-hex);
        font-size: var(--canon-size-control);
        color: var(--canon-theme-ink);
    }

    .palette-tone,
    .palette-hue {
        cursor: crosshair;
    }
}