@import (reference) "global";

.ui.grouped {
	.radio, .slider, .toggle {
		padding: 0 0.5em;
	}
}

.ui.radio-group {
	> item {
		display: inline-block;
		padding: 0 0.5em;
		height: auto;
		cursor: pointer;
		input {
			display: none;

			& + label {
				padding: 0 0 0 1.5em;
				display: inline-block;
				position: relative;
				cursor: pointer;
				&:before {
					-webkit-appearance: none;
					background-color: #fafafa;
					border: 1px solid @borderColor;
					border-radius: 50%;
					position: absolute;
					width: 10px;
					height: 10px;
					top: 2px;
					left: 3px;
					content: "";
				}
			}

			&:checked {
				+ label {
					&:before {
						border-color: @primaryColor;
					}
					&:after {
						-webkit-appearance: none;
						background-color: @primaryColor;
						width: 6px;
						height: 6px;
						border-radius: 50%;
						position: absolute;
						top: 5px;
						left: 6px;
						content: "";
					}
				}
			}

		}

		&:hover input:not(:checked) + label {
			&:before {
				border-color: @primaryColor;
			}
		}

	}
}

