/* scss/Atoms/_Radio.scss */

label.radio {
	display: flex;
	align-items: center;
	padding: 0;
	
	input[type="radio"] {
		@include appearance(none);
		border: 1px solid $tertiary-color-1;
		width: 2em;
		height: 2em;
		margin-right: 1em;
		cursor: pointer;
		@include borderRadius(20em);
		
		&:hover {
			border-color: $link-active-color;
		}

		 &:checked {
			border-color: $link-active-color;
			color: $link-active-color;
			font-weight: bold;

			&::before  {
				content: " ";
				align-self: center;
				position: relative;
				display: inline-block;
				width: 12px;
				height: 12px;
				@include borderRadius(50em);
				background-color: $link-active-color;
				
			}
		}

		&:checked+label {
				font-weight: 700;
			}
	}

	&[disabled] {
			opacity: 0.5;
			cursor: initial;
		}
}

input[type="radio"] {
		@include appearance(none);
		border: 1px solid $tertiary-color-1;
		width: 2em;
		height: 2em;
		margin-right: 1em;
		cursor: pointer;
		@include borderRadius(20em);
		
		&:hover {
			border-color: $link-active-color;
		}

		 &:checked {
			border-color: $link-active-color;
			color: $link-active-color;
			font-weight: bold;

			&::before  {
				content: " ";
				align-self: center;
				position: relative;
				display: block;
				width: 12px;
				height: 12px;
				@include borderRadius(50em);
				background-color: $link-active-color;
			    top: 17%;
    			left: 19%;
			}
		}

	}