/* Constructor's invalid element */
.vid-item-list .item.type__invalid .item-body {
	background-color: #f17b6e;
}

/* Position hint in elements */
.vid-item-list .item-cnt {
	justify-content: flex-start;
}

/* Script options line */
.script-options::before {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	margin: 5px 0;
	background-color: #ddd;
}


/* Code editor buttons */
.sc-editor-btn, .sc-color-picker-parent .button.wp-color-result {
	flex-grow: 1;
	border-radius: 0 !important;
	border-width: 0 !important;
}
.sc-editor-btn::before {
	vertical-align: middle;
}
.sc-editor-btn + .sc-editor-btn {
	border-left-width: 1px !important;
}
.sc-color-picker-parent .button.wp-color-result {
	border-left-width: 1px !important;
	height: 100%;
}

/* Code editor */
textarea#code-editor {
	display: none;
}
.CodeMirror {
	border-top: 1px solid var(--vid-text-border);
	height: auto;
}
.CodeMirror-focused {
	outline: 2px dotted var(--vid-text-focus);
}

/* Marked text in the Code editor */
.sc-editor-marked-text {
	color: orange;
	outline: 1px dashed orange;
	background-color: #fea;
}

/* Side-by-side view toggle */
#screen-meta-links #screen-view-toggle::after {
	content: '\F13C';
	margin-left: 5px;
}
#screen-meta-links #screen-view-toggle.screen-meta-active::after {
	color: var(--vid-text-act);
	text-shadow: 0 0 5px var(--vid-text-act);
}

/* Preview options button */
#screen-meta-links #screen-preview-btn::after {
	content: "\F115";
	margin-left: 5px;
}
/* Preview options */
#screen-preview-cnt {
	display: none;
	margin: 0 20px -1px 0;
	position: relative;
	background-color: #fff;
	border: 1px solid #c3c4c7;
	border-top: none;
	overflow: hidden;
}
/* Heading in options */
.screen-options-heading {
  margin: 0;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
}
/* A hint text in options */
.screen-options-hint {
	margin-bottom: 10px;
}

/* Removes padding for Style editor meta box */
#showcase-creator-layout-style-editor .inside {
	margin: 0;
	padding: 0;
}

/* Removes the sortable handles of the Constructor and the Style editor */
.no-sortable .handle-actions,
.no-sortable h2.hndle,
.postbox-header > h2.no-event {
	display: none;
}
.no-sortable .postbox-header > h2.no-event {
	display: flex;
}

/* Styles the preview window */
.sc-preview {
	position: fixed;
	z-index: 9000;
	user-select: none;
}
.sc-preview-wrapper {
	position: relative;
	border-radius: var(--vid-border-radius);
	-webkit-box-shadow: var(--vid-shadow);
	box-shadow: var(--vid-shadow);
}
.sc-preview-screen {
	position: absolute;
	background-color: #fff;
	transform-origin: top left;
}
.sc-preview-over {
	position: absolute;
	inset: 0;
	z-index: 99;
}
.sc-preview-btn-ring {
	position: absolute;
	z-index: -1;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50% 50% 0 0;
	background-color: var(--vid-dark);
	transform: translate(-50%, -70%) scale(1);
	opacity: 0.8;
	transition: all 300ms ease;
}
.sc-preview-btn-ring:hover {
	transform: translate(-50%, -80%) scale(1.05);
	opacity: 1;
}
.sc-preview-btn {
	color: var(--vid-light);
	font-size: 1.2em;
	cursor: pointer;
}

/* Preview window corners */
.sc-preview-resizer {
	position: absolute;
	opacity: 0;
	transition: opacity 300ms ease;
	width: 40px;
	height: 40px;
	margin: 3px;
	--resizer-color: var(--vid-darker);
	background: linear-gradient(135deg, transparent 2px, var(--resizer-color) 2px, var(--resizer-color) 4px, transparent 4px, transparent 8px, var(--resizer-color) 8px, var(--resizer-color) 10px, transparent 10px, transparent 14px, var(--resizer-color) 14px, var(--resizer-color) 16px, transparent 16px);
	z-index: 110;
}
.sc-preview-resizer.top-left {
	top: 0;
	left: 0;
	cursor: nw-resize;
}
.sc-preview-resizer.top-right {
	top: 0;
	right: 0;
	transform: rotate(90deg);
	cursor: ne-resize;
}
.sc-preview-resizer.bottom-right {
	bottom: 0;
	right: 0;
	transform: rotate(180deg);
	cursor: se-resize;
}
.sc-preview-resizer.bottom-left {
	bottom: 0;
	left: 0;
	transform: rotate(270deg);
	cursor: sw-resize;
}
.sc-preview-screen-wrapper:hover .sc-preview-resizer {
	opacity: 0.2;
}
.sc-preview-resizer:hover {
	opacity: 0.8 !important;
}

/* Preview window resize rectangle */
.sc-preview-resizer-fake {
	position: fixed;
	border: 1px solid var(--vid-text-act);
	box-sizing: border-box;
	z-index: 9999;
	box-shadow: 0 0 1px 1px #0003, inset 0 0 1px 1px #0003;
	overflow: hidden;
}

/* The size display when resizing */
.sc-preview-size {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--vid-dark);
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	width: max-content;
}
.sc-preview-size-w.bold,
.sc-preview-size-h.bold,
.sc-preview-size-s.bold {
	font-weight: bold;
}
.sc-preview-size-hint {
	position: relative;
	width: max-content;
	height: 1px;
}
.sc-preview-size-hint-inner {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.7em;
	font-style: italic;
	width: max-content;
}

/* MEDIA QUERIES */

/* ON MEDIUM AND ABOVE SCREENS */
@media (min-width: 1024px) {

	/* When side-by-side view is on, aligns the
	Constructor and the Style Editor. */
	.grid-view #advanced-sortables {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

}

/* ON MEDIUM SCREENS ONLY */
@media (min-width: 1024px) and (max-width: 1400px) {
	
	/* When side-to-side view is on, hides the labels
	of the buttons that are above the code editor. */
	.grid-view .sc-editor-btn span {
		display: none;
	}

}

/* ON MOBILE SCREENS ONLY */
@media (max-width: 480px) {

	.sc-editor-btn span { /* Hides the labels of the buttons that are above the code editor */
		display: none;
	}

}