[data-type="coblocks/form"] {

	.components-base-control,
	.coblocks-option__input {
		font-family: inherit;
		font-size: inherit;
	}

	// Hide the appender in pre WP 5.3
	.block-list-appender {
		display: none;
	}

	// Better appender appearance pre 5.3
	.block-editor-default-block-appender {
		height: 1em;
	}

	.coblocks-field-label__input-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.coblocks-field-label {
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		label {
			cursor: text;
		}

		.components-base-control {

			&.coblocks-field-label__required {
				color: $gray-900;
				margin-top: -5px;

				.components-form-toggle {
					margin: 2px 8px 0 0;
				}

				.components-toggle-control__label {
					font-family: system-ui;
					font-size: 13px;
					margin-bottom: 0;
					word-break: normal;
				}
			}
		}

		.components-toggle-control .components-base-control__field {
			margin-bottom: 0;
		}
	}

	.components-base-control {
		margin-bottom: 0;

		.components-base-control__field {
			margin-bottom: 15px;

			.components-base-control__label {
				width: 100%;
			}
		}
	}

	.coblocks-field {

		input,
		textarea {
			margin-bottom: 0;
		}

		.components-text-control__input.components-text-control__input {
			width: 100%;
		}
	}

	.components-text-control__input,
	.components-textarea-control__input {
		padding: 10px 8px;
		pointer-events: none;
	}

	.coblocks-form__subtext {
		margin-top: -0.5rem;
	}

	.coblocks-form__inline-fields .coblocks-form__inline-field {
		margin: 0 0 0.15rem;
	}

	.coblocks-option {
		align-items: center;
		display: flex;
		margin: 0;
	}

	.coblocks-field-multiple__list {
		margin: 0;
		padding-left: 0;

		&.is-inline {
			display: flex;
			flex-flow: row wrap;

			.coblocks-option {
				margin-right: 12px;
			}
		}
	}

	div[data-type="coblocks/field-checkbox"].is-selected,
	div[data-type="coblocks/field-radio"].is-selected,
	div[data-type="coblocks/field-checkbox"].is-typing,
	div[data-type="coblocks/field-radio"].is-typing {

		.is-inline {
			display: block;

			.coblocks-option {
				margin-right: 0;
			}
		}
	}

	// Reset disabled styles in editor so we can see the inputs.
	input.disabled,
	input:disabled,
	select.disabled,
	select:disabled,
	textarea.disabled,
	textarea:disabled {
		background: initial;
		border-color: initial;
		box-shadow: initial;
		color: initial;
	}

	.coblocks-option__type.coblocks-option__type {
		margin-top: 0;
	}

	.coblocks-option__input.coblocks-option__input.coblocks-option__input {
		background: transparent;
		border: 1px solid transparent;
		border-radius: 4px;
		flex-grow: 1;
		margin-bottom: 2px;
		padding: 6px 8px;
		transform: box-shadow 0.1s linear;
	}

	.is-typing .coblocks-option__input.coblocks-option__input.coblocks-option__input,
	.is-selected .coblocks-option__input.coblocks-option__input.coblocks-option__input {
		background: $white;
		border-color: #8d96a0;
	}

	.coblocks-option__input.coblocks-option__input.coblocks-option__input:focus {
		background: $white;
		border-color: var(--wp-admin-theme-color, #007cba);
		box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba);
	}

	.coblocks-option__remove.coblocks-option__remove {
		margin-left: 8px;
	}

	.coblocks-field-multiple__add-option {
		font-weight: 600;
		margin-left: 21px;
		margin-top: 5px;
	}

	.coblocks-field-multiple__add-option svg {
		margin-right: 5px;
	}

	.wp-block:focus::after {
		box-shadow: none !important;
	}
}

.block-editor-block-preview__container .coblocks-form__submit.wp-block-button {
	text-align: center;
}

[data-type="coblocks/form"] .coblocks-form__submit.wp-block-button .wp-block-button__link,
.block-editor-block-preview__container .wp-block-button__link {

	&.is-style-outline {
		background-color: transparent;
		border: 2px solid !important;
	}

	&.is-style-circular {
		border-radius: 100px !important;
	}

	&.is-style-3d {
		box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.25);
	}

	&.is-style-shadow {
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.11), 0 1px 3px rgba(0, 0, 0, 0.075);
	}
}

[data-type="coblocks/field-select"] .coblocks-field-multiple__add-option {
	margin-left: 0;
}

.coblocks-form__submit {
	margin-top: 1em;
}

@import "notice";

.edit-post-settings-sidebar__panel-block {

	.components-block-coblocks-form-recaptcha-key__custom-input {
		margin-bottom: 15px !important;
	}
}

.components-block-coblocks-form-recaptcha-key-remove__button {
	margin-left: 6px;
}

// Shim to fix styles in the previewer.
.block-editor-inserter__preview-content .wp-block-coblocks-form {

	.block-editor-block-list__layout {
		margin-left: 0;
		margin-right: 0;
	}
}
