.blocksy-hook-indicator,
.ct-customizer-shortcut {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

// hooks locations
.blocksy-hook-indicator {
	position: relative;
	padding: 6px 30px 6px 10px;
	color: #614a00;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: initial;
	text-transform: lowercase;
	word-break: break-word;
	text-align: left;

	// background: rgba(255, 205, 5, 0.4);
	background: #ffebac;
	border-radius: 3px;
	border: 1px dashed #eabc4b;

	&.blocksy-woo-indicator {
		color: #6d4665;
		background: #e4afc9;
		border-color: #8a6282;
	}

	span {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		opacity: 0.5;
		transition: opacity 0.15s ease;

		&:before {
			font-family: dashicons;
			content: '\f464';
			font-size: 17px;
			line-height: 17px;
			cursor: pointer;
		}
	}

	&:hover span {
		opacity: 1;
	}
}

// indicator spacing
.blocksy-hook-indicator {
	margin: 15px var(--hook-side-margin, 0);

	&[data-type*='full'] {
		--hook-side-margin: 15px;
	}

	&:not([data-type*='top-margin']) {
		&:first-child {
			margin-top: 0;
		}
	}

	&:not([data-type*='bottom-margin']) {
		&:last-child {
			margin-bottom: 0;
		}
	}
}

.ct-container {
	.blocksy-hook-indicator[data-type*='full'] {
		--hook-side-margin: 0;
	}
}

// customizer utilities
body [data-customize-hide] {
	display: none !important;
}

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

	// disable shortcuts on mega menu container
	// over wise it will break the preview in customizer because of "postion: relative"
	&:has([class*='ct-mega-menu']) {
		position: initial;
	}
}

.ct-customizer-shortcut {
	position: absolute !important;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff !important;
	margin: 0 !important;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s 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.2s ease, opacity 0.2s ease, transform 0.2s ease;

	> .ct-customizer-shortcut {
		top: var(--ui-top, 0px);
		inset-inline-start: 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: var(--ui-accent-color, #2271b1);
		border-radius: 0 0 2px 0;
	}

	&:hover {
		outline-color: var(--ui-accent-color, #2271b1);

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

[data-shortcut*='outside'] {
	--ui-outlineOffset: 0px;
}

[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% - #{calc($drop-size / 2)});
		inset-inline-end: -5px;
		width: $drop-size;
		height: $drop-size;
		transform: translateX(100%);

		@media (max-width: 690px) {
			display: none;
		}

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

		&:before {
			top: 0;
			inset-inline-start: 0;
			width: inherit;
			height: inherit;
			background: var(--ui-accent-color, #2271b1);
			border-radius: 100% 100% 100% 2px;
			transform: rotate(45deg);
		}

		&:after {
			inset-inline-start: -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));
		}
	}
}


// customizer partial refresh
.customize-partial-refreshing {
	opacity: 0.25 !important;
}


// admin bar shift when overlay opens
[data-panel] #wpadminbar {
	padding-inline-end: var(--scrollbar-width, 0px);
}


// search live results helper
.ct-search-form {
	&:not([data-live-results*='thumbs']) .ct-media-container {
		display: none;
	}

	&:not([data-live-results*='product_price']) .price {
		display: none;
	}

	&:not([data-live-results*='product_status']) .stock-status {
		display: none;
	}
}


// content blocks
#wp-admin-bar-blocksy_preview_hooks .ct-hidden {
	display: none;
}

#wp-admin-bar-blocksy_preview_hooks {

	#wp-admin-bar-blocksy_preview_hooks_theme:not(:first-child) {
		border-block-start: 1px solid #464b50;
		margin-block-start: 6px;
	}

	.ab-item {
		&:has(.ct-scroll-to) {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.ct-scroll-to {
			display: flex;
			cursor: pointer;
			line-height: 1;
			padding: 4px;
			margin-inline-start: auto;
			border-radius: 3px;
			background-color: rgba(255, 255, 255, 0.1);

			&:hover {
				color: #fff;
				// background-color: rgba(255, 255, 255, 0.2);
				background-color: #72aee6;
			}
		}
	}
}

[data-block*='highlight'] {
	border-radius: 1px;
	outline: 2px solid var(--theme-palette-color-2);
	outline-offset: 7px;
}


// filters table regeneration notice
.ct-filter-widget-admin-notice {
	--box-padding: 20px;
	--box-text-color: #58534d;
	--box-accent-color: #fddf67;

	font-size: 14px;
	color: var(--box-text-color);
	border-radius: 5px;
	background: var(--box-accent-color);


	.ct-notice-heading {
		display: flex;
		gap: 8px;
		align-items: center;
		font-size: 14px;
		font-weight: 600;
		color: #9f6000;
		padding: 18px var(--box-padding);
	}


	.ct-notice-content {
		background: #fff;
		border-radius: 4px;
		margin: 0 2px 2px 2px;
		padding: calc(var(--box-padding) + 5px) var(--box-padding);
	}


	.ct-notice-text {
		margin-top: var(--box-padding);
	}


	.ct-notice-progress-bar-heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;
		font-size: 13px;
	}

	.ct-notice-progress-bar {
		height: 5px;
		border-radius: 3px;
		background: rgba(0, 0, 0, 0.05);

		span {
			display: block;
			height: 100%;
			border-radius: 3px;
			background: var(--box-accent-color);
			transition: width 0.2s ease;
		}
	}

	.ct-notice-buttons-group {
		margin-top: calc(var(--box-padding) + 5px);
		margin-inline: calc(var(--box-padding) * -1);
		padding: calc(var(--box-padding) + 5px) var(--box-padding) 0 var(--box-padding);
		border-top: 1px solid var(--box-accent-color);

		a {
			display: flex;
			align-items: center;
			gap: 7px;
			text-decoration: underline;

			--theme-link-initial-color: var(--box-text-color);
			--theme-link-hover-color: #9f6000;

			&:not(:last-child) {
				margin-bottom: 3px;
			}
		}
	}
}