@import "~/styles/partials/variables";
.check--radio {
	.checkbox {
		position: absolute;
		opacity: 0;

		&+label {
			position: relative;
		}

		&+label:before {
			content: "";
			margin-right: 10px;
			display: inline-block;
			vertical-align: text-top;
			width: 15px;
			height: 15px;
			background: $white;
			border: 1px solid $primary;
			border-radius: 2px;
		}

		&:checked+label:before {
			background: $primary;
			border: 1px solid $primary;
		}

		&:disabled+label {
			color: rgba($primary, 0.2);
			cursor: auto;
		}

		&:disabled+label:before {
			box-shadow: none;
			background: rgba($primary, 0.2);
		}

		&:checked+label:after {
			content: "";
			position: absolute;
			left: 3px;
			background: $white;
			width: 2px;
			height: 2px;
			box-shadow: 2px 0 0 $white, 4px 0 0 $white, 4px -2px 0 $white, 4px -4px 0 $white, 4px -6px 0 $white, 4px -8px 0 $white;
			transform: rotate(45deg);
		}
	}

	.radio {
		&:checked,
		&:not(:checked) {
			position: absolute;
			left: -9999px;
		}

		&:checked+label,
		&:not(:checked)+label {
			position: relative;
			cursor: pointer;
			line-height: 20px;
			font-family: var(--sweet_sans_pro);
			align-items: center;
			display: inline-flex;
			width: fit-content;
		}

		&:checked+label:before,
		&:not(:checked)+label:before {
			content: "";
			display: inline-block;
			margin-right: 10px;
			width: 15px;
			height: 15px;
			border-radius: 100%;
			border:1px solid $secondary;
		}

		&:checked+label:after,
		&:not(:checked)+label:after {
			content: "";
			width: 9px;
			height: 9px;
			position: absolute;
			left: 4px;
			border-radius: 100%;
			transition: all 0.2s ease;
			background: $secondary;
		}

		&:not(:checked)+label:after {
			opacity: 0;
		}

		&:checked+label {
			&:after {
				opacity: 1;
			}
		}

		&:checked+label {
			&::before {
				border-color: $secondary;
			}
		}
	}

	&-wrap-label {
		flex: 1;
	}
}