/********************************************************/
/*
/*     Scrollspy Nav CSS
/*
/********************************************************/
.wp-block-cke-scrollspy-nav,
:is(.edit-post-visual-editor, .editor-styles-wrapper) .is-root-container > .wp-block-cke-scrollspy-nav {
	width: 100% !important;
	max-width: var(--wp--style--global--wide-size) !important;
}

.wp-block-cke-scrollspy-nav {
	--block-height: 0px;
	--cutoff: calc( 100svh / 6 );
	
	display: flex;
	justify-content: start;
	align-items: stretch;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--2);
	row-gap: var(--wp--preset--spacing--0-50);
	position: relative;
	top: var(--wp--preset--spacing--2);
	height: auto;
	margin-block-start: var(--wp--preset--spacing--3) !important;
	counter-reset: anchorLinksCount;
	z-index: 3;
}

.wp-block-cke-scrollspy-nav.ready {
	position: sticky;
	margin-block-end: var(--wp--preset--spacing--1-5);
	/* margin-block-end: calc(var(--block-height) * -1); */
}

.wp-block-cke-scrollspy-nav + :not(.wp-block-cke-anchor),
.wp-block-cke-scrollspy-nav + .wp-block-cke-anchor + :not(.wp-block-cke-anchor) {
	margin-block-start: 0 !important;
}

.wp-block-cke-scrollspy-nav .anchor-link,
.wp-block-cke-scrollspy-nav .anchor-link::before {
	line-height: 1;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .3s;
	user-select: none;
}

.wp-block-cke-scrollspy-nav .anchor-link {
	display: flex;
	align-items: center;
	min-height: 60px;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--alabaster-white);
	background-color: var(--wp--custom--color--default--accent);
	padding-inline: 0 var(--wp--preset--spacing--4);
	margin-block-start: unset;
	border-radius: 7.5px 7.5px 35px 7.5px;
	overflow: clip;
	white-space: break-spaces;
	word-break: keep-all;
	counter-increment: anchorLinksCount;
}

.wp-block-cke-scrollspy-nav .anchor-link::before {
	content: counter(anchorLinksCount);
	display: flex;
	align-items: center;
	height: 100%;
	font-size: var(--wp--preset--font-size--large);
	background-color: var(--wp--preset--color--guardsman-red);
	padding-block: var(--wp--preset--spacing--1);
	padding-inline: var(--wp--preset--spacing--0-75);
	margin-inline-end: var(--wp--preset--spacing--3);
	box-sizing: border-box;
}

.wp-block-cke-scrollspy-nav .anchor-link:is(.active, :hover, :focus, :active) {
	background-color: var(--wp--preset--color--gravel-gray);
}

.wp-block-cke-scrollspy-nav .anchor-link:is(.active, :hover, :focus, :active)::before {
	background-color: var(--wp--preset--color--mine-shaft-black);
}

/* Background support */
.wp-block-post-content > .wp-block-group > .has-background:not(.alignfull) {
	position: relative;
}

.wp-block-post-content > .wp-block-group > .has-background:not(.alignfull)::before {
	content: '';
	position: absolute;
	top: 0;
	left: calc((var(--wp--custom--viewport-width) - 100%) / 2 * -1);
	width: var(--wp--custom--viewport-width);
	height: 100%;
	background-color: inherit;
	z-index: -1;
}

/******************************/
/* Backend style
/******************************/
:is(.edit-post-visual-editor, .editor-styles-wrapper) .wp-block-cke-scrollspy-nav {
	position: relative !important;
	top: unset;
	margin-block-start: var(--wp--preset--spacing--3) !important;
}

:is(.edit-post-visual-editor, .editor-styles-wrapper) .wp-block-cke-scrollspy-nav .editor-msg {
	text-align: center;
	margin-block: unset;
	margin-inline: auto;
}

/******************************/
/* Responsive
/******************************/
@media (width <= 1400px) {
	.wp-block-cke-scrollspy-nav {
		column-gap: var(--wp--preset--spacing--0-50);
	}
	
	.wp-block-cke-scrollspy-nav .anchor-link > a {
		padding: var(--wp--preset--spacing--0-50);
	}
}

@media (width <= 800px) {
	.wp-block-cke-scrollspy-nav.ready {
		position: relative; top: 0;
	}
}