@use "../../components/editor";

.wp-block-glyphwell-equation {

	$gray-color: #8c8f94;
	$spacing: 16px;

	.glyphwell-block__preview-wrapper {

		display: flex;
		flex-direction: column;
		gap: $spacing;
		border: 1px dashed $gray-color;
		border-radius: 6px;
		padding: $spacing;

		.glyphwell-block__preview {

			display: flex;
			align-items: center;
			flex-direction: column;
			text-align: initial;
			width: 100%;

			.glyphwell-block__preview-math {

				display: block;
				max-width: 100%;
				overflow: visible;

			}

			.glyphwell-block__empty-message {
				color: $gray-color;
				margin: 0;
			}

			&.has-text-align-left {
				align-items: flex-start;
			}

			&.has-text-align-center {
				align-items: center;
			}

			&.has-text-align-right {
				align-items: flex-end;
			}

		}

		.glyphwell-block__preview-actions {
			text-align: center;
		}

	}

	&.glyphwell-block {
		margin-block: 1em;
	}

}








