/* Point d'état — modèle canonique ; son emploi : canon_status-dot.md. */

@layer components {
    .status-dot {
        --status-dot-color: var(--status-dot-neutral, var(--canon-theme-neutral));
    }
    .status-dot[data-status-dot="success"] {
        --status-dot-color: var(--status-dot-success, var(--canon-theme-success));
    }
    .status-dot[data-status-dot="warning"] {
        --status-dot-color: var(--status-dot-warning, var(--canon-theme-warning));
    }
    .status-dot[data-status-dot="danger"] {
        --status-dot-color: var(--status-dot-danger, var(--canon-theme-danger));
    }
    .status-dot[data-status-dot="info"] {
        --status-dot-color: var(--status-dot-info, var(--canon-theme-info));
    }
    .status-dot[data-status-dot="action"] {
        --status-dot-color: var(--status-dot-action, var(--canon-theme-action));
    }

    .status-dot {
        display: inline-block;
        flex: none;
        width: var(--status-dot-size, 8px);
        height: var(--status-dot-size, 8px);
    }

    .status-dot {
        border-radius: 50%;
        background-color: currentColor;
        box-shadow: 0 0 var(--status-dot-halo, 0px) currentColor;
    }

    .status-dot {
        color: var(--status-dot-color);
    }

    .status-dot {
        transition: color var(--canon-duration-state);
    }
}

@layer components {
    .status-dot--style-pulse {
        animation: status-dot-pulse 2.4s ease-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
        .status-dot--style-pulse {
            animation: none;
        }
    }
    @keyframes status-dot-pulse {
        0% {
            box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 45%, transparent);
        }
        70% {
            box-shadow: 0 0 0 var(--status-dot-pulse-size, 6px) transparent;
        }
        100% {
            box-shadow: 0 0 0 0 transparent;
        }
    }
}

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

@layer components {
    /* La lampe de session de l'en-tête : plus grande dans le tiroir que dans le menu, une lueur de sa
       couleur autour d'elle. */
    .header-drawer-session-light {
        --status-dot-size: 12px;
        --status-dot-halo: 8px;
    }
    .header-dropdown-session-light {
        --status-dot-size: 10px;
        --status-dot-halo: 6px;
    }
}