@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/z-index" as *;

.table-of-contents__popover.components-popover .components-popover__content {
	min-width: 380px;
}

.components-popover.table-of-contents__popover {
	z-index: z-index(".components-popover.table-of-contents__popover");
}

.table-of-contents__popover {
	.components-popover__content {
		padding: $grid-unit-20;

		@include break-small {
			max-height: calc(100vh - 120px);
			overflow-y: auto;
		}
	}

	hr {
		margin: 10px -16px 0;
	}
}

.table-of-contents__wrapper:focus::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
	pointer-events: none;
}

.table-of-contents__counts {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	margin-top: -$grid-unit-10;
}

.table-of-contents__count {
	flex-basis: 33%;
	display: flex;
	flex-direction: column;
	font-size: $default-font-size;
	color: $gray-900;
	padding-right: $grid-unit-10;
	margin-bottom: 0;
	margin-top: $grid-unit-10;

	&:nth-child(4n) {
		padding-right: 0;
	}
}

.table-of-contents__number,
.table-of-contents__popover .word-count {
	font-size: 21px;
	font-weight: 400;
	line-height: 30px;
	color: $gray-900;
}

.table-of-contents__title {
	display: block;
	margin-top: 20px;
	font-size: 15px;
	font-weight: 600;
}