@media screen and (max-width: 782px) {

	.auto-fold .media-modal.wp-core-ui,
	.media-modal-backdrop {
		margin-left: 0 !important;
	}
}

@media screen and (max-width: 960px) {

	.auto-fold .media-modal.wp-core-ui,
	.media-modal-backdrop {
		margin-left: 36px;
	}
}

.media-modal.wp-core-ui {
	margin-left: 160px;
	margin-top: var(--wp-admin--admin-bar--height, 32px);
	z-index: 99;

	.media-modal-content {
		filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
		box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
		border: 1px solid #dcdcde;
		border-radius: 0.5rem;
	}
}

.media-modal-backdrop {
	margin-left: 160px;
	margin-top: var(--wp-admin--admin-bar--height, 32px);
	background-color: #fff;
	z-index: 90 !important;
}

.folded .media-modal.wp-core-ui {
	margin-left: 36px;
}

.folded .media-modal-backdrop {
	margin-left: 36px;
}

#easydam-video-player {

	margin: auto;
	max-height: 500px;

	.vjs-control-bar {
		display: var(--is-controls-visible, flex);
		z-index: 8;
	}
}

.godam-link {
	text-decoration: none;
	color: #AB3A6C;

	&:hover {
		text-decoration: underline;
	}
}

.godam-collapsible-section {
	border: 1px solid #e2e8f0;
	border-radius: 0.75rem;
	background: #fff;
	overflow: hidden;

	&__header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.85rem 1rem;
		border: 0;
		background: #f8fafc;
		color: #1e293b;
		font-size: 0.85rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		cursor: pointer;
		transition: background-color 0.15s ease;

		&:hover {
			background: #f1f5f9;
		}

		&:focus-visible {
			outline: 2px solid #ab3a6c;
			outline-offset: -2px;
		}

		&.is-open {
			border-bottom: 1px solid #e2e8f0;
			background: #f1f5f9;
		}
	}

	&__body {
		padding: 1rem;
	}
}

.slider {
	position: relative;
	height: 12px;

	.slider-input {
		cursor: pointer;
		padding: 0;
		margin: 0;
		-webkit-appearance: none;
		width: 100%;
		height: 12px;
		background: #ddd;
		outline: none;
		opacity: 0.7;
		-webkit-transition: .2s;
		transition: opacity .2s;
		border: none;
		position: relative;
		border-radius: 4px;

		&::before {
			content: '';
			background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
			;
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: var(--progress-value, 0%);
			border-radius: 4px;
		}

		&:hover {
			opacity: 1;
			transform: scaleY(1.2);
		}

		&::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 0;
			height: 12px;
			background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
			;
			cursor: pointer;
		}

		&::-moz-range-thumb {
			width: 0;
			height: 12px;
			border-radius: 50%;
			background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
			;
			cursor: pointer;
		}
	}

	.slider-input[disabled] {
		background: #ddd;
	}

	.tooltip {
		position: absolute;
		background: #fff;
		padding: 0.25rem;
		border-radius: 0.25rem;
		transform: translate(-50%, 0);
		border: 1px solid #ddd;
	}

	.layer-indicator {
		position: absolute;
		top: 0;
		width: 8px;
		height: 18px;
		background-color: rgb(255, 177, 31, 0.8);
		border-radius: 2px;
		cursor: pointer;
		user-select: none;

		&.hotspot-indicator {

			&:hover {
				background-color: rgb(255, 177, 31, 0.5);
			}
		}

		&--container {
			position: relative;
			// display: none;


			.icon {
				position: absolute;
				top: -2.25rem;
				left: 4px;
				transform: translate(-50%, 0);
				font-size: 12px;
				background-color: #fff;
				border-radius: 100px;
				padding: 0.25rem;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
				z-index: 1;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				white-space: nowrap;
				gap: 0.25rem;

				&.active {
					background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, rgb(56, 88, 233, 0.8)));
					fill: #fff;
					color: #fff;
					box-shadow: 0 0 10px rgb(56, 88, 233, 0.6);

					&::after {
						background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, rgb(56, 88, 233, 0.8)));
					}
				}

				div {
					align-items: center;
					flex-wrap: nowrap;
					white-space: nowrap;
					gap: 0.25rem;
					display: none;
					padding-right: 1px;
				}

				&::after {
					z-index: -1;
					content: '';
					position: absolute;
					bottom: -4px;
					left: 50%;
					width: 12px;
					height: 12px;
					transform: translate(-50%, 0) rotate(45deg);
					background-color: #fff;
				}
			}

			// Add-on layer icon (e.g. WooCommerce) rendered as <img>.
			// Matches the intrinsic 24x24 size of the WordPress <Icon> SVG component.
			.layer-indicator__addon-icon {
				width: 20px;
				height: 20px;
				display: block;
				flex-shrink: 0;
				margin: 2px;
			}

			.info {
				position: absolute;
				bottom: -3rem;
				left: 4px;
				font-size: 12px;
				padding: 0.25rem;
				background-color: #fff;
				border-radius: 0.25rem;
				transform: translate(-50%, 0);
				border: 1px solid #ddd;
				z-index: 1;
				align-items: center;
				flex-wrap: nowrap;
				white-space: nowrap;
				display: none;
			}
		}

		&:hover {
			background-color: rgb(255, 177, 31);
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			z-index: 99;
			width: var(--hover-width, 8px);

			.layer-indicator--container {
				display: block;

				.icon {
					border-radius: 0.5rem;

					div {
						display: flex;
					}
				}

				.info {
					display: flex;
				}
			}
		}
	}

	.chapter-indicator {

		&--duration {
			display: none;
		}

		&--text {
			position: absolute;
			left: 50%;
			bottom: -20px;
			font-size: 11px;
			white-space: nowrap;
		}

		&:hover {

			.chapter-indicator--duration {
				display: block;
				position: absolute;
				top: -20px;
				left: 50%;
				white-space: nowrap;
				font-size: 11px;
			}

			.chapter-indicator--text {
				max-width: var(--hover-width, 8px);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}

#root-video-editor {

	.godam-settings-header-content {

		@media (max-width: 420px) {
			padding-left: 4px;
			padding-right: 14px;
		}
	}

	.components-button.has-icon.has-text {

		@media (max-width: 640px) {
			padding: .75rem 0.75rem;
		}
	}
}

.godam-video-list__video__thumbnail__overlay__menu {

	.components-button.has-icon.has-text {
		justify-content: flex-start !important;
	}
}

.easydam-settings {

	&-header {
		background: #fff;
	}
}

.disabled .components-combobox-control__suggestions-container {
	pointer-events: none;
	opacity: 0.5;
}

.jetpack-form-preview .wp-block-jetpack-contact-form-container,
.forminator-ui {
	pointer-events: none;
}

#branding-icon {
	order: 9;
}
