/* Barre d'état d'un outil — composant sgbl/statusbar : en pied d'écran, les informations que l'outil
   tient à jour, séparées par un trait vertical, puis le nom de l'outil. Elle porte des informations,
   non des commandes : elle n'est pas une barre d'outil (canon_toolbar.md). Son comportement :
   sgbl_statusbar.js (exvae #42-sources-ui/exhaustivite). */

@layer components {
    .statusbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--canon-plane-header);
        height: var(--local-height-statusbar);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
    }
    .statusbar-start {
        display: flex;
        align-items: center;
        gap: 0;
    }
    .statusbar-divider {
        margin: 0 8px;
    }
    .statusbar-end {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .statusbar {
        background-color: var(--canon-theme-surface);
        border-top: 1px solid var(--canon-theme-line);
    }
    .statusbar-divider {
        opacity: 0.5;
    }

    .statusbar {
        font-size: var(--canon-size-fine);
        color: var(--canon-theme-faint);
    }
    .statusbar-item {
        white-space: nowrap;
    }
    .statusbar-link {
        color: var(--canon-theme-faint);
        text-decoration: underline;
        text-underline-offset: 2px;
        white-space: nowrap;
    }
    .statusbar-tool {
        font-weight: var(--canon-weight-label);
        color: var(--canon-theme-muted);
        white-space: nowrap;
    }

    .statusbar {
        user-select: none;
    }
}