/* FILE: _extend/_others.scss */
// @version  1.0.7

%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 {
	// From default button padding and `core/button` block styles.
	// @see  custom/_button.scss
	// @see  blocks/button.scss
	padding: 1.125em 1.5em;
	font-family: var(--wp--custom--button--font-family);
	font-size: var(--wp--custom--button--font-size);
	text-align: center;
	text-decoration-line: none;
	border: 2px solid;
	border-radius: var(--wp--custom--button--border-radius);
	box-shadow: var(--wp--preset--shadow--s);
	transition:
		transform .1s linear,
		background .1s linear,
		color .1s linear,
		border .1s linear,
		box-shadow .1s linear;

	&:hover,
	&:focus {
		text-decoration-line: underline;
		text-decoration-style: dashed;
		box-shadow: var(--wp--preset--shadow--m);
		transform: scale(1.05);
	}

	&:active {
		text-decoration-line: underline;
		text-decoration-style: dotted;
		box-shadow: none;
	}
}

%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;
	z-index: 1;

	&::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;
	}
}
