opal-components/src/components/opal-radio-group/opal-radio-button/index.css

[Rionite](https://github.com/Riim/Rionite) component set.

@component OpalRadioButton {
	position: relative;
	display: inline-block;

	@el label {
		&:hover {
			@el control {
				border-color: hsl(0,0%,54%);

				&:focus {
					border-color: hsl(208,100%,60%);
				}
			}
		}
	}
		@el input {
			display: none;
		}

		@el control {
			position: relative;
			top: -1px;
			display: inline-block;
			box-sizing: border-box;
			width: 22px;
			height: 22px;
			border: 2px solid hsl(0,0%,64%);
			border-radius: 50%;
			background: #fff;
			vertical-align: middle;
			user-select: none;

			&:focus {
				outline: none;
				border-color: hsl(208,100%,60%);
			}
		}

		@el content-slot {
		}

	@mod checked {
		@el control {
			&::before {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #000;
				content: '';
			}
		}
	}

	@mod disabled {
		opacity: .5;
		pointer-events: none;

		@el control {
			background: hsl(0,0%,90%);
		}
	}
}