/**
 * Interactive task row (.task-item) — checkbox, strikethrough text, flag.
 * Requires haam-task-item.js + GSAP (MorphSVG optional).
 */

.task-item {
	--text-color: #fff;
	--text-line-scale: 0;
	--text-x: 0px;
	--border-default: #7F7F85;
	--border-hover: #E4E4E7;
	--checkbox-active: #6E7BF2;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	width: 340px;
	max-width: 100%;
	border-radius: 7px;
	overflow: hidden;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	mask-image: radial-gradient(white, black);
	transition: background .15s linear;

	&:not(.done) {
		&:hover {
			--blur-x: 372px;
			--blur-o: 1;
			background: #2C2C31;
		}
	}

	&:before {
		content: '';
		position: absolute;
		width: 32px;
		height: 6px;
		right: 100%;
		top: -11px;
		border-radius: 50%;
		box-shadow: 0px 4px 4px var(--checkbox-active);
		transform: translateX(var(--blur-x, 0));
		opacity: var(--blur-o, 0);
		transition: opacity .15s, transform 1.2s;
	}

	&.done {
		--checkbox-active: #444449;
		--flag-border: #444449;
		--text-color: #626268;
	}

	.text {
		display: block;
		letter-spacing: -.05px;
		text-decoration: none;
		color: var(--text-color);
		position: relative;
		transform: translateX(var(--text-x)) translateZ(0);
		transition: color .25s;

		&:before {
			content: '';
			position: absolute;
			height: 1px;
			left: -2px;
			right: -2px;
			top: 50%;
			transform-origin: 0 50%;
			transform: translateY(-50%) scaleX(var(--text-line-scale)) translateZ(0);
			background: currentColor;
		}

		a {
			color: inherit;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.checkbox {
		--active-tick: #ffffff;
		--checkbox-lines-offset: 13.5px;
		display: block;
		padding: 15px 12px;
		cursor: pointer;
		position: relative;
		-webkit-tap-highlight-color: transparent;

		svg {
			display: block;
			position: absolute;
		}

		input {
			display: block;
			outline: none;
			border: none;
			background: none;
			padding: 0;
			margin: 0;
			-webkit-appearance: none;
			appearance: none;
			width: 18px;
			height: 18px;

			& + svg {
				width: 21px;
				height: 18px;
				left: 12px;
				top: 15px;
				color: var(--checkbox-active);
				transition: color .25s linear;

				.shape {
					stroke-width: 1.5px;
					stroke: var(--border, var(--border-default));
					fill: var(--background, none);
					transition: fill .25s linear, stroke .25s linear;
				}

				.tick {
					stroke-dasharray: 20;
					stroke-dashoffset: var(--checkbox-tick-offset, 20px);
					transition: stroke-dashoffset var(--checkbox-tick-duration, .15s) var(--checkbox-tick-easing, ease);

					&.mask {
						stroke: var(--active-tick);
					}
				}

				& + svg {
					width: 11px;
					height: 11px;
					fill: none;
					stroke: var(--checkbox-active);
					stroke-width: 1.25;
					stroke-linecap: round;
					top: 9px;
					right: 2px;
					stroke-dasharray: 4.5px;
					stroke-dashoffset: var(--checkbox-lines-offset);
					pointer-events: none;
				}
			}

			&:checked {
				& + svg {
					--background: var(--checkbox-active);
					--border: var(--checkbox-active);
					--checkbox-tick-duration: .2s;
					--checkbox-tick-easing: cubic-bezier(0, .45, 1, .5);
					--checkbox-tick-offset: 0;
				}
			}
		}

		&:hover {
			input {
				&:not(:checked) {
					& + svg {
						--border: var(--border-hover);
					}
				}
			}
		}
	}

	.flag {
		--flag-color: #BABAC1;
		--flag-fill: var(--checkbox-active);
		--flag-fill-percent: 0%;
		--flag-scale-x: 1;
		--flag-scale-y: 1;
		--flag-rotate: 0deg;
		--flag-circle-opacity: 0;
		--flag-circle-scale: 0;
		-webkit-appearance: none;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
		cursor: pointer;
		outline: none;
		border: none;
		background: none;
		padding: 15px 12px;
		margin: 0 0 0 auto;
		position: relative;

		&.active {
			--flag-fill-percent: 150%;
		}

		svg {
			display: block;
			width: 18px;
			height: 18px;
			position: relative;
			z-index: 1;
			pointer-events: none;
			fill: none;
			stroke: var(--flag-border, var(--border, var(--border-default)));
			stroke-width: 1.5;
			stroke-linecap: round;
			stroke-linejoin: round;
			transform-origin: 7.66px 16.75px;
			transform: scale(var(--flag-scale-x), var(--flag-scale-y)) rotate(var(--flag-rotate));
			transition: stroke .25s linear;

			.fill {
				stroke: var(--flag-fill);
				fill: var(--flag-fill);
				clip-path: circle(var(--flag-fill-percent) at var(--flag-fill-x, 7.66px) var(--flag-fill-y, 16.75px));
				transition: fill .25s linear, stroke .25s linear;
			}
		}

		&:hover {
			--border: var(--border-hover);
		}

		&:before {
			content: '';
			display: block;
			width: 24px;
			height: 12px;
			border-radius: 50%;
			position: absolute;
			bottom: 6px;
			left: 8px;
			opacity: var(--flag-circle-opacity);
			background: var(--flag-fill);
			transform: scale(var(--flag-circle-scale)) translateZ(0);
		}
	}
}