/**
 * Progress Tracker Styles
 *
 * Status marker buttons (completed/in progress) for song pages.
 *
 * @package DrummerTube
 * @since 2.4.0
 */

.song-status-marker {
	--status-accent: var(--dt-accent-light, #00e0ff);
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 260px;
}

.status-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background: var(--dt-bg-card, #1f1f1f);
	color: var(--dt-text-secondary, #ddd);
	border: none;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
	cursor: pointer;
	transition: color .2s, background .2s, border-color .2s;
}

.status-btn:hover { background: var(--dt-bg-card-alt, #242424); }
.status-btn[disabled] { opacity: .6; cursor: wait; }

.status-btn .check {
	width: 18px;
	height: 18px;
	border: 2px solid var(--dt-text-muted, #8a8a8a);
	border-radius: 50%;
	position: relative;
	flex: 0 0 18px;
}

.status-btn.is-active { color: var(--status-accent); }
.status-btn.is-active .check { border-color: var(--status-accent); }

.status-btn.is-active .check::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 5px;
	height: 10px;
	border: solid var(--status-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.status-feedback {
	margin-top: 6px;
	font-size: 12px;
	color: var(--dt-accent-light, #8ad);
	min-height: 16px;
}