.pastille-icone {
    width: 56px;
    height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.pastille-icone-lg {
    width: 64px;
    height: 64px;
}

.pastille-icone-carre {
    border-radius: var(--radius-lg);
}

.pastille-icone-cercle {
    border-radius: var(--radius-full);
}

.pastille-icone-primary {
    background-color: var(--primary-tint);
    color: var(--primary);
}

.pastille-icone-success {
    background-color: var(--success-tint);
    color: var(--success);
}

.pastille-icone-warn {
    background-color: var(--warn-tint);
    color: var(--warn);
}

.pastille-icone-danger {
    background-color: var(--danger-tint);
    color: var(--danger);
}

.pastille-icone-info {
    background-color: var(--info-tint);
    color: var(--info);
}

.pastille-icone .icone {
    width: 24px;
    height: 24px;
}

.pastille-icone-bordure-pointillee {
    position: relative;
}

.pastille-icone-bordure-pointillee::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1.5px dashed currentColor;
    border-radius: 50%;
    opacity: 0.55;
    animation: pastille-icone-rotation 12s linear infinite;
    pointer-events: none;
}

@keyframes pastille-icone-rotation {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pastille-icone-bordure-pointillee::before {
        animation: none;
    }
}