@use 'theme';

@mixin canonical {
	appearance: none;
	display: inline-grid;
	place-content: center;
	vertical-align: middle;
	inline-size: 20px;
	block-size: 20px;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	background: #fff;
	border: 1.5px solid theme.$control-border;
	border-radius: 5px;
	box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
	cursor: pointer;

	&:focus {
		outline: 2px solid var(--wp-admin-theme-color);
	}

	&::before {
		content: none;
	}

	&:checked {
		background: theme.$accent;
		border-color: theme.$accent;

		&::before {
			content: '';
			inline-size: 20px;
			block-size: 20px;
			margin: 0;
			background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat;
		}
	}
}