@use "~admin-stylesheets/colors";

.nab-css-and-text-preview {
	max-width: 45em;
	width: 80vw;

	.nab-css-value-preview {
		height: auto;

		.cm-editor {
			outline: none !important;
		}
	}

	.components-tab-panel__tabs {
		background: colors.$nab-background-white;
		border-top: 0;
		display: flex;
		padding-left: 0;
		top: 0;
		margin-top: 0;
		border-bottom: 1px solid colors.$nab-border-light;
		justify-content: center;
		margin-bottom: 1em;

		.components-button {
			border-radius: 0;
			height: 50px;
		}

		.components-button:focus:not(:disabled) {
			background-color: colors.$nab-background-white;
			box-shadow: inset 0 -3px colors.$wp-components-color-accent;
			outline: none;
		}
	}

	&__tab {
		align-items: center;
		display: flex;
		flex-grow: 1;
		line-height: 1;
		justify-content: center;
		padding: 0 16px 12px;
		height: auto !important;

		&--active {
			box-shadow: inset 0 -3px colors.$wp-components-color-accent;
			font-weight: 600;
		}
	}

	.nab-ql-editor {
		background: colors.$nab-background-white;

		.ql-toolbar {
			padding: 0 !important;
			border-bottom: none !important;
		}

		&--has-ol-list .ql-editor {
			padding-left: 1.5em;

			> p {
				list-style: decimal;
				display: list-item;
			}
		}

		&--has-ul-list .ql-editor {
			padding-left: 1.5em;

			> p {
				list-style: disc;
				display: list-item;
			}
		}
	}
}