@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/colors" as *;

.editor-template-actions-panel__preview {
	.block-editor-block-preview__container {
		display: flex;
		aspect-ratio: 4/3;
		overflow: hidden;
		border-radius: $radius-medium;

		&::after {
			outline: $border-width solid rgba($black, 0.1);
			outline-offset: -$border-width;
			border-radius: $radius-medium;
			@media not (prefers-reduced-motion) {
				transition: outline 0.1s linear;
			}
		}
	}

	&[role="button"] {
		cursor: var(--wpds-cursor-control);

		&:hover .block-editor-block-preview__container::after {
			outline-color: rgba($black, 0.3);
		}

		&:focus-visible .block-editor-block-preview__container::after {
			outline-color: var(--wp-admin-theme-color);
			outline-width: var(--wp-admin-border-width-focus);
			outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
		}
	}
}

.editor-template-actions-panel__action {
	flex: 1;
	justify-content: center;
}