/* stylelint-disable */
.wp-block-cover.has-cover-slider {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	--coverext-transition-ms: 700ms;
	--coverext-control-bg: rgba(15, 23, 42, 0.45);
	--coverext-progress-track: rgba(255, 255, 255, 0.2);
	--coverext-progress-fill: currentcolor;
}

.cover-extens__controls {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding-block-start: var(--wp--preset--spacing--20, 0.5rem);
	padding-inline: 0;
	color: inherit;
	background: transparent;
}

.cover-extens__controls-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
}

.cover-extens__status {
	display: grid;
	gap: 0.35rem;
	justify-items: stretch;
	min-width: 0;
}

.wp-block-button.is-active .wp-block-button__link {
	/* style left to theme */
}

/* stylelint-enable */

.wp-block-cover.has-cover-slider .cover-extens__media,
.wp-block-cover.has-cover-slider .cover-extens__track,
.wp-block-cover.has-cover-slider .cover-extens__image {
	position: absolute;
	inset: 0;
}

.wp-block-cover.has-cover-slider .cover-extens__media {
	pointer-events: none;
	z-index: 0;
}

.wp-block-cover.has-cover-slider .cover-extens__track {
	z-index: 2;
	display: grid;
	align-content: end;
	gap: 0.35rem;
	padding: clamp(1rem, 2vw, 1.6rem);
	color: inherit;
}

.wp-block-cover.has-cover-slider .cover-extens__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	z-index: 1;
	transition: opacity var(--coverext-transition-ms) ease-in-out;
	will-change: opacity;
}

/* Warstwa aktualnie dochodząca do pełnej nieprzezroczystości musi być nad
   warstwą, którą zastępuje, niezależnie od kolejności wstawienia obu
   warstw do DOM (ta kolejność się nie zmienia, tylko role warstw). Bez tego
   podczas przejścia mogłaby na chwilę pojawić się warstwa spod slidera. */
.wp-block-cover.has-cover-slider .cover-extens__image.is-incoming {
	z-index: 2;
}

.wp-block-cover.has-cover-slider .cover-extens__image.is-visible {
	opacity: 1;
}

/* Chwilowo wyłącza animację opacity, żeby finishTransition() mógł
   natychmiast i atomowo rozliczyć stan warstwy (naturalne zakończenie albo
   wymuszone przerwanie przejścia) bez pozostawiania animacji CSS "w locie"
   w tle. Zdejmowana zaraz po wymuszonym reflow, więc kolejne, zamierzone
   przejścia nadal animują się normalnie. */
.wp-block-cover.has-cover-slider .cover-extens__image.is-snapping {
	transition: none !important;
}

.wp-block-cover.has-cover-slider .cover-extens__slide-title,
.wp-block-cover.has-cover-slider .cover-extens__slide-caption {
	margin: 0;
	color: inherit;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.wp-block-cover.has-cover-slider .cover-extens__slide-title {
	font-size: clamp(1.25rem, 2vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
}

.wp-block-cover.has-cover-slider .cover-extens__slide-caption {
	font-size: clamp(0.9rem, 1.4vw, 1.1rem);
	line-height: 1.35;
	opacity: 0.92;
}

.wp-block-cover.has-cover-slider .cover-extens__slide-description {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cover-extens__nav {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: flex-start;
	pointer-events: none;
	color: inherit;
}

.cover-extens__nav-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(15, 23, 42, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	color: currentcolor;
	pointer-events: auto;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.cover-extens__nav-btn svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentcolor;
	pointer-events: none;
}

.cover-extens__nav-btn:hover {
	background: rgba(255, 255, 255, 1);
	border-color: rgba(15, 23, 42, 0.28);
	transform: translateY(-1px);
}

.cover-extens__nav-btn:disabled,
.cover-extens__nav-btn[aria-disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.cover-extens__nav-btn:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}

.cover-extens__counter {
	margin: 0;
	margin-inline-start: auto;
	justify-self: end;
	display: block;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.cover-extens__progress {
	position: relative;
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 999px;
	background: var(--coverext-progress-track, rgba(15, 23, 42, 0.16));
	overflow: hidden;
}

.cover-extens__progress-fill {
	display: block;
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	width: 0;
	background: var(--coverext-progress-fill, currentColor);
	transition: width var(--coverext-transition-ms) linear;
}

.wp-block-cover.has-cover-slider .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {

	.cover-extens__controls {
		padding-inline: 0;
	}

	.cover-extens__nav {
		display: none !important;
	}

	.cover-extens__counter {
		margin-inline-start: auto;
		font-size: 0.8rem;
	}
}