.components-coblocks-animation-toggle.has-animation {
    position: relative
}

.components-coblocks-animation-toggle.has-animation :after {
    border-color: #0000 #1e1e1e #1e1e1e #0000;
    border-style: solid;
    border-width: 4px;
    content: "";
    display: block;
    height: 8px;
    position: absolute;
    right: 0;
    top: 1px;
    transform: rotate(-90deg);
    width: 8px
}

.components-coblocks-animation-toggle .components-button:not(:hover) .coblocks-icon-animation .medium-circle {
    fill: #727272
}

.components-coblocks-animation-toggle .components-button:not(:hover) .coblocks-icon-animation .small-circle {
    fill: #c6c6c6
}

.components-coblocks-animation-toggle .components-button:hover .coblocks-icon-animation .large-circle,
.components-coblocks-animation-toggle .components-button[aria-expanded=true] .coblocks-icon-animation .large-circle {
    animation: bounce .3s ease-in;
    animation-fill-mode: forwards
}

.components-coblocks-animation-toggle .components-button:hover .coblocks-icon-animation .medium-circle,
.components-coblocks-animation-toggle .components-button[aria-expanded=true] .coblocks-icon-animation .medium-circle {
    animation: bounce .3s ease-in;
    animation-delay: .1s;
    animation-fill-mode: forwards;
    fill: rgba(var(--wp-admin-theme-color-rgb), .66);
    position: relative
}

.components-coblocks-animation-toggle .components-button:hover .coblocks-icon-animation .small-circle,
.components-coblocks-animation-toggle .components-button[aria-expanded=true] .coblocks-icon-animation .small-circle {
    animation: bounce .3s ease-in;
    animation-delay: .2s;
    animation-fill-mode: forwards;
    fill: rgba(var(--wp-admin-theme-color-rgb), .33)
}

.components-coblocks-animation-dropdown .components-popover__content {
    border-color: #1e1e1e;
    box-shadow: none
}

.components-coblocks-animation-dropdown .components-menu-group+.components-menu-group {
    border-top-color: #1e1e1e
}

.components-coblocks-animation-dropdown .components-menu-item__button.components-button.has-icon {
    padding-right: 6px
}

@keyframes bounce {
    0% {
        transform: translate(0)
    }
    50% {
        transform: translateY(-2px)
    }
    to {
        transform: translate(0)
    }
}

.coblocks__preview .wp-block {
    margin: 0;
    max-width: none !important
}

.coblocks__preview .components-resizable-box__container {
    width: 100% !important
}

.coblocks__preview .components-tip {
    margin-top: 12px
}

.coblocks__preview .block-editor-block-preview__content .block-editor-block-list__block {
    margin-bottom: 0;
    margin-top: 0
}

body:not(.amp) .coblocks-animate {
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    opacity: 0
}

body:not(.amp) .coblocks-animate.animate-loop {
    animation-iteration-count: infinite
}

body:not(.amp) .coblocks-animate.fadeIn {
    animation-duration: .75s;
    animation-name: fadeIn
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

body:not(.amp) .coblocks-animate.zoomIn {
    animation-duration: .75s;
    animation-name: zoomIn
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

body:not(.amp) .coblocks-animate.slideInLeft {
    animation-duration: .75s;
    animation-name: slideInLeft
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-5em)
    }
    to {
        opacity: 1;
        transform: translateX(0)
    }
}

body:not(.amp) .coblocks-animate.slideInRight {
    animation-duration: .75s;
    animation-name: slideInRight
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(5em)
    }
    to {
        opacity: 1;
        transform: translateX(0)
    }
}

body:not(.amp) .coblocks-animate.slideInBottom {
    animation-duration: .75s;
    animation-name: slideInBottom
}

@keyframes slideInBottom {
    0% {
        opacity: 0;
        transform: translateY(5em)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

body:not(.amp) .coblocks-animate.clipHorizontal {
    animation-duration: .75s;
    animation-name: clipHorizontal
}

@keyframes clipHorizontal {
    0% {
        clip-path: polygon(0 50%, 0 100%, 0 100%, 0 50%, 100% 50%, 100% 0, 100% 0, 100% 50%);
        opacity: 0
    }
    to {
        clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 100% 50%, 100% 0, 0 0, 0 50%);
        opacity: 1
    }
}

body:not(.amp) .coblocks-animate.clipVertical {
    animation-duration: .75s;
    animation-name: clipVertical
}

@keyframes clipVertical {
    0% {
        clip-path: polygon(50% 0, 100% 0, 100% 0, 50% 0, 50% 100%, 0 100%, 0 100%, 50% 100%);
        opacity: 0
    }
    to {
        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 0, 50% 0);
        opacity: 1
    }
}