/**
 * Editor-only styles.
 *
 * The editor always uses the scrollable layout — even for the fade effect —
 * so every slide can be reached and edited by scrolling horizontally.
 */

.editor-styles-wrapper {

	.wp-block-oacs-slider {

		&.effect-fade .isb-track {
			display: flex;
			overflow-x: auto;
			scroll-snap-type: x mandatory;

			.isb-slide {
				flex: 0 0 100%;
				min-width: 100%;
				opacity: 1;
				pointer-events: auto;
				scroll-snap-align: start;
			}
		}

		// Unlike the frontend, show a scrollbar as a hint that there are
		// more slides.
		.isb-track {
			scrollbar-width: thin;

			&::-webkit-scrollbar {
				display: block;
				height: 8px;
			}

			&::-webkit-scrollbar-thumb {
				background: rgba(0, 0, 0, 0.3);
				border-radius: 4px;
			}
		}

		.isb-slide {
			position: relative;
		}

		.is-transient img {
			opacity: 0.3;
		}

		.components-spinner {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.isb-editor-image__toolbar {
			position: absolute;
			top: 8px;
			right: 8px;
			z-index: 3;
			display: flex;
			background: #fff;
			border-radius: 2px;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
		}

		.isb-editor-image__link {
			position: absolute;
			top: 8px;
			left: 8px;
			right: 130px;
			z-index: 3;
			max-width: 320px;
			background: #fff;
			padding: 8px;
			border-radius: 2px;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
		}

		figcaption {
			// Keep an easy click target for empty captions.
			min-height: 32px;

			&[data-rich-text-placeholder]::after {
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}
}