/* Confirmation d'un enregistrement — composant sgbl/confirmation : la bande qui paraît sur l'accueil
   après la sauvegarde d'une création, à la place de la barre d'outil : au rôle de succès d'abord,
   puis sur le fond de la page, avant de s'effacer. Le module sgbl_confirmation.js la remplit et mène
   ses phases (viraedies #7-sources-ui/exhaustivite). */

@layer components {
    .confirmation {
        position: fixed;
        top: var(--canon-height-header);
        right: 0;
        left: 0;
        z-index: calc(var(--canon-plane-header) - 10);
        height: var(--local-height-toolbar);
        display: flex;
        align-items: center;
        justify-content: center;
        visibility: hidden;
    }
    .confirmation[data-confirmation-phase] {
        visibility: visible;
    }
    @media (max-width: 600px) {
        .confirmation {
            padding: 10px 15px;
        }
    }

    .confirmation {
        opacity: 0;
        background-color: var(--canon-theme-success);
    }
    .confirmation[data-confirmation-phase] {
        opacity: 1;
    }
    .confirmation:is([data-confirmation-phase="rest"], [data-confirmation-phase="leave"]) {
        background-color: var(--canon-theme-raised);
    }
    .confirmation[data-confirmation-phase="leave"] {
        opacity: 0;
    }
    .confirmation[data-confirmation-phase="leave"] .confirmation-text {
        filter: blur(4px);
    }

    .confirmation-text {
        text-align: center;
        font-size: var(--canon-size-body);
        font-weight: var(--canon-weight-body);
        color: var(--canon-theme-on-action);
    }
    .confirmation-name {
        font-weight: var(--canon-weight-emphasis);
    }
    .confirmation:is([data-confirmation-phase="rest"], [data-confirmation-phase="leave"]) .confirmation-text {
        color: var(--canon-theme-ink);
    }

    .confirmation {
        pointer-events: none;
        transition: background-color 1.4s ease, opacity 0.3s ease, visibility 0.3s ease;
    }
    .confirmation-text {
        transition: color 1.6s ease, filter 0.3s ease;
    }
}