// Radio

.c-radio {
	input[type="radio"] {
		-webkit-appearance: none;
		appearance: none;
		background-color: #fff;
		margin: 0;
		color: currentColor;
		border: 1px solid currentColor;
		border-radius: 100%;
		display: grid;
		place-content: center;
		cursor: pointer;

		&.size {
			&-lg {
				width: 24px;
				height: 24px;
			}

			&-md {
				width: 20px;
				height: 20px;
			}

			&-sm {
				width: 16px;
				height: 16px;
			}
		}

		&::before {
			content: "";
			width: 13px;
			height: 13px;
			clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
			transform-origin: center;
			box-shadow: inset 13px 13px #ffffff;
			transition: 120ms transform ease-in-out;
			background-color: CanvasText;
			transform: scale(.6) rotate(10deg);
		}

		&:checked {
			background-color: #5151ff;
			border-color: #5151ff;
		}

		&:disabled {
			color: #959495;
			cursor: not-allowed;
			opacity: .2;
		}
	}

	&__label {
		display: flex;
		align-items: center;
		gap: 16px;
		font-size: 24px;
		font-style: normal;
		font-weight: 600;
		line-height: 38px;
		letter-spacing: 0.75px;
		color: #111;
	}
}


.c-radio1 {
	position: relative;
	width: 16px;
	height: 16px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	background: #d6d8e7;
	border-radius: 100%;

	input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: 0;
		z-index: 9;

		&:checked~.c-radio__checkmark {
			border: 2px solid #40405B;
			width: 12px;
			height: 12px;
			background: #fff;
		}
	}

	&__checkmark {
		position: absolute;
		top: auto;
		left: auto;
		right: 50%;
		bottom: 50%;
		height: 14px;
		width: 14px;
		transform: translate(50%, 50%);
		border-radius: 50%;
	}
}