// Hide an element accesibly instead of using display: none;
// Source: https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-editor/src/components/responsive-block-control/style.scss#L1
@mixin hide-accesibly {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

@mixin post-meta-icon {
	display: flex;
	flex-wrap: wrap;
	&:before {
		align-self: center;
		content: '';
		display: inline-block;
		margin-right: calc(0.5 * var(--wp--custom--gap--baseline) );
		height: 16px;
		width: 16px;
		mask-size: contain;
		-webkit-mask-size: contain;
		mask-repeat: no-repeat;
		-webkit-mask-repeat: no-repeat;
		background-color: currentColor;
	}
}

@mixin post-meta-with-separator( $content ) {
	&.wp-block-group {
		gap: 0;
	}

	> * {
		&:not(:first-child):before {
			color: var(--wp--custom--color--foreground);
			content: $content;
			margin-left: var(--wp--custom--gap--baseline);
			margin-right: var(--wp--custom--gap--baseline);
		}
	}
}