:root {
    --primary-color: #333;
    --secondary-color: #555;
}

/* basic classes */
body {
	font-weight: 400;
	font-style: normal;
	font-family: "Kanit", serif;
	color: #787878;
}

/* title classes */
.main--title {
	font-weight: 500;
	color: #333;
}

/* checkbox classes */
.main--checkbox {
	position: relative;
}

.main--checkbox .checkbox {
	--bg: #fff;
	--brdr: var(--primary-color);
	--brdr-actv: var(--primary-color);
	--brdr-hovr: var(--primary-color);
	--dur: calc((var(--size, 2)/2) * 0.6s);
	display: inline-block;
	width: calc(var(--size, 1) * 22px);
	position: relative;
}

.main--checkbox .checkbox:after {
	content: "";
	width: 100%;
	padding-top: 100%;
	display: block;
}

.main--checkbox .checkbox>* {
	position: absolute;
}

.main--checkbox .checkbox input {
	-webkit-appearance: none;
	-moz-appearance: none;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	background-color: var(--bg);
	border-radius: calc(var(--size, 1) * 4px);
	border: calc(var(--newBrdr, var(--size, 2)) * 1px) solid;
	color: var(--newBrdrClr, var(--brdr));
	outline: none;
	margin: 0;
	padding: 0;
	transition: all calc(var(--dur) / 3) linear;
}

.main--checkbox .checkbox input:hover,
.main--checkbox .checkbox input:checked {
	--newBrdr: calc(var(--size, 1) * 2);
}

.main--checkbox .checkbox input:hover {
	--newBrdrClr: var(--brdr-hovr);
}

.main--checkbox .checkbox input:checked {
	--newBrdrClr: var(--brdr-actv);
	transition-delay: calc(var(--dur) /1.3);
}

.main--checkbox .checkbox input:checked+svg {
	--dashArray: 16 93;
	--dashOffset: 109;
	color: var(--primary-color);
}

.main--checkbox .checkbox svg {
	fill: none;
	left: 0;
	pointer-events: none;
	stroke: var(--stroke, var(--border-active));
	stroke-dasharray: var(--dashArray, 93);
	stroke-dashoffset: var(--dashOffset, 94);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2px;
	top: 0;
	transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
}

.main--checkbox .checkbox svg,
.main--checkbox .checkbox input {
	display: block;
	height: 100%;
	width: 100%;
}

.main--checkbox label {
    position: absolute;
	top: -2px;
    left: 30px;
	color: var(--primary-color);
	font-weight: 500;
}

.main--checkbox:has(input:checked) label {
    text-decoration: line-through;
	color: var(--secondary-color);
}