/* Séparateur — modèle canonique ; son emploi : canon_divider.md. */

@layer components {
    .divider {
        display: block;
        width: 100%;
        height: var(--canon-line-width);
        margin-block: var(--canon-space-3);
    }

    .divider {
        border: 0;
        background-color: var(--canon-theme-line);
    }
}

@layer components {
    .divider--style-gradient {
        background-color: transparent;
        background-image: linear-gradient(90deg, transparent, var(--divider-color, var(--canon-theme-muted)), transparent);
    }
}

@layer components {
    .divider--orientation-vertical {
        align-self: center;
        flex: none;
        width: var(--divider-width, var(--canon-line-width));
        height: var(--divider-size, 1em);
        margin-block: 0;
        margin-inline: var(--divider-space, var(--canon-space-1));
    }

    .divider--orientation-vertical {
        background-color: var(--divider-color, var(--canon-theme-line));
    }
}

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

@layer components {
    .toolbar .divider--orientation-vertical {
        --divider-size: 14px;
        --divider-space: 4px;
        --divider-color: var(--local-color-decor-toolbar-divider-surface);
    }
}