﻿.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;
    }
}