.frbl-custom-svg-animation {
display: inline-block;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
} .frbl-custom-svg-animation.frbl-shape-trigger-hover {
animation-play-state: paused;
}
.frbl-custom-svg-animation.frbl-shape-trigger-hover:hover {
animation-play-state: running;
} @media (prefers-reduced-motion: reduce) {
.frbl-custom-svg-animation,
.frbl-custom-svg-animation:hover {
animation: none !important;
transition: none !important;
}
} .block-editor-block-list__block .frbl-custom-svg-animation.frbl-shape-trigger-load {
animation-play-state: running;
} .block-editor-block-list__block.is-selected .frbl-custom-svg-animation.frbl-shape-trigger-hover {
opacity: 0.9;
} .frbl-custom-svg-animation svg {
width: 100%;
height: 100%;
display: block;
}  .frbl-lottie-animation {
display: block;
position: relative;
opacity: 0;
transition: opacity 0.1s ease-in;
} .frbl-lottie-animation.frbl-color-applied {
opacity: 1;
} .frbl-lottie-preview {
display: block;
position: relative;
width: 100%;
height: 100%;
min-width: 48px;
min-height: 48px;
opacity: 1 !important;
} .frbl-has-lottie-animation {
display: inline-block;
} .frbl-has-lottie-animation .gb-shape > svg {
display: none !important;
} .block-editor-block-list__block .gb-shape:has(.frbl-lottie-preview) > svg {
display: none !important;
} .frbl-lottie-animation svg,
.frbl-lottie-preview svg {
width: 100% !important;
height: 100% !important;
max-width: 100%;
max-height: 100%;
} .frbl-lottie-animation path[fill]:not([fill="none"]),
.frbl-lottie-animation ellipse[fill]:not([fill="none"]),
.frbl-lottie-animation circle[fill]:not([fill="none"]),
.frbl-lottie-animation rect[fill]:not([fill="none"]),
.frbl-lottie-animation polygon[fill]:not([fill="none"]),
.frbl-lottie-animation polyline[fill]:not([fill="none"]),
.frbl-lottie-preview path[fill]:not([fill="none"]),
.frbl-lottie-preview ellipse[fill]:not([fill="none"]),
.frbl-lottie-preview circle[fill]:not([fill="none"]),
.frbl-lottie-preview rect[fill]:not([fill="none"]),
.frbl-lottie-preview polygon[fill]:not([fill="none"]),
.frbl-lottie-preview polyline[fill]:not([fill="none"]) {
fill: var(--lottie-color, currentColor) !important;
} .block-editor-block-list__block .frbl-lottie-animation {
pointer-events: auto;
} @media (prefers-reduced-motion: reduce) {
.frbl-lottie-animation {
display: none;
} .frbl-has-lottie-animation::before {
content: "Animation disabled (motion preferences)";
font-size: 12px;
color: #666;
display: block;
}
}