/* Poignée — modèle canonique ; son emploi : canon_handle.md. */

@layer components {
    .handle {
        display: inline-grid;
        place-items: center;
        width: var(--handle-width, 36px);
        height: var(--handle-height, 36px);
        padding: 0;
    }
    .handle::before {
        width: calc(2 * var(--handle-space, 6px));
        height: calc(3 * var(--handle-space, 6px));
    }

    .handle {
        border: 0;
        border-radius: var(--handle-radius, var(--canon-radius-control));
        background-color: var(--handle-surface, transparent);
    }
    .handle::before {
        background-image: radial-gradient(circle at 50% 50%, currentColor 1px, transparent 1.5px);
        background-size: var(--handle-space, 6px) var(--handle-space, 6px);
    }
    .handle:hover,
    .handle[data-handle-dragging] {
        background-color: var(--handle-surface-hover, var(--canon-theme-tint));
    }

    .handle {
        color: var(--handle-ink, var(--canon-theme-faint));
    }
    .handle::before {
        content: "";
    }
    .handle:hover,
    .handle[data-handle-dragging] {
        color: var(--handle-ink-hover, var(--canon-theme-ink));
    }

    .handle {
        cursor: grab;
        touch-action: none;
        user-select: none;
        transition: background-color var(--canon-duration-state), color var(--canon-duration-state);
    }
    .handle[data-handle-dragging] {
        cursor: grabbing;
    }
}

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

@layer components {
    /* Le panneau de mise en forme : des boutons carrés sur une teinte, qui floutent le texte qu'ils
       recouvrent et foncent au survol ; une poignée en bandeau sur toute sa largeur (exvae #42). */
    .format .handle {
        --handle-width: 76px;
        --handle-height: 18px;
        --handle-space: 4px;
        --handle-surface: var(--canon-theme-tint);
        --handle-surface-hover: var(--canon-theme-tint);
    }
}