.radio {
	.radio-label {
		display: block;
		position: relative;
		padding-left: 30px;
		margin-bottom: 12px;
		cursor: pointer;
		font-size: 14px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		input {
			position: absolute;
			opacity: 0;
			cursor: pointer;
			&:checked {
				~ {
					.checkmark {
						background-color: var(--primary);
						border: 1px solid var(--primary);
						&:after {
							display: block;
						}
					}
				}
			}
		}
		/* &:hover {
			input {
				~ {
					.checkmark {
						background-color: #f5f8ff;
					}
				}
			}
		} */
		.checkmark {
			&:after {
				top: 2px;
				left: 2px;
				width: 14px;
				height: 14px;
				border-radius: 50%;
                border: 2px solid var(--bg-white);
				background: var(--primary);
			}
		}
	}
	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 20px;
		width: 20px;
		background-color: transparent;
		border-radius: 50%;
		border: 1px solid var(--primary);
		&:after {
			content: "";
			position: absolute;
			display: none;
		}
	}
    &.square-radio {
        .radio-label {
            .checkmark {
                border-radius: 0;
                &:after {
                    border-radius: 0;
                    width: 18px;
                    height: 18px;
                    top: 0;
                    left: 0;
                }
            }
        }
    }
    &.circle-radio {
        .radio-label {
            .checkmark {
                border-radius: 50%;
                &:after {
                    border-radius: 50%;
                    width: 18px;
                    height: 18px;
                    top: 0;
                    left: 0;
                }
            }
        }
        &.style-1{
            .checkmark {
                &:after {
                    border: 0;
                }
            }    
        }
    }
}
