.si-radio {
	position: relative;
	cursor: pointer;
	white-space: nowrap;
	display: inline-block;

	.si-radio__input {
		display: inline-block;
		vertical-align: bottom;
		position: relative;
		width: 20px;
		height: 20px;
		margin: 0;
		padding: 0;
		border-radius: 50%;
		.si-radio__original {
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			opacity: 0;
		}

		.si-radio__effect {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			border-radius: inherit;

			&:after {
				position: absolute;
				display: block;
				box-sizing: border-box;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				border: 2px solid hsla(var(--si-text), 0.4);
				border-radius: inherit;
				box-shadow: 0 0 0 0 hsla(var(--si-color), 0.4);
				content: '';
				transition: all 0.25s ease;
			}
		}
	}

	.si-radio__label {
		margin: 0 6px;
	}

	&:hover {
		.si-radio__effect {
			&::after {
				border: 2px solid hsla(var(--si-text), 0.2);
			}
		}
	}
	&:focus {
		.si-radio__effect {
			&::after {
				border: 2px solid hsla(var(--si-color), 1);
			}
		}
	}
	&.checked {
		.si-radio__input {
			.si-radio__effect {
				&:after {
					border: 7px solid hsla(var(--si-color), 1);
					box-shadow: 0px 3px 12px 0px hsla(var(--si-color), 0.3);
				}
			}
		}
	}

	& + & {
		margin-left: 0.5em;
	}
}