/* styles.scss */
.react-grid-item>.react-resizable-handle {
    width: 20px;
    height: 20px;
    bottom: 5px;
    right: 5px;
    cursor: se-resize;
}

.react-grid-item>.react-resizable-handle::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 12px;
    height: 12px;
    border-right: 3px solid #ff0000;
    border-bottom: 3px solid #ff0000;
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(1deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.wiggle {
    animation: wiggle 0.3s ease-in-out infinite;
    /* Optional: Pause on hover if desired, but user requested "all widgets will wiggle" */
    /* &:hover { animation-play-state: paused; } */
}