/**
 * Hover Ripple CSS
 *
 * Styles for hover glow/ripple effects.
 */

[data-ripple-hover] {
    position: relative;
}

[data-ripple-hover]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 150ms ease-out;
    pointer-events: none;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%);
}

[data-ripple-hover]:hover::before {
    opacity: 1;
}