/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */




// Mixin dla pustego bloku w edytorze:
// brak inner bloków realnych (nie appender) i brak innych dzieci poza bg/edytorem
@mixin atn-editor-is-empty {
	&:not(:has(> .block-editor-inner-blocks > .block-editor-block-list__layout > [data-block]:not(.block-list-appender))) {
		@content;
	}
}

.wp-block-animatikon-parallaxgroup {
	border: 1px dotted #f00;
	visibility: visible;

	// Desktop: brak custom height → pusty blok dostaje min-height 200px
	&:not(.atn-has-custom-height-d) {
		@include atn-editor-is-empty {
			min-height: 200px;
		}
	}

	// Tablet i Mobile: gdy jest custom height → zeruj min-height z desktopa;
	// gdy brak custom height → zachowaj 200px.
	// Uwaga: w edytorze nie ma media queries (edytor działa bez responsive breakpointów CSS),
	// więc klasy per-urządzenie wystarczą — edytor przełącza je przez JS (blockProps).
	&.atn-has-custom-height-d {
		@include atn-editor-is-empty {
			min-height: 0;
		}
	}

	&.is-stacked {
		> .block-editor-inner-blocks > .block-editor-block-list__layout {
			display: grid;
			align-items: start;

			> .wp-block {
				grid-area: 1 / 1;
				z-index: var(--animatikon-stack-z, 0);
				width: 100%;
				margin: 0;

				&.alignleft {
					justify-self: start;
					width: auto;
				}
				&.aligncenter {
					justify-self: center;
					width: auto;
				}
				&.alignright {
					justify-self: end;
					width: auto;
				}
			}
		}
	}

	&:not(.is-stacked) {
		> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
			&.alignleft {
				align-self: flex-start;
				margin-right: auto !important;
				margin-left: 0 !important;
				width: auto;
			}
			&.aligncenter {
				align-self: center;
				margin-left: auto !important;
				margin-right: auto !important;
				width: auto;
			}
			&.alignright {
				align-self: flex-end;
				margin-left: auto !important;
				margin-right: 0 !important;
				width: auto;
			}
		}
	}


	&.is-vertically-aligned-top {
		> .block-editor-inner-blocks > .block-editor-block-list__layout {
			align-items: start;
		}
	}

	&.is-vertically-aligned-center {
		> .block-editor-inner-blocks > .block-editor-block-list__layout {
			align-items: center;
		}
	}

	&.is-vertically-aligned-bottom {
		> .block-editor-inner-blocks > .block-editor-block-list__layout {
			align-items: end;
		}
	}

	// Kontener inner blocks musi być zawsze ponad warstwami tła (które mają z-index: 0, 1, 2, …).
	// Używamy dużej wartości, żeby nie zależeć od liczby warstw tła.
	> .block-editor-inner-blocks {
		z-index: 100;
	}
}

// Panel tła – lista warstw w Inspektorze
.animatikon-bg-layers {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 24px;
	margin-bottom: 24px;

	.animatikon-bg-layer {
		border: 1px solid #ddd;
		// border-radius: 4px;
		padding: 10px;
		// background: #f9f9f9;

		.animatikon-bg-layer-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 8px;

			span {
				font-size: 12px;
				font-weight: 600;
				color: #1e1e1e;
			}
		}

		.animatikon-bg-layer-preview {
			width: 100%;
			height: 60px;
			object-fit: cover;
			border-radius: 3px;
			margin-bottom: 8px;
			display: block;
		}

		.animatikon-bg-layer-upload {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 6px;
		}
	}
}