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