/* For smaller, one-off styling needs that don't fit elsewhere */

.overflow-hidden {
    overflow: hidden;
}

.border-radius-0p5 {
    border-radius: var(--zero-point-five-spacer);
}

.z-999 {
    z-index: 999;
}

@media screen and (min-width: 782px) {
    .z-md-0 {
        z-index: 0 !important;
    }
}

/* Hide empty p tags left in editor — only in 'main', directly, though */
main > p:empty {
    display: none;
}

/* Buttons */
.user-showcase {
    .cta {
        position: relative;
        overflow: hidden;
        &&::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(15deg, transparent, var(--wp--preset--color--white), transparent);
            left: 150%;
            transition: all 1s ease;
            filter: blur(25px);
        }
        &&:hover {
            &&::before {
                left: -150%;
            }
        }
        &&.visible::before {
            animation: buttonWipe 1s ease-in-out 1;
        }
    }
}
.post-to-payment {
    .cta {
        position: relative;
        overflow: hidden;
        &&::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(15deg, transparent, #73E083, transparent);
            left: 150%;
            transition: all 1s ease;
            filter: blur(25px);
        }
        &&:hover {
            &&::before {
                left: -150%;
            }
        }
        &&.visible::before {
            animation: buttonWipe 1s ease-in-out 1;
        }
    }
}

.built-for-block {
    .cta {
        position: relative;
        overflow: hidden;
        &&::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(15deg, transparent, var(--wp--preset--color--purple), transparent);
            left: 150%;
            transition: all 1s ease;
            filter: blur(25px);
        }
        &&:hover {
            &&::before {
                left: -150%;
            }
        }
        &&.visible::before {
            animation: buttonWipe 1s ease-in-out 1;
        }
    }
}

.text-hero {
    .cta {
        position: relative;
        overflow: hidden;
        &&::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(15deg, transparent, var(--wp--preset--color--white), transparent);
            left: 150%;
            transition: all 1s ease;
            filter: blur(25px);
        }
        &&:hover {
            &&::before {
                left: -150%;
            }
        }
        &&.visible::before {
            animation: buttonWipe 1s ease-in-out 1;
        }
    }
}

@keyframes buttonWipe {
  from { left: -150%; }
  to { left: 150%; }
}