/* Path: src/components/Navbar/UserIcon.module.scss */

.user-icon {
    display: inline-flex;
    // 1. Fix alignment (Flexbox uses justify-content)
    justify-content: center;
    align-items: center;

    // 2. Create a positioning context for the absolute child
    position: relative;

    margin-left: 1rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;

    // Optional: Reset link styles
    text-decoration: none;
    color: inherit;
    cursor: pointer;

    &:focus {
        outline: none;
    }

    // 3. Trigger the animation when the USER hovers the main button
    &:hover .spin-container {
        animation-play-state: running;
    }
}

.spin-container {
    position: absolute;
    // 4. Force the container to fill the parent exactly
    inset: 0;
    width: 100%;
    height: 100%;

    // Animation 1: Rotate CCW fast
    animation: spin 1.5s ease-in-out infinite reverse;
    animation-play-state: paused;

    // Allow clicks to pass through to the link/button underneath
    pointer-events: none;
}

.spin-animation {
    width: 100%;
    height: 100%;

    animation: spin 15s linear infinite normal;

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

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}