/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-orphic-ui-animation-wrapper > .block-editor-inner-blocks {
	padding: 0px;
}

.wp-block-orphic-ui-animation-wrapper {
	position: relative;
	border: 1px dashed #172b4d;
	padding: 0;
	margin-bottom: 20px;

	.animation-content {
		position: relative;
	}

	.animation-info {
		position: absolute;
		top: -20px;
		left: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		padding: 2px 8px;
		color: white;
		background-color: #6b4fbb;
		border-radius: 2px 0 2px 0;
		font-size: 11px;
		line-height: 1.4;
		white-space: nowrap;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

		svg {
			width: 12px;
			height: 12px;
			fill: currentColor;
			margin-right: 6px;
		}

		.animation-message {
			display: flex;
			align-items: center;
			
			span {
				margin-left: 5px;
				opacity: 0.9;
				font-size: 11px;
			}
		}
	}
}
