/* FILE: _extend/_others.scss */

%badge_posts_count {
	display: inline-block;
	width: var(--theme--css--posts-count-badge-size);
	height: var(--theme--css--posts-count-badge-size);
	font-size: $ratio_maj + rem;
	font-weight: 400;
	font-style: normal;
	line-height: var(--theme--css--posts-count-badge-size);
	letter-spacing: 0;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-radius: 6em;
	vertical-align: top;
	overflow: hidden;
	cursor: help;

	.is-style-buttons-inline & {
		position: absolute;
		inset-inline-end: 0;
		inset-block-start: 0;
		margin: calc( var(--theme--css--posts-count-badge-size) / -4 );
		background: var(--theme--css--button--color--background);
		color: var(--theme--css--button--color--text);
		border-color: var(--theme--css--button--color--border);
		box-shadow: 0 .25em 1em rgba( #000, .2 );
	}
}

%button_outline {

	:root :where( & ) {
		--theme--css--button--color--background: transparent;
		--theme--css--button--color--text: currentColor;
		--theme--css--button--color--border: currentColor;
		--wp--custom--button--border--width: var(--wp--custom--button--border--width-outline);
	}

	// Need to override CSS produced by WordPress from `theme.json/styles.elements.button`.
	padding-top:    var( --theme--css--button--padding--top,    1.25em );
	padding-right:  var( --theme--css--button--padding--right,  1.5em  );
	padding-bottom: var( --theme--css--button--padding--bottom, 1.25em );
	padding-left:   var( --theme--css--button--padding--left,   1.5em  );
	background: var(--theme--css--button--color--background);
	color: var(--theme--css--button--color--text);
	border-radius: var(--wp--custom--button--border--radius);
}

%current_menu_item {

	&::before {
		content: '';
		display: inline-block;
		width: $ratio_min + em;
		height: $ratio_min + em;
		margin-inline-end: .2em;
		background: var(--theme--css--current-menu-item--decoration--color);
		border-radius: $ratio_min + em;
		border-start-start-radius: 0;
		border-end-start-radius: 0;
	}
}

%featured_item {
	position: relative;
	isolation: isolate;

	&::before {
		content: '';
		position: absolute;
		inset-inline-start: -$ratio_min + em;
		inset-block-start:  -$ratio_min + em;
		width: 1em;
		height: 1em;
		border-radius: 1em;
		background: var(--wp--preset--color--secondary);
		z-index: -1;
	}
}

%dropcap {
	// IMPORTANT: Keep in mind that `lh` in padding is local, not the wrapper one!
	padding: calc( .25lh - var(--wp--custom--border-width--dropcap) ) .5ch;
	margin: 0; // Required to reset WordPress dropcap style.
	margin-inline-end: .25ch;
	border: var(--wp--custom--border-width--dropcap) solid;

	// WordPress dropcap overrides:
		font-size: 1.33lh;
		font-weight: 700;
		line-height: 1;
}
