.ct-customizer-preview-cache {
	height: 0 !important;
	display: none !important;
	visibility: hidden !important;
}

[data-customize-hide] {
	display: none !important;
}

// disable transitions
.ct-disable-transitions {
	* {
		transition: none !important;
	}
}

// Customizer shortcuts
[data-shortcut] {
	position: relative;
}

.ct-customizer-shortcut {
	position: absolute !important;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff !important;
	margin: 0 !important;
	opacity: 0;
	visibility: hidden;

	transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease,
		visibility 0.15s ease;

	&:hover {
		color: rgba(255, 255, 255, 0.75);
	}
}

// type border
[data-shortcut*='border'] {
	outline-width: 1px;
	outline-style: var(--ui-outlineStyle, solid);
	outline-offset: var(--ui-outlineOffset, -1px);
	outline-color: transparent;
	transition: outline 0.15s ease;

	> .ct-customizer-shortcut {
		top: var(--ui-top, 0px);
		left: var(--ui-left, 0px);
		width: auto !important;
		height: 28px;
		padding: 0 13px;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		background: #0073aa;
		border-radius: 0 0 2px 0;
	}

	&:hover {
		outline-color: #0073aa;

		> .ct-customizer-shortcut {
			opacity: 1;
			visibility: visible;
		}
	}
}

[data-shortcut='border-dashed'] {
	--ui-outlineStyle: dashed;
	--ui-outlineOffset: 5px;

	> .ct-customizer-shortcut {
		--ui-top: -6px;
		--ui-left: -6px;
	}
}

// type drop
$drop-size: 22px;

[data-shortcut='drop'] {
	> .ct-customizer-shortcut {
		display: flex;
		align-items: center;
		justify-content: center;
		top: calc(50% - #{$drop-size / 2});
		right: -5px;
		width: $drop-size;
		height: $drop-size;
		transform: translateX(100%);

		@include media-breakpoint-down(sm) {
			display: none;
		}

		&:before,
		&:after {
			position: absolute;
			content: '';
		}

		&:before {
			top: 0;
			left: 0;
			width: inherit;
			height: inherit;
			background: #0073aa;
			border-radius: 100% 100% 100% 2px;
			transform: rotate(45deg);
		}

		&:after {
			left: -15px;
			width: calc(100% + #{$drop-size});
			height: calc(100% + #{$drop-size});
		}

		svg {
			position: relative;
			z-index: 1;
			width: 14px;
			height: 14px;
			fill: currentColor;
		}
	}

	&:hover {
		> .ct-customizer-shortcut {
			opacity: 1;
			visibility: visible;
			transform: translateX(calc(100% + 10px));
		}
	}
}