/**
 * Post Editor - Content division.
 */
.edit-post-visual-editor {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	max-height: 100%;

	& > .components-accessible-toolbar {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		left: 0 !important;
		z-index: 1000 !important;

		@media screen and ( max-width: 781px ) {
			height: 47px;
		}
	}

	& > #qp-viewports-inspector-wrap {
		@media screen and ( max-width: 781px ) {
			margin-top: calc( 45px + 47px );
		}
	}

	& > .edit-post-visual-editor__content-area {
		width: auto !important;
		flex-direction: column;
		flex-grow: 1 !important;
		flex-shrink: 1 !important;
		justify-content: flex-start;
		margin: 0 auto;
		max-width: 100%;
		height: 100%;
		min-width: 300px;
		box-sizing: border-box;
		overflow: hidden !important;

		@media screen and ( max-width: 781px ) {
			padding-top: 47px !important;
		}
	}

	iframe[name="editor-canvas"] {
		flex-grow: 1;
		flex-shrink: 0;
	}

	#qp-viewports-wrap {
		width: 100%;
	}
}


/**
 * Post Editor - Fix 6.5
 */
.edit-post-visual-editor {
	& > div:not( .edit-post-visual-editor__content-area ) {
		&:first-child:last-child {
			width: 100%;
			flex-direction: column;
			align-items: center;
		}
	}
}
.edit-post-layout {
	.interface-interface-skeleton__body {
		background: #212124;
	}
}


/**
 * Post Editor - Fix 6.6
 */
.edit-post-visual-editor {
	& > div.editor-resizable-editor {
		& > :first-child:nth-last-child( 2 ) {
			width: 100%;
			flex-direction: column;
			align-items: center;
		}
	}
}


/**
 * Post Editor - Fix GB 19.3
 */
body.is-active-viewports {
	.block-editor-iframe__container {
		height: auto;
		overflow: visible;

		.block-editor-iframe__scale-container {
			display: flex;
			height: auto;
			flex-direction: column;
			align-items: center;
		}
	}
}


/**
 * Post Editor - Fix GB 20.4
 */
body.is-active-viewports {
	.edit-post-visual-editor {
		& > div.editor-resizable-editor {
			& > div.block-editor-block-canvas {
				height: auto !important;
			}
		}
	}
}


/**
 * Site Editor - Content division.
 */
.edit-site-editor__interface-skeleton {
	background: #212124;

	#qp-viewports-inspector-wrap {
		height: auto;
	}
}
.edit-site-visual-editor {
	.edit-site-visual-editor__editor-canvas {
		transition: none !important;
	}
}


/**
 * Visual Editor - Padding fix.
 */
.editor-visual-editor.has-padding {
	padding: 0 !important;
}


/**
 * Interface Skeleton - Ordering.
 */
.interface-interface-skeleton__body {
	.interface-interface-skeleton__secondary-sidebar {
		order: 1;
	}

	& > * {
		order: 3;
	}

	.interface-interface-skeleton__content {
		// overflow: hidden;
	}

	.interface-interface-skeleton__sidebar {
		order: 5;
	}
}
body.is-left-inspector {
	.interface-interface-skeleton__body {
		#qp-viewports-inspector-wrap {
			order: 2;
		}
	}
}
body.is-right-inspector {
	.interface-interface-skeleton__body {
		#qp-viewports-inspector-wrap {
			order: 4;

			.qp-viewports-inspector {
				&.flyout {
					left: inherit;
					right: 0;
				}
			}
		}
	}
}


/**
 * Interface Sidebar - Tabs.
 */
.interface-interface-skeleton__sidebar {
	.block-editor-block-inspector__tabs {
		.components-tools-panel {
			transition: background-color 0.3s ease;

			&.is-highlighted {
				animation: highlightWhite 1.2s;
			}

			.components-tools-panel-item {
				transition: background-color 0.3s ease;

				&.is-highlighted {
					animation: highlightWhite 1.2s;
				}
			}
		}
	}
}


/**
 * Inspector - General.
 */
#qp-viewports-inspector-wrap {
	position: relative;
	height: calc( 100% );
	box-sizing: border-box;
	background: #212124;

	* {
		box-sizing: border-box;
	}
}
body.post-php {
	#qp-viewports-inspector-wrap {
		height: 100%;

		.qp-viewports-inspector {
			height: 100%;
		}

		.qp-viewports-inspector-blocklist {
			padding-bottom: 45px;
		}

		.qp-viewports-inspector-foot {
			bottom: 0;
		}
	}
}
.qp-viewports-inspector {
	width: 300px;
	padding-bottom: 47px;
	height: 100%;
	background: #212124;

	&.flyout {
		position: absolute;
		left: 0;
		top: -45px;
		margin-top: 45px;
		padding-top: 48px;
		z-index: 1000;
		height: calc( 100% + 45px );

		.qp-viewports-inspector-head {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1000;
			width: 100%;
		}

		.qp-viewports-inspector-foot {
			bottom: 0;
		}
	}
}
body.is-active-viewports {
	&.is-left-inspector {
		&.is-inspecting {
			#qp-viewports-inspector-wrap {
				border-right: 1px solid #919191;
			}
		}
	}
	&.is-right-inspector {
		&.is-inspecting {
			#qp-viewports-inspector-wrap {
				border-left: 1px solid #919191;
			}
		}
	}
}


/**
 * Inspector - Site Editor.
 */
.edit-site-layout {
	.qp-viewports-inspector {
		height: calc( 100% + -15px );

		.qp-viewports-inspector-body {
			height: calc( 100% - 32px );
		}

		.qp-viewports-inspector-foot {
			bottom: 0;
		}

		&.flyout {
			height: 100%;

			.qp-viewports-inspector-body {
				height: 100%;
			}
		}
	}
}


/**
 * Inspector - Head / Body / Foot.
 */
.qp-viewports-inspector {
	.qp-viewports-inspector-head {
		display: flex;
		border-bottom: 1px solid #919191;
		padding: 0 4px;

		button {
			height: 47px;
			width: 44px;
			padding: 8px;
		}

		button.qp-viewports-toggle-inspecting {
			width: auto;
			color: #fff;
			padding: 8px;

			svg.viewports {
				height: 100%;
				width: 28px;
				margin-top: 1px;
				margin-right: 5px;
			}
		}

		button.qp-viewports-inspector-position {
			margin-left: auto;
			margin-right: 0;
			color: #919191;

			&:hover {
				color: #fff;
			}
		}

		button.qp-viewports-inspector-close {
			margin-left: 0;
			margin-right: 0;
			color: #919191;

			&:hover {
				color: #fff;
			}
		}
	}

	.qp-viewports-inspector-body {
		height: 100%;

		.qp-viewports-inspector-selected-wrap {
			height: calc( 100% - 75px );

			&.overflow {
				overflow-y: scroll;
			}
		}
	}

	.qp-viewports-inspector-foot {
		position: absolute;
		border-top: 1px solid #919191;
		bottom: -45px;
		right: 0;
		left: 0;
		z-index: 20;
		background: #212124;

		button.qp-viewports-link,
		a.qp-viewports-link {
			width: 100%;
			height: 45px;
			padding: 0 10px;
			color: #919191;
			justify-content: flex-start;

			svg.logo {
				margin-right: 5px;
			}

			&:hover {
				color: #fff;
			}
		}
	}
}


/**
 * Inspector - Breadcrumb.
 */
.qp-viewports-inspector-breadcrumb {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	list-style: none;
	margin: 0;
	padding: 0 14px;
	background: #35363a;

	li {
		margin: 0;
		padding: 0;

		span {
			color: #c2c7c9;
			cursor: pointer;
			line-height: 26px;
		}

		&::after {
			content: '-';
			padding-left: 5px;
			padding-right: 5px;
			color: #c2c7c9;
		}

		&:last-child::after {
			content: none;
		}

		&:hover {
			& > span {
				color: #fff;
				text-decoration: underline;
			}
		}
	}
}


/**
 * Inspector - ToggleEdit.
 */
.qp-viewports-inspector-body {
	.qp-viewports-toggle-edit {
		padding: 14px;
		margin-bottom: 6px;
		border-bottom: 1px solid #919191;
		color: #919191;
		cursor: pointer;

		&:hover {
			color: #fff;
		}

		.components-flex {
			flex-direction: row-reverse;
			justify-content: space-between;
		}
	}
}

/**
 * Inspector - BlockList.
 */
.qp-viewports-inspector-blocklist {
	padding: 2px 0 0 0;
	height: calc( 100% - 26px );
	overflow-y: scroll;
	border-bottom: 1px solid #424849;

	.qp-viewports-inspector-blocklist-block {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #424849;
		padding-left: 14px;
		padding-right: 4px;

		&:last-child {
			border-bottom: none;
		}

		.name {
			width: auto;
			color: #919191;
		}

		.actions {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			width: 100px;

			button {
				height: 26px;
				color: #919191;

				&.disabled {
					text-decoration: line-through;
					opacity: 0.4;
				}

				&:hover {
					color: #fff;
				}
			}
		}

		.inner-blocks {
			width: 100%;
		}
	}
}


/**
 * Inspector - Selected.
 */
.qp-viewports-inspector-selected-wrap {
	padding: 0 4px;
}


/**
 * Accordion - General.
 */
.qp-viewports-accordion {
	.qp-viewports-accordion-toggle {
		display: block;
		cursor: pointer;
		user-select: none;

		.dashicon {
			transition: none;
		}
	}
}


/**
 * Inspector - Accordion.
 */
.qp-viewports-inspector {
	.qp-viewports-accordion {
		.qp-viewports-accordion-toggle {
			padding: 4px 0px 3px 3px;
			color: #919191;

			&:hover {
				color: #fff;
			}
		}

		&.active {
			.qp-viewports-accordion-toggle {
				color: #c2c7c9;

				&:hover {
					color: #fff;
				}
			}
		}
	}
}


/**
 * Dimensions - General.
 */
.qp-viewports-dimensions {
	position: relative;
	box-sizing: border-box;
	user-select: none;
	font-family: monospace;

	&::before {
		content: '';
		display: block;
		padding-bottom: 84%;
	}

	&:hover {
		.qp-viewports-dimension {
			background-color: #fff !important;
		}
	}

	// Initial state.
	.qp-viewports-dimension {
		position: absolute;
		transition: top 0.2s ease, right 0.2s ease, bottom 0.2s ease, left 0.2s ease;

		&.position {
			top: 0; right: 0; bottom: 0; left: 0;
			border: 1px dashed currentColor;

			&:hover {
				background-color: #e0e0e0 !important;
			}
		}

		&.margin {
			top: 20px; right: 20px; bottom: 20px; left: 20px;
			border: 1px dashed currentColor;
			background-color: #a7825a;

			&:hover {
				background-color: #a7825a !important;
			}
		}

		&.border {
			top: 40px; right: 40px; bottom: 40px; left: 40px;
			border: 1px solid currentColor;
			background-color: #dec38a;

			&:hover {
				background-color: #dec38a !important;
			}
		}

		&.padding {
			top: 60px; right: 60px; bottom: 60px; left: 60px;
			border: 1px dashed currentColor;
			background-color: #b9c387;

			&:hover {
				background-color: #b9c387 !important;
			}
		}

		&.content {
			top: 80px; right: 80px; bottom: 80px; left: 80px;
			border: 1px dashed currentColor;
			background-color: #90b0bc;

			&:hover {
				background-color: #90b0bc !important;
			}

			.view-label {
				opacity: 0;
			}
		}

		.view-content {
			position: relative;
		}

		.view-content {
			z-index: 10;
			width: 100%;
			height: 100%;
			transition: opacity 0.2s ease 0.2s;
		}
	}
}


/**
 * Dimensions - Inspector integration.
 */
.qp-viewports-inspector {
	.qp-viewports-dimensions {
		margin: 0 10px;

		.qp-viewports-dimension {
			&.position {
				.view-top, .view-bottom {
					background-color: #212124 !important;
				}
			}
		}

		&:hover {
			.qp-viewports-dimension {
				background-color: #212124 !important;
				color: #919191;

				.view-top, .view-bottom {
					background-color: #212124 !important;
				}
			}
		}

		.qp-viewports-dimension {
			&.position {
				color: #919191;
			}

			&:hover {
				color: currentColor;

				&.position {
					background-color: #e0e0e0 !important;
					color: #919191;

					.view-top, .view-bottom {
						background-color: #e0e0e0 !important;
					}
				}

				&.margin {
					background-color: #a7825a !important;

					.view-top, .view-bottom {
						background-color: #a7825a !important;
					}
				}

				&.border {
					background-color: #dec38a !important;

					.view-top, .view-bottom {
						background-color: #dec38a !important;
					}
				}

				&.padding {
					background-color: #b9c387 !important;

					.view-top, .view-bottom {
						background-color: #b9c387 !important;
					}
				}

				&.content {
					background-color: #90b0bc !important;

					.view-top, .view-bottom {
						background-color: #90b0bc !important;
					}
				}
			}
		}
	}
}


/**
 * Dimensions - View.
 */
.qp-viewports-dimensions {
	.qp-viewports-dimension {
		.view-label {
			position: absolute;
			top: 0px; left: 5px;
			font-size: 10px;
			line-height: 19px;
			z-index: 1;
		}

		.view-top,
		.view-bottom,
		.view-left,
		.view-right,
		.view-center {
			font-size: 10px;
			line-height: 19px;
		}

		.view-top,
		.view-bottom,
		.view-left,
		.view-right {
			text-align: center;
			white-space: nowrap;
		}

		.view-top {
			position: absolute;
			top: 0;
			left: 50%;
			width: auto;
			height: 19px;
			padding: 0 4px;
			transform: translateX( -50% );
		}

		.view-top-right {
			position: absolute;
			top: 0; right: 0;
			width: 19px;
			height: 19px;
		}

		.view-bottom {
			position: absolute;
			bottom: 0;
			left: 50%;
			width: auto;
			height: 19px;
			padding: 0 4px;
			transform: translateX( -50% );
		}

		.view-left {
			position: absolute;
			top: 50%; left: -40px;
			width: 99px;
			height: 19px;
			transform: translateY( -50% ) rotate( -90deg );
		}

		.view-right {
			position: absolute;
			top: 50%; right: -40px;
			width: 99px;
			height: 19px;
			transform: translateY(-50%) rotate(90deg);
		}

		.view-center {
			position: absolute;
			top: 50%;
			transform: translateY( -50% );
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		&.position {
			.view-top, .view-bottom {
				background-color: #e0e0e0 !important;
			}
		}

		&.margin {
			.view-top, .view-bottom {
				background-color: #a7825a !important;
			}
		}

		&.border {
			.view-top, .view-bottom {
				min-width: 82px;
				width: max-content;
				background-color: #dec38a !important;
			}
		}

		&.padding {
			.view-top, .view-bottom {
				background-color: #b9c387 !important;
			}
		}

		&.content {
			.view-top, .view-bottom {
				background-color: #90b0bc !important;
			}
		}
	}
}


/**
 * StyleList - General.
 */
.qp-viewports-inspector-stylelist {
	display: flex;
	flex-direction: column;
	margin: 0;
}


/**
 * StyleList - Style.
 */
.qp-viewports-inspector-style {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0;
	padding: 5px 10px;
	font-family: monospace;
	font-size: 10px;
	transition: background-color 0.3s ease;

	&.has-changes,
	&.has-removes {
		background-color: #f3f3f3;
	}

	.media {
		width: 100%;

		&.active {
			color: #000;
		}
	}

	.selector-start {
		margin-top: 1px;
		flex-grow: 1;
		flex-shrink: 1;
	}

	.actions {
		position: relative;
		display: flex;
		flex-direction: column;
		margin-left: auto;

		button.property {
			height: 20px;
			width: auto;
			padding: 0;
			font-size: 10px;
			color: currentColor;

			&:hover {
				color: var( --wp-admin-theme-color-darker-20 );
			}
		}

		.state-actions {
			position: absolute;
			bottom: -20px;
			right: 0;
			z-index: 10;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			button {
				width: 24px;
				height: 24px;
				min-width: 0;
				color: #919191;

				span {
					font-size: 16px;
				}

				&.remove {
					&:hover {
						color: var( --wp--preset--color--vivid-red );
					}
				}

				&.restore {
					&:hover {
						color: var( --wp-admin-theme-color );
					}
				}
			}
		}
	}

	.css-wrap {
		position: relative;
		width: 100%;
		padding-left: 15px;

		.css-status {
			display: none;
		}

		&.changed,
		&.removed {
			.css-status {
				display: block;
				position: absolute;
				top: 7px;
				left: 3px;
				width: 6px;
				height: 6px;
				border-radius: 10px;
				border: 1px solid #c2c7c9;
				background-color: transparent;
			}
		}

		&.changed {
			.css-status {
				background-color: var( --wp-admin-theme-color-darker-20 );
			}
		}

		&.removed {
			.css-status {
				background-color: var( --wp--preset--color--vivid-red );
			}

			.css-key {
				color: var( --wp--preset--color--vivid-red );
			}

			.css-key,
			.css-value {
				text-decoration: line-through;
			}
		}

		.css-key,
		.css-value {
			display: inline-block
		}

		.css-key {
			color: var( --wp-admin-theme-color-darker-20 );
		}

		.css-value {
			padding-left: 10px;
		}
	}

	.selector-end {
		width: 100%;
	}
}


/**
 * StyleList - Style - Dark.
 */
.dark .qp-viewports-inspector-style,
.qp-viewports-inspector-style.dark {
	color: #c2c7c9;

	.qp-viewports-inspector-stylelist {
		color: #919191;
	}

	&.is-highlighted {
		animation: highlightDark 1.2s;
	}

	&.has-changes,
	&.has-removes {
		background-color: #35363a;
	}

	.media {
		color: #919191;

		&.active {
			color: #c2c7c9;
		}
	}

	.actions {
		button.property {
			&:hover {
				color: #fff;
			}
		}

		.state-actions {
			button {
				color: #919191;

				&.remove {
					&:hover {
						color: var( --wp--preset--color--vivid-red );
					}
				}

				&.restore {
					&:hover {
						color: var( --wp-admin-theme-color );
					}
				}
			}
		}
	}

	.css-wrap {
		&.changed,
		&.removed {
			.css-status {
				border: 1px solid #c2c7c9;
				background-color: transparent;
			}
		}

		&.changed {
			.css-status {
				background-color: var( --wp-admin-theme-color-darker-20 );
			}
		}

		&.removed {
			.css-status {
				background-color: var( --wp--preset--color--vivid-red );
			}

			.css-key {
				color: var( --wp--preset--color--vivid-red );
			}
		}

		.css-key {
			color: var( --wp-admin-theme-color );
		}
	}

	.qp-viewports-stylelist-notice {
		color: #c2c7c9;

		svg,
		.dashicon {
			color: var( --wp-admin-theme-color );
		}
	}
}

.qp-viewports-stylelist-notice {
	margin: 0 -10px;
	padding: 4px 10px 4px 10px;
	border-top: 1px solid;
	font-size: 12px;

	svg,
	.dashicon {
		font-size: 18px;
		margin-right: 3px;
		color: var( --wp-admin-theme-color-darker-20 );
	}
}
.qp-viewports-inspector.dark .qp-viewports-stylelist-notice {
	padding-left: 14px;
	border: none;
	color: #c2c7c9;

	svg,
	.dashicon {
		color: var( --wp-admin-theme-color );
	}
}


/**
 * Inspector - ReactJsonView.
 */
.react-json-view {
	width: 100%;
	overflow-x: auto;
	overflow-y: clip;
	height: auto;
	padding-bottom: 10px;

	.icon-container {
		.collapsed-icon,
		.expanded-icon {
			margin-left: 1.5px;

			svg {
				margin-top: 5px;
			}
		}
	}

	.object-container {
		.object-content {
			display: inline-flex;
			flex-direction: column;
			align-items: flex-start;
		}
	}

	.variable-row,
	.object-meta-data {
		position: relative;

		.copy-to-clipboard-container {
			position: absolute;
			top: -11px;
			right: -14px;
			vertical-align: middle;
			margin-top: 0;

			.copied-icon {
				position: absolute;
				top: -3px;
				right: -6px;
			}
		}
	}

	.variable-row {
		flex: 0 0 auto;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: visible;

		& > * {
			flex: 0 0 auto;
		}

		.copy-to-clipboard-container {
			top: 4px;
		}

		& > .variable-value {
			padding-right: 14px;
		}
	}

	.object-meta-data {
		.copy-to-clipboard-container {
			top: -11px;
			right: -14px;
		}
	}

	.node-ellipsis {
		font-size: 10px !important;
	}

	.object-key-val,
	.variable-row {
		&.has-changes:not( .has-removes ) {
			& > .variable-value > div,
			& > .brace-row > span,
			& > span > span > span {
				color: var( --wp--preset--color--vivid-green-cyan ) !important;
			}
		}

		&.has-removes:not( .has-changes ) {
			& > .variable-value > div,
			& > .brace-row > span,
			& > span > span > span {
				color: var( --wp--preset--color--vivid-red ) !important;
			}
		}
	}
}



/**
 * Block Editor List View.
 */
table.block-editor-list-view-tree {
	& > tbody {
		& > tr {
			& > td {
				&.block-editor-list-view-block__menu-cell {
					text-align: right;
					width: 54px;

					& > * {
						display: inline-block;
						width: 26px;
						vertical-align: inherit;
					}

					button.qp-viewports-inspector-blocklist-toggle {
						padding: 2px !important;
						height: 30px !important;

						&:hover {
							svg.viewports {
								.cls-1 {
									fill: var( --wp-admin-theme-color );
								}

								.cls-2 {
									fill: var( --wp-admin-theme-color );
								}
							}
						}

						&:active {
							outline: 1px solid #fff;
						}
					}
				}
			}

			&.is-selected {
				& > td {
					&.block-editor-list-view-block__menu-cell {
						svg.viewports {
							.cls-1 {
								fill: #fff !important;
							}

							.cls-2 {
								fill: #fff !important;
							}
						}
					}
				}
			}
		}
	}
}

.block-editor-list-view-leaf {
	.block-editor-list-view-block-select-button__label-wrapper {
		min-width: 50px;
	}
}



/**
 * Inspector - Style Object Tree.
 */
.qp-viewports-style-object-tree {
	color: #919191 !important;
	padding: 5px;
	border: 1px solid #919191;
	max-height: 200px;
	max-width: 100%;
	overflow: scroll;

	.object-tree {
		display: block;
		font-size: 10px;
	}

	.style-wrap {
		display: flex;
		flex-direction: column;

		& > .style-values {
			padding-left: 10px;
		}

		& > .style-value-pair {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}
	}

	.style-key {
		cursor: pointer;

		&:hover {
			color: red;

			& + * {
				color: red;
			}
		}
	}
}


/**
 * Topbar.
 */
.qp-viewports-topbar {
	position: relative;
	z-index: 0;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #919191;
	background: #212124;

	* {
		user-select: none;
	}

	.qp-viewports-actions {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 200px;
		padding: 0 4px;

		&.right {
			justify-content: flex-end;
		}

		button {
			width: 44px;
			height: 44px;
			padding: 8px !important;

			svg {
				width: 100%;
				height: auto;
			}
		}

		button.qp-viewports-toggle-inspecting {
			width: 108px;
			color: #919191;

			svg.viewports {
				width: auto;
				height: 100%;
				margin-top: 1px;

				.cls-1,
				.cls-2 {
					fill: #919191;
				}
			}

			&:hover {
				color: #fff;

				svg.viewports {
					.cls-1,
					.cls-2 {
						fill: #fff;
					}
				}
			}

			&.is-inspecting {
				svg.viewports {
					.cls-1,
					.cls-2 {
						fill: #fff;
					}
				}

				&:hover {
					svg.viewports {
						.cls-1,
						.cls-2 {
							fill: var( --wp-admin-theme-color );
						}
					}
				}
			}
		}

		button.qp-viewports-toggle-editing {
			svg.edit {
				width: auto;
				height: 100%;
				padding-top: 1px;

				.cls-1, .cls-3 {
					stroke: #919191;
				}

				.cls-2 {
					fill: #919191;
				}
			}

			&.is-editing {
				width: auto;
				color: #fff !important;

				svg.edit {
					margin-right: 6px;

					.cls-1, .cls-3 {
						stroke: var( --wp-admin-theme-color );
					}

					.cls-2 {
						fill: #fff;
					}
				}
			}
		}

		.chosen-viewport,
		.chosen-zoom {
			padding-left: 6px;
			font-size: 12px;
			color: #919191;
			align-self: center;
		}
	}

	.qp-viewports-shorthands {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 47px;

		.qp-viewport-shorthand {
			display: flex;
			padding: 0 6px;
			flex-direction: column;
			justify-content: center;
			cursor: pointer;

			svg,
			.dashicon {
				color: #919191;
			}

			&.prev,
			&.next {
				&:hover {
					svg,
					.dashicon {
						color: #fff;
					}
				}
			}

			&.in-range {
				svg,
				.dashicon {
					color: #fff;
				}
			}

			&.active {
				svg,
				.dashicon {
					color: var( --wp-admin-theme-color );
				}
			}
		}
	}
}


/**
 * Viewports.
 */
.qp-viewports {
	position: relative;
	z-index: 0;
	height: 26px;
	width: 100%;
	overflow: hidden;
	background: #35363a;
	padding-top: 2px;
	padding-bottom: 2px;

	&,
	& * {
		box-sizing: border-box;
	}

	* {
		user-select: none;
	}

	&:hover {
		.qp-viewport,
		.qp-viewport.active {
			background: transparent !important;

			.title {
				font-size: 0;
			}

			.width {
				font-size: 0;
			}
		}
	}

	.qp-viewport {
		position: absolute;
		top: 0;
		bottom: 2px;
		left: 50%;
		transform: translate(-50%);
		height: 100%;
		border-left: 2px solid #212124;
		border-right: 2px solid #212124;
		transition: width 0.2s ease;

		.width {
			height: 100%;
			text-align: center;
			font-size: 0;
			line-height: 24px;
			color: #919191;
		}

		.title {
			position: absolute;
			top: 26px;
			left: 50%;
			min-width: 320px;
			transform: translate( -50% );
			text-align: center;
			font-size: 0;
			color: #4a4c50;
		}

		&:hover {
			background: #454544 !important;

			.title {
				font-size: 12px !important;
			}

			.width {
				font-size: 12px !important;
			}
		}

		&.active {
			background: #454544;

			.title {
				font-size: 12px;
			}

			.width {
				font-size: 12px;
			}
		}
	}
}

body.is-editing-viewports {
	.qp-viewports {
		.qp-viewport {
			&.active {
				background-color: var( --wp-admin-theme-color-darker-20 );

				.width {
					color: #fff;
				}
			}

			&:hover {
				background-color: var( --wp-admin-theme-color ) !important;

				.width {
					color: #fff;
				}
			}
		}
	}
}


/**
 * iFrame wrap.
 */
body.is-active-viewports {
	.edit-site-visual-editor,
	.edit-post-visual-editor,
	.edit-post-visual-editor .edit-post-visual-editor__content-area .is-desktop-preview {
		background: #212124 !important;
	}
}


/**
 * iFrame.
 */
.edit-site-visual-editor {
	.components-resizable-box__container {
		overflow: hidden !important;

		& > div {
			display: inherit !important;
		}
	}

	iframe[name="editor-canvas"] {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		transition: none !important;
	}
}

/**
 * iFrame Fix 6.6
 */
.edit-post-visual-editor {
	iframe[name="editor-canvas"] {
		flex-grow: 0;
		transition: none !important;
	}
}


/**
 * Editor Styles Wrapper.
 */
.edit-post-visual-editor {
	.is-desktop-preview {
		align-items: center;
	}

	.editor-styles-wrapper {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background: #fff;
		overflow-y: scroll;
		flex-shrink: 0;
		flex-grow: 1;
		flex-basis: inherit;

		&,
		& * {
			box-sizing: border-box;
		}
	}
}


/**
 * Toggle Keyframes.
 */
.qp-viewports-keyframes-toggle {
	padding-left: 12px;
	padding-right: 12px;

	svg {
		margin-left: 0 !important;
		margin-right: 0px !important;
	}

	.cls-left {
		display: none;
	}
}


/**
 * Toggle View - Device Type.
 */
.editor-header__settings {
	.editor-preview-dropdown {
		button {
			width: 32px !important;
			height: 32px !important;
			border-radius: 2px;
		}
	}
}

body.is-active-viewports {
	&.is-editing-viewports {
		.editor-header__settings {
			.editor-preview-dropdown {
				button {
					background-color: var( --wp-admin-theme-color );
				}
			}
		}
	}

	.editor-header__settings {
		.editor-preview-dropdown {
			button {
				background-color: #212124;
				color: #fff;
				background-image: none;
			}
		}
	}
}


/**
 * Injected Preview.
 */
.qp-viewports-injected-preview {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin: 0 -8px 0 -8px;
	padding: 8px 16px;

	&:last-child {
		margin-bottom: -9px;
	}

	.qp-viewports-toggle-edit,
	.qp-viewports-toggle-view {
		padding: 8px 0;
		margin: 0;

		.components-flex {
			flex-direction: row-reverse;
			justify-content: space-between;
		}
	}
}


/**
 * Keyframes.
 */
.qp-keyframes {
	position: relative;
	min-height: 45px;
	z-index: 0;
	color: #919191;
	background: #212124;

	* {
		box-sizing: border-box;
	}

	.qp-keyframes-wrap {
		display: flex;
		flex-direction: row;
		position: absolute;
		left: 50%;
		transform: translateX( -50% );
		margin-top: 8px;

		.qp-keyframe {
			position: relative;
			height: 20px;
			transition: height 0.2s ease;

			button.marker {
				position: absolute;
				z-index: 10;
				display: flex;
				justify-content: center;
				align-items: center;
				top: 4px;
				width: 30px;
				height: 30px;
				padding: 0;
				color: #919191;

				&::before {
					content: "";
					display: block;
					height: 10px;
					width: 1px;
					position: absolute;
					top: -6px;
					left: 50%;
					background: currentColor;
					transform: translateX(-50%);
				}

				&::after {
					content: "";
					position: absolute;
					bottom: -55px;
					width: 1px;
					background-color: #fff;
					left: 50%;
					transition: height 1s ease;
					transform: translate( -50% );
				}
			}

			&:only-child {
				width: 100% !important;
			}

			&.first {
				margin-right: 0.5px;

				button.marker {
					right: -0.5px;
					transform: translateX( 50% );

					svg.keyframe {
						.cls-left {
							fill: currentColor;
						}
						.cls-right {
							fill: transparent !important;
						}
					}
				}
			}

			&.center {
				.info {
					text-align: center;
					color: #919191;
				}

				button.marker {
					left: 0;
					transform: translateX( -50% );

					svg.keyframe {
						.cls-left {
							fill: currentColor;
						}
						.cls-right {
							fill: currentColor;
						}
					}
				}
			}

			&.last {
				margin-left: 0.5px;

				button.marker {
					left: -0.5px;
					transform: translateX( -50% );

					svg.keyframe {
						.cls-left {
							fill: transparent;
						}
						.cls-right {
							fill: currentColor;
						}
					}
				}
			}

			&.controlling,
			&:hover,
			&.hover {
				border-color: #fff !important;

				button.marker {
					color: #fff;
				}
			}

			&.controlling {
				button.marker {
					&::after {
						height: 60px;
					}
				}
			}

			&.changes {
				button.marker {
					svg.keyframe {
						.cls-outer {
							fill: var( --wp-admin-theme-color-darker-20 );
						}
					}

					&::before,
					&::after {
						background-color: var( --wp-admin-theme-color-darker-20 );
					}
				}

				&.controlling,
				&:hover,
				&.hover {
					button.marker {
						svg.keyframe {
							.cls-outer {
								fill: var( --wp-admin-theme-color );
							}
						}

						&::before,
						&::after {
							background-color: var( --wp-admin-theme-color );
						}
					}
				}
			}

			&.removed {
				button.marker {
					svg.keyframe {
						.cls-left {
							opacity: 0.8;
						}
					}
				}

				&.first {
					button.marker {
						svg.keyframe {
							.cls-left {
								fill: var( --wp--preset--color--vivid-red );
							}
						}
					}
				}

				&.center {
					button.marker {
						svg.keyframe {
							.cls-left,
							.cls-right {
								fill: var( --wp--preset--color--vivid-red );
							}
						}
					}
				}

				&.last {
					button.marker {
						svg.keyframe {
							.cls-right {
								fill: var( --wp--preset--color--vivid-red );
							}
						}
					}
				}

				&.controlling,
				&:hover,
				&.hover {
					button.marker {
						svg.keyframe {
							.cls-outer {
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}
}



/**
 * Keyframe Controls.
 */
.qp-viewports-keyframe-controls {
	outline-color: #000;

	.components-popover__content {
		min-width: 300px;
		background: #212121;
		box-shadow: 0 0 0 1px #fff,0 2px 3px #0000000d,0 4px 5px #0000000a,0 12px 12px #00000008,0 16px 16px #00000005
	}

	.controls-heading {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		color: #c2c7c9;
		border-bottom: 1px solid #c2c7c9;
	}

	button.viewport {
		height: auto;
		padding: 0;
		color: #c2c7c9;
		text-decoration: underline;

		&:hover {
			color: #fff;
		}
	}
}


/**
 * Toggle Inspecting.
 */
.qp-viewports-toggle-inspecting {
	position: relative;

	&.is-inspecting {
		background: #212124;

		svg.viewports {
			.cls-1,
			.cls-2 {
				fill: #fff;
			}
		}

		&:focus {
			&::before {
				inset: 1px 0px 1px 0px;
				height: auto;
				width: auto;
			}
		}
	}
}
.components-toolbar {
	.qp-viewports-toggle-inspecting {
		padding: 0 !important;

		svg.viewports {
			width: 44px;
			height: 44px;
			padding: 8px;
		}
	}
}


/**
 * Toggle Editing.
 */
.qp-viewports-toggle-editing {
	position: relative;

	&.is-editing {
		background: #212124;

		svg.edit {
			.cls-1, .cls-3 {
				stroke: var( --wp-admin-theme-color );
			}

			.cls-2 {
				fill: #fff;
			}
		}

		&:focus {
			&::before {
				inset: 1px 0px 1px 0px;
				height: auto;
				width: auto;
			}
		}
	}
}
.components-toolbar {
	.qp-viewports-toggle-editing {
		padding: 0 !important;

		svg.edit {
			width: 44px;
			height: 44px;
			padding: 8px;
		}
	}
}


/**
 * SVGs.
 */
svg.qp-viewports-svg {
	&.view {
		.cls-1 {
			fill: none;
			stroke: #000;
			stroke-miterlimit: 10;
			stroke-width: 80px;
		}
		.cls-2 {
			fill: #000;
		}
		.cls-3 {
			opacity: 0;
		}
	}

	&.edit {
		.cls-1 {
			fill: none;
			stroke: #000;
			stroke-miterlimit: 10;
			stroke-width: 80px;
		}
		.cls-2 {
			fill: #000;
		}
		.cls-3 {
			opacity: 0;
		}
	}

	&.cls-3 {
		stroke-linecap: square;
	}
	&.cls-4{
		stroke-linecap: round;
	}
}

button.is-editing {
	svg.qp-viewports-svg {
		&.edit {
			.cls-3 {
				opacity: 1;
			}
		}
	}
}

svg.logo {
	.cls-1 {
		fill: none;
		stroke: #013;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 14.2px;
	}
}

svg.keyframe {
	.cls-left {
		fill: currentColor;
	}

	.cls-right {
		fill: transparent;
	}

	.cls-outer {
		fill: currentColor;
	}
}


/**
 * Highlights - General.
 */
.qp-viewports-highlight-wrap {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	user-select: none;
	pointer-events: none;
	z-index: 1;

	.qp-viewports-highlight {
		position: absolute;
		border: 1px dashed var( --wp-admin-theme-color );;
	}
}


/**
 * Visualizer - General.
 */
.block-editor__spacing-visualizer {
	transition: opacity 0.2s ease 0.1s;

	&:not( .hovered ) {
		opacity: 0;
	}
}


/**
 * Indicator Controls.
 */
.qp-viewports-indicator-controls {
	display: flex;
	margin-top: -39px !important;
	margin-bottom: auto !important;
	margin-right: 10px !important;

	&.property-border-shadow {
		grid-row: 1;
	}

	&.property-dimensions-spacing {
		grid-row: 1;
	}
}


/**
 * Indicator - General.
 */
.interface-interface-skeleton__sidebar {
	.components-tools-panel {
		&.has-viewports {
			.components-tools-panel-header {
				button.indicator {
					background: #212124;
				}
			}
		}

		.components-tools-panel-header {
			position: relative;
			margin: 0 -16px !important;
			padding: 0 16px !important;
			width: auto;

			& > h2 {
				order: 1;
				white-space: nowrap;

				span {
					display: flex;
					align-items: center;
				}

				svg {
					position: static !important;
				}

				.components-dropdown {
					display: none;
				}
			}

			& > .qp-viewports-indicator-wrap {
				order: 3;
			}

			& > .components-dropdown {
				order: 2;
			}
		}

		.qp-viewports-indicator-wrap {
			display: flex;
			flex-direction: row;
			flex-shrink: 0;
			margin-left: auto;
			margin-top: 0;
			margin-right: 16px;

			.qp-viewports-indicator {
				position: relative;

				&:first-child {
					button {
						border-radius: 3px 0 0 3px !important;
					}
				}

				&:last-child {
					button {
						border-radius: 0 3px 3px 0 !important;
						border-right: 1px solid #949494 !important;
					}
				}

				& > svg,
				& > .dashicon {
					position: absolute;
					display: block;
					left: -1px;
					right: 0;
					height: auto;
					text-align: center;
					font-size: 16px;
					height: auto;
					width: auto;
					color: #949494;

					&.dashicons-arrow-up {
						bottom: -5px;
					}

					&.dashicons-arrow-down {
						top: -6px;
					}
				}

				button {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 30px;
					height: 30px;
					min-width: 30px;
					padding: 0;
					color: #919191;
					border: 1px solid #949494 !important;
					border-right: none !important;
					border-radius: 0 !important;

					svg,
					.dashicon {
						font-size: 16px;
						height: auto;

						&.global {
							margin-top: 1px;
						}
					}
				}

				&.is-active {
					button {
						background-color: #212121;
						border-color: #212121 !important;
						color: #fff;
					}

					& > svg,
					& > .dashicon {
						color: #fff;
					}
				}

				&.is-editing {
					button {
						border-color: var( --wp-admin-theme-color ) !important;
					}

					&.is-active {
						button {
							background-color: var( --wp-admin-theme-color ) !important;
							color: #fff;
						}

						& > svg,
						& > .dashicon {
							color: #fff;
						}
					}

					& > svg,
					& > .dashicon {
						color: var( --wp-admin-theme-color );
					}
				}

				&.has-changes {
					&::after {
						content: "";
						position: absolute;
						bottom: -12px;
						left: 0;
						display: block;
						width: 8px;
						height: 8px;
						background: var( --wp-admin-theme-color );
						border-radius: 5px 0px 5px 5px;
						transform: rotate(-45deg);
					}
				}

				&.has-removes {
					&::before {
						content: "";
						position: absolute;
						bottom: -12px;
						right: 0;
						display: block;
						width: 8px;
						height: 8px;
						background: var( --wp--preset--color--vivid-red );
						border-radius: 5px 0px 5px 5px;
						transform: rotate(-45deg);
					}
				}

				&.has-saves {
					button {
						&::after {
							content: "";
							position: absolute;
							bottom: -12px;
							left: 50%;
							display: block;
							width: 8px;
							height: 8px;
							background: #949494;
							border-radius: 5px 0px 5px 5px;
							transform: translateX( -50% ) rotate( -45deg );
						}
					}
				}
			}
		}
	}
}


// Special case for min-height positioning.
.interface-interface-skeleton__sidebar {
	.dimensions-block-support-panel {
		fieldset.block-editor-height-control {
			position: relative;

			.qp-viewports-indicator-wrap {
				position: absolute;
				top: -32px;
				right: 0;
			}
		}
	}
}


/**
 * Indicator - Controls.
 */
.qp-viewports-indicator-controls {
	outline-color: #000;

	.components-popover__content {
		min-width: 292px;
		box-shadow: 0 0 0 1px #919191,0 2px 3px #0000000d,0 4px 5px #0000000a,0 12px 12px #00000008,0 16px 16px #00000005
	}

	.qp-viewports-indicator-controls-head {
		display: flex;
		border-bottom: 1px solid #919191;

		.qp-viewports-toggle-edit {
			width: calc( 100% - 40px );
			padding: 14px;
			margin: 0;
			cursor: pointer;
		}

		button.close {
			width: 44px;
			height: 44px;
			margin: 1px;
		}
	}

	.controls-style-placeholder {
		padding: 40px 0;
		margin: 10px;
		border: 1px solid;
		text-align: center;
		border-radius: 3px;
	}

	&.dark {
		outline-color: #000;

		.components-popover__content {
			background: #212121;
		}

		.qp-viewports-indicator-controls-head {
			.qp-viewports-toggle-edit {
				color: #919191;

				&:hover {
					color: #fff;
				}
			}

			button.close {
				color: #919191;

				&:hover {
					color: #fff;
				}
			}
		}

		.controls-style-placeholder {
			color: #919191;
		}
	}
}


/**
 * Keyframes.
 */
@keyframes highlightWhite {
	0% {
		background-color: #fff;
	}
	25% {
		background-color: #c2c7c9;
	}
	50% {
		background-color: #fff;
	}
	75% {
		background-color: #c2c7c9;
	}
	100% {
		background-color: #fff;
	}
}

@keyframes highlightDark {
	0% {
		background-color: #212124;
	}
	25% {
		background-color: #35363a;
	}
	50% {
		background-color: #212124;
	}
	75% {
		background-color: #35363a;
	}
	100% {
		background-color: #212124;
	}
}