@use "../../colors/colors.scss";

@mixin d2l-input-radio() {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 0.5rem 0.5rem;
	border-radius: 50%;
	border-style: solid;
	box-sizing: border-box;
	display: inline-block;
	height: 1.2rem;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	width: 1.2rem;
	&:checked {
		background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%225%22%20fill%3D%22%23494c4e%22%3E%3C/circle%3E%0A%3C/svg%3E");
	}
	&,
	&:hover:disabled {
		background-color: colors.$d2l-color-regolith;
		border-color: colors.$d2l-color-galena;
		border-width: 1px;
	}
	&:hover,
	&:focus {
		border-color: colors.$d2l-color-celestine;
		border-width: 2px;
		outline: none;
	}
	&[aria-invalid="true"] {
		border-color: colors.$d2l-color-cinnabar;
	}
	&:disabled {
		opacity: 0.5;
	}
}