/* Surtitre — modèle canonique ; son emploi : canon_kicker.md. */

@layer components {
    .kicker {
        display: flex;
        align-items: center;
        margin-block-end: var(--kicker-space, var(--canon-space-2));
    }
    .kicker::before {
        flex: none;
        width: var(--kicker-line-width, 0px);
        height: var(--canon-line-width);
        margin-inline-end: min(calc(var(--kicker-line-width, 0px) * 100), var(--canon-space-3));
    }

    .kicker::before {
        background-color: var(--kicker-line, var(--canon-theme-action));
    }

    .kicker {
        font-family: var(--kicker-font, inherit);
        font-size: var(--kicker-size, var(--canon-size-note));
        font-weight: var(--kicker-weight, var(--canon-weight-label));
        line-height: var(--kicker-leading, var(--canon-leading-title));
        letter-spacing: var(--kicker-tracking, 0.06em);
        text-transform: var(--kicker-case, uppercase);
        color: var(--kicker-ink, var(--canon-theme-muted));
    }
    .kicker::before {
        content: "";
    }
    .kicker-index {
        color: var(--kicker-index-ink, var(--canon-theme-action));
    }
}

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

@layer tokens {
    .kicker {
        --kicker-space: 0px;
        --kicker-weight: var(--canon-weight-title);
    }
    .panel .kicker {
        --kicker-weight: var(--canon-weight-label);
    }
}