/* Icons for custom layoutbuilder animations. */
.input-icon.rotate-left {
    background-image: url(../images/rotate-left.svg) !important;
}

.input-icon.move-left-sensor,
.input-icon.move-left {
    background-image: url(../images/move-left.svg) !important;
}

/* Custom layoutbuilder animations. Class .aos-animate is added when scrolled into view and the animation should start. */
[data-aos^=rotate][data-aos^=rotate].aos-animate {
    transform: rotate(0);
}

[data-aos^=rotate][data-aos^=rotate] {
    transform: rotate(30deg);
    transition-property: transform;
}

[data-aos^=move][data-aos^=move].aos-animate {
    transform: translateX(0);
}

[data-aos^=move][data-aos^=move] {
    transform: translateX(100%);
    transition-property: transform;
}

[data-aos="move-left-sensor"] {
    position: relative;
}

[data-aos="move-left-sensor"]::before {
    transition-property: transform, background-size, opacity;
    transition-duration: inherit;
    transition-timing-function: inherit;
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    top: 50%;
    left: 50%;
    z-index: -1;
    background: url('../images/circle-sensor.webp');
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%) rotate(30deg);
    opacity: 0;
}

[data-aos="move-left-sensor"].aos-animate::before {
    transform: translate(-50%, -50%) rotate(0);
    background-size: 100%;
    opacity: 1;
}