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

@use "./components/editor-preview/style" as editorPreview;
@use "./components/item-help/style" as itemHelp;

.chbe-admin-editor-config {

	.components-select-control {
		min-width: 200px;
	}

	.components-range-control {
		width: 100%;
		max-width: 300px;
	}

	.components-toggle-control {
		max-width: 300px;
	}

	.chbe-admin-editor-config__settings {
		flex: 1;
	}

	.chbe-admin-editor-config__basic-settings {
		padding: variables.$grid-unit-30;
		background: colors.$white;
		border-top: variables.$border-width solid colors.$gray-300;
		border-bottom: variables.$border-width solid colors.$gray-300;
	}

	.chbe-admin-editor-config__preview {
		position: sticky;
		top: variables.$grid-unit-50;
		width: 50%;

		@media screen and (max-width: 782px) {
			position: static;
			width: 100%;
		}
	}
}