.checkbox-adv,
.radiobtn-adv {
	font-size: $font-size;
	line-height: $line-height;
}

[class*="checkbox-circle"],
[class*="radiobtn-circle"] {
	display: block;
	height: $font-size;
	position: absolute;
		top: (($line-height - $font-size) / 2 - 1);
		left: 0;
	width: $font-size;
}

[class*="radiobtn-circle"] {
	border-radius: 50%;
}

.checkbox-circle,
.radiobtn-circle {
	border: 2px solid $black-sec;
	transition: border-color 0.3s $timing;
}

.checkbox-circle {
	input[type="checkbox"]:focus ~ & {
		border-color: $black-text;
	}
	fieldset[disabled] input[type="checkbox"] ~ &,
	input[type="checkbox"][disabled] ~ &,
	.checkbox-adv.disabled input[type="checkbox"] ~ & {
		border-color: $black-hint;
	}
}

.radiobtn-circle {
	input[type="radio"]:focus ~ & {
		border-color: $black-text;
	}
	input[type="radio"]:checked ~ & {
		border-color: $brand-color-accent;
	}
	fieldset[disabled] input[type="radio"] ~ &,
	input[type="radio"][disabled] ~ &,
	.radiobtn-adv.disabled input[type="radio"] ~ & {
		border-color: $black-hint;
	}
	fieldset[disabled] input[type="radio"]:checked ~ &,
	input[type="radio"]:checked[disabled] ~ &,
	.radiobtn-adv.disabled input[type="radio"]:checked ~ & {
		border-color: $brand-color-accent-light;
	}
}

.checkbox-circle-check,
.radiobtn-circle-check {
	background-color: transparent;
	transform: scale(0, 0);
	transition: transform 0.3s $timing;
	&:after,
	&:before {
		background-color: $brand-color-accent;
		border-radius: 50%;
		content: "";
		display: block;
		opacity: 0;
		position: absolute;
	}
	&:after {
		height: ($font-size * 5);
		// position
			top: ($font-size * -2);
			left: ($font-size * -2);
		width: ($font-size * 5);
	}
	&:before {
		height: 100%;
		// position
			top: 0;
			left: 0;
		transition: opacity 0.3s $timing;
		width: 100%;
	}
}

.checkbox-circle-check {
	input[type="checkbox"]:checked ~ & {
		transform: scale(0.5, 0.5);
		&:after {
			animation: circle-check 0.6s;
		}
	}
	fieldset[disabled] &,
	input[type="checkbox"][disabled] ~ &,
	.checkbox-adv.disabled & {
		display: none;
	}
}

.radiobtn-circle-check {
	input[type="radio"]:checked ~ & {
		transform: scale(0.5, 0.5);
		&:after {
			animation: circle-check 0.6s;
		}
		&:before {
			opacity: 1;
		}
	}
	fieldset[disabled] &,
	input[type="radio"][disabled] ~ &,
	.radiobtn-adv.disabled & {
		&:after,
		&:before {
			display: none;
		}
	}
	fieldset[disabled] input[type="radio"]:checked ~ &,
	input[type="radio"]:checked[disabled] ~ &,
	.radiobtn-adv.disabled input[type="radio"]:checked ~ & {
		background-color: $brand-color-accent-light;
	}
}

.checkbox-circle-icon {
	background-color: $brand-color-accent;
	color: $brand-text-accent;
	opacity: 0;
	transform: scale(0.5, 0.5);
	transition-duration: 0.3s;
	transition-property: opacity, transform;
	transition-timing-function: $timing;
	&:before {
		// position
			top: auto;
	}
	input[type="checkbox"]:checked ~ & {
		opacity: 1;
		transform: scale(1, 1);
	}
	fieldset[disabled] input[type="checkbox"]:checked ~ &,
	input[type="checkbox"]:checked[disabled] ~ &,
	.checkbox-adv.disabled input[type="checkbox"]:checked ~ & {
		background-color: $brand-color-accent-light;
	}
}

// animation
	@keyframes circle-check {
		0% {
			opacity: 0;
		}
		25% {
			opacity: 0.25;
		}
		100% {
			opacity: 0;
		}
	}