/**
 * Plugin front end styles
 * @package Caxton
 */

$caxton-width: 1060px;

.caxton-notification {
	padding: 50px;
	text-align: center;
	max-width: 300px;
	margin: auto;
}

.caxton-grid {
	.grid-image h3.grid-title {
		font-size: 16px;
	}
	p {
		font-size: 14px;
	}
}

.edit-post-block-inspector-panel .components-panel__body.caxton-section {
	margin-bottom: 16px;
	padding-bottom: 0;
	box-shadow: 0 0 0 1px #ddd, 0 2px 3px #eee;
}

.caxton-section .components-panel__body .components-panel__body-toggle {
	font-weight: 400;
}

div, h1, h2, h3, h4, h5, h6, p, header, footer, section {
	> span[contentEditable] {
		display: block;
	}
}

.block-editor .editor-block-list__block[data-type*='caxton/'] {
	&, .wp-block {
		max-width: $caxton-width;
	}
}

.edit-post-visual-editor .editor-block-list__block {
	&[data-type="caxton/grid"] {
		&:hover {
			// Add hover styles here for easy selection
		}
		&[data-type="caxton/section"] {
			&:hover {
				// Add hover styles here for easy selection
			}
		}
	}
}

.edit-post-visual-editor .editor-block-list__block {
	&[caxton-float=" fl"], &[caxton-float=" fr"] {
		z-index: 20;
		width: 100%;
		margin-bottom: 0;
		&:before {
			content: none;
		}

	}
	&[caxton-float=" fl"] .editor-block-list__block-edit {
		float: left;
	}
	&[caxton-float=" fr"] .editor-block-list__block-edit {
		float: right;
	}
}

.edit-post-block-sidebar__panel .components-panel__body.caxton-section {
	box-shadow: inset 0 -1px 0 #ddd;
}

.edit-post-block-sidebar__panel .components-panel__body.caxton-section > .components-panel__body-title {
	box-shadow: inset 0 -1px 0 #ddd;
	background: #eee;
}

.caxton-icon-picker-panel {
	.caxton-icon-picker {
		border: 1px solid #ccc;
		position: relative;
		overflow: hidden;
		margin: 0 -3px 0 -1px;

		.caxton-matching-icons {
			display: flex;
			flex-wrap: wrap;
			max-height: 200px;
			overflow: auto;
		}

		.caxton-matching-icons .o-70 {
			order: 1;
		}

		.dashicons-no,
		.dashicons-search {
			position: absolute;
			top: 5px;
			left: 5px;
			width: auto;
			height: auto;
		}
		.dashicons-no {
			left: auto;
			right: 0;
			top: 0;
			padding: 5px;
		}

		i[class*='fa-'] {
			margin: 0.4em;
			width: 1.25em;
			line-height: 1.25;
			font-size: 20px;
			text-align: center;
			box-sizing: content-box;
			cursor: pointer;
		}

		p {
			padding: .7em 1em 1em;
			margin: 0;
		}

		input {
			width: 100%;
			padding-left: 2.5em !important;
			border: none;
			border-bottom: 1px solid #ccc;
		}
	}
}

.caxton-image-picker {
	.image-button {
		padding: 0;
		flex-direction: column;
		align-items: center;
	}
	a.caxton-remove-image {
		position: absolute;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
		display: block;
		padding: 5px 11px;
		text-decoration: none;
		opacity: .5;
		&:hover {
			opacity: 1;
		}
	}
}

// 2018 fix
.editor-styles-wrapper div.wp-block {
	width: auto;
}

.editor-block-list__layout .layout-caxton-col .editor-block-list__block {
	padding-left: 36px;
	padding-right: 36px;
	.editor-block-drop-zone {
		margin: 0;
	}
	.editor-block-list__breadcrumb {
		margin-left: -38px;
		margin-right: -38px;
	}
}

.caxton-columns .editor-block-list__layout.layout-caxton-col {
	overflow: visible;
}

.wp-core-ui {
	.vw-100, .vw-100-bg {
		width: calc( 100vw - 200px ) !important;
		margin-left: calc( -50vw + 50% + 100px ) !important;
	}
	.vw-100-bg {
		padding-right: calc( 50vw - 50% - 100px );
		padding-left: calc( 50vw - 50% - 100px );
	}
	.is-sidebar-opened {
		.vw-100, .vw-100-bg {
			width: calc( 100vw - 480px ) !important;
			margin-left: calc( -50vw + 50% + 240px ) !important;
		}
		.vw-100-bg {
			padding-right: calc( 50vw - 50% - 240px );
			padding-left: calc( 50vw - 50% - 240px );
		}
	}
}

@import 'scss/ordered-select-control';

@import 'scss/caxton-section-grid';