/**
 * #.# Editor Styles
 *
 * CSS for just Backend enqueued after style.scss
 * which makes it higher in priority.
 */

.wp-block-uagb-cf7-styler {
	&.uagb-editor-preview-mode-tablet,
	&.uagb-editor-preview-mode-mobile {
		margin: 20px;
	}

	.wpcf7 form {
		position: relative;
	}

	.wpcf7 form > div,
	.wpcf7 form > p {
		margin-bottom: 1.2em;
	}

	.wpcf7 .wpcf7-form-control-wrap {
		display: block;
		width: 100%;
	}

	.wpcf7 input:not( [type="submit"] ):focus,
	.wpcf7 select:focus,
	.wpcf7 textarea:focus {
		box-shadow: none;
		background: #fff;
		border-color: #eaeaea;
		outline: 0;
		-webkit-box-shadow: none;
	}

	.wpcf7 input:not( [type="submit"] ),
	.wpcf7 select,
	.wpcf7 textarea {
		width: 100%;
		padding: 0.75em;
	}

	.wpcf7 input[type="file"] {
		height: auto;
		box-shadow: none;
		box-sizing: border-box;
		background: #fafafa;
		border-color: #eaeaea;
		border-style: solid;
		border-width: 1px;
		border-radius: 2px;
		color: #666;
		transition: all 0.2s linear;
		-webkit-border-radius: 2px;
		-webkit-box-shadow: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-transition: all 0.2s linear;
	}

	.wpcf7 input[type="checkbox"],
	.wpcf7 input[type="radio"] {
		display: none;
		vertical-align: middle;
		width: 1.4em;
		height: 1.2em;
		min-width: 1.4em;
		padding: 0;
		margin: -3px 4px 0 0;
		background: #e9eef2;
		border-radius: 0.2em;
		outline: 0;
		cursor: pointer;
		color: #555;
		text-align: center;
		line-height: 0;
		transition: all 0.2s linear;
		clear: none;
		-webkit-border-radius: 0.2em;
		-webkit-transition: all 0.2s linear;
	}

	.wpcf7 .wpcf7-validation-errors {
		border-color: #f00;
	}

	div.wpcf7 {
		padding: 0;
		margin: 0;
	}

	div.wpcf7 .screen-reader-response {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: 0;
		border: 0;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}

	div.wpcf7-response-output {
		padding: 0.2em 1em;
		margin: 2em 0.5em 1em;
	}

	div.wpcf7-mail-sent-ok {
		border: 2px solid #398f14;
	}

	div.wpcf7-mail-sent-ng,
	div.wpcf7-aborted {
		border: 2px solid #f00;
	}

	div.wpcf7-spam-blocked {
		border: 2px solid #ffa500;
	}

	div.wpcf7-validation-errors,
	div.wpcf7-acceptance-missing {
		border: 2px solid #f7e700;
	}

	.wpcf7-form-control-wrap {
		position: relative;
	}

	span.wpcf7-not-valid-tip {
		display: block;
		color: #f00;
		font-size: 0.9em;
		font-weight: 400;
	}

	.use-floating-validation-tip span.wpcf7-not-valid-tip {
		position: absolute;
		top: 20%;
		left: 20%;
		z-index: 100;
		padding: 0.1em 0.5em;
		background: #fff;
		border: 1px solid #f00;
	}

	span.wpcf7-list-item {
		display: inline-block;
		margin: 0 1em 0 0;
	}

	span.wpcf7-list-item-label::before,
	span.wpcf7-list-item-label::after {
		content: " ";
	}

	.wpcf7-display-none {
		display: none;
	}

	div.wpcf7 .ajax-loader {
		display: inline-block;
		vertical-align: middle;
		width: 16px;
		height: 16px;
		padding: 0;
		margin: 0 0 0 4px;
		visibility: hidden;
		border: none;
	}

	div.wpcf7 .ajax-loader.is-active {
		visibility: visible;
	}

	div.wpcf7 div.ajax-error {
		display: none;
	}

	div.wpcf7 .placeheld {
		color: #888;
	}

	div.wpcf7 input[type="file"] {
		cursor: pointer;
	}

	div.wpcf7 input[type="file"]:disabled {
		cursor: default;
	}

	div.wpcf7 .wpcf7-submit:disabled {
		cursor: not-allowed;
	}

	.wpcf7-acceptance input[type="checkbox"]:checked + span::before,
	.wpcf7-checkbox input[type="checkbox"]:checked + span::before {
		line-height: 1.2;
		content: "\2714";
	}
}

.wp-core-ui .uagb-cf7-styler__outer-wrap {
	.wpcf7-form-control.wpcf7-select {
		max-width: 100%;
		background-image: none;
	}
}

.editor-styles-wrapper .wp-block-uagb-cf7-styler .button,
.editor-styles-wrapper .wp-block-uagb-cf7-styler button,
.editor-styles-wrapper .wp-block-uagb-cf7-styler input,
.editor-styles-wrapper .wp-block-uagb-cf7-styler select,
.editor-styles-wrapper .wp-block-uagb-cf7-styler textarea {
	color: inherit;
	font-size: 100%;
}

[data-type="uagb/cf7-styler"].block-editor-block-list__block.wp-block {
	border: 1px solid #0085ba;

	.components-placeholder {
		align-items: center;
	}

	.components-placeholder__fieldset {
		justify-content: center;
	}

	.dashicon.dashicons-admin-post {
		margin-right: 10px;
	}
}
