"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.rippleHostStyles = void 0;
const theme_1 = require("../theme");
const rippleKeyframes = (0, theme_1.keyframes)({
    "0%": { transform: "scale(0)", opacity: 0.35 },
    "100%": { transform: "scale(1)", opacity: 0 },
});
const rippleHostStyles = {
    "position": "relative",
    "overflow": "hidden",
    "WebkitTapHighlightColor": "transparent",
    "transition": "box-shadow 150ms ease-out",
    "&:where(a, button):hover:not(:disabled):not([aria-disabled='true'])": {
        boxShadow: "inset 0 0 0 9999px color-mix(in srgb, currentColor calc(6% * var(--miui-ripple, 1)), transparent)",
    },
    "&:where(a, button):active:not(:disabled):not([aria-disabled='true'])": {
        boxShadow: "inset 0 0 0 9999px color-mix(in srgb, currentColor calc(12% * var(--miui-ripple, 1)), transparent)",
    },
    "@media (prefers-reduced-motion: reduce)": {
        transition: "none",
    },
    "& > span[data-miui-ripple]": {
        position: "absolute",
        pointerEvents: "none",
        borderRadius: "50%",
        backgroundColor: "currentColor",
        transform: "scale(0)",
        opacity: 0,
        animationName: String(rippleKeyframes),
        animationTimingFunction: "ease-out",
        animationFillMode: "forwards",
    },
};
exports.rippleHostStyles = rippleHostStyles;
//# sourceMappingURL=useRipple.styled.js.map