.components-coblocks-animation-toggle {

	// Toolbar indicator
	&.has-animation {
		position: relative;

		::after {
			border-bottom: solid 4px $gray-900;
			border-left: solid 4px transparent;
			border-right: solid 4px $gray-900;
			border-top: solid 4px transparent;
			content: "";
			display: block;
			height: 8px;
			position: absolute;
			right: 0;
			top: 1px;
			transform: rotate(-90deg);
			width: 8px;
		}
	}

	.components-button:not(:hover) .coblocks-icon-animation {

		.medium-circle {
			fill: lighten($gray-900, 33%);
		}

		.small-circle {
			fill: lighten($gray-900, 66%);
		}
	}

	.components-button:hover .coblocks-icon-animation,
	.components-button[aria-expanded="true"] .coblocks-icon-animation {

		.large-circle {
			animation: bounce 0.3s ease-in;
			animation-fill-mode: forwards;
		}

		.medium-circle {
			animation: bounce 0.3s ease-in;
			animation-delay: 0.1s;
			animation-fill-mode: forwards;

			fill: rgba(var(--wp-admin-theme-color-rgb), 0.66);
			position: relative;
		}

		.small-circle {
			animation: bounce 0.3s ease-in;
			animation-delay: 0.2s;
			animation-fill-mode: forwards;
			fill: rgba(var(--wp-admin-theme-color-rgb), 0.33);
		}
	}
}

.components-coblocks-animation-dropdown {

	.components-popover__content {
		border-color: $gray-900;
		box-shadow: none;
	}

	.components-menu-group + .components-menu-group {
		border-top-color: $gray-900;
	}

	.components-menu-item__button.components-button.has-icon {
		padding-right: 6px;
	}

	@keyframes bounce {

		0% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(0, -2px);
		}

		100% {
			transform: translate(0, 0);
		}

	}
}

.coblocks__preview {

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

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

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


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