/**
 * Form Checkbox Block Styles
 *
 * @since 2.0.0
 * @package Spectra Pro
 */
.spectra-pro-form-checkbox__wrapper {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.spectra-pro-form-checkbox__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	cursor: pointer;

	&:checked ~ .spectra-pro-form-checkbox__checkmark {
		border-color: #3b82f6;

		&::after {
			display: block;
		}
	}

	&:focus ~ .spectra-pro-form-checkbox__checkmark {
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
	}
}

.spectra-pro-form-checkbox__checkmark {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	cursor: pointer;
	flex-shrink: 0;
	margin-right: 8px;
	transition: all 0.2s ease;

	&::after {
		content: "";
		position: absolute;
		display: none;
		left: 50%;
		top: 50%;
		width: 4px;
		height: 8px;
		border: solid #3b82f6;
		border-width: 0 2px 2px 0;
		transform: translate(-50%, -60%) rotate(45deg);
	}
}

.spectra-pro-form-checkbox__label {
	margin: 0;
	line-height: 1.25;
	color: #374151;
	cursor: pointer;
	user-select: none;
	transition: color 0.2s ease;
	display: flex;
	align-items: center;
	gap: 0.5rem;


	&:hover {
		color: #111827;
	}
}

.spectra-pro-form-checkbox__text {
	flex: 1;
	line-height: 1.25;
	cursor: pointer;
}

.wp-block-spectra-pro-form-checkbox {
	font-size: inherit;
	align-self: start;

	&__wrapper {
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;
	}

	&__input {
		position: absolute;
		opacity: 0;
		// width: 0;
		// height: 0;
		cursor: pointer;

		&:checked ~ .spectra-pro-form-checkbox__checkmark {
			border-color: #3b82f6;

			&::after {
				display: block;
			}
		}

		&:focus ~ .spectra-pro-form-checkbox__checkmark {
			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
		}
	}

	&__checkmark {
		position: relative;
		display: inline-block;
		width: 16px;
		height: 16px;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #fff;
		cursor: pointer;
		flex-shrink: 0;
		margin-top: 0.125rem;
		transition: all 0.2s ease;

		&::after {
			content: "";
			position: absolute;
			display: none;
			left: 50%;
			top: 50%;
			width: 4px;
			height: 8px;
			border: solid var(--spectra-checkbox-checkmark-color, #3b82f6);
			border-width: 0 2px 2px 0;
			transform: translate(-50%, -60%) rotate(45deg);
		}
	}

	&__label {
		margin: 0;
		line-height: 1.25;
		color: #374151;
		cursor: pointer;
		user-select: none;
		transition: color 0.2s ease;
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;

		&:hover {
			color: #111827;
		}
	}

	&__text {
		flex: 1;
		line-height: 1.25;
		cursor: pointer;
	}

	&__required {
		color: #dc2626;
		margin-left: 0.25rem;
		font-weight: 500;
	}

	// Dark mode support
	@media (prefers-color-scheme: dark) {

		&__input {
			border-color: #4b5563;
			background-color: #1f2937;

			&:checked {
				border-color: #3b82f6;
			}
		}

		&__label {
			color: #d1d5db;

			&:hover {
				color: #f3f4f6;
			}
		}
	}

	// Dynamic styles - specificity (0,2,0) and higher.
	&[class*="wp-block"] {

		// Parent context inheritance - inherit parent text color when no checkbox-specific color is set
		&:not(.spectra-label-color):not(.spectra-text-color) {

			.wp-block-spectra-pro-login &,
			.wp-block-spectra-pro-register & {

				.spectra-pro-form-checkbox__label {
					color: var(--spectra-text-color, inherit);
				}
			}
		}

		// Variable based CSS - Text Color.
		&.spectra-text-color .spectra-pro-form-checkbox__label {
			color: var(--spectra-text-color);
		}

		// Variable based CSS - Checkbox Background Color.
		&.spectra-checkbox-background-color .spectra-pro-form-checkbox__checkmark {
			background-color: var(--spectra-checkbox-background-color);
		}

		// Variable based CSS - Checkbox Border Color.
		&.spectra-checkbox-border-color .spectra-pro-form-checkbox__checkmark {
			border-color: var(--spectra-checkbox-border-color);
		}

		// Variable based CSS - Checkbox Check Color.
		&.spectra-checkbox-color .spectra-pro-form-checkbox__input:checked ~ .spectra-pro-form-checkbox__checkmark {
			background-color: var(--spectra-checkbox-color);
			border-color: var(--spectra-checkbox-color);
		}

		// Variable based CSS - Checkbox Checkmark Color.
		&.spectra-checkbox-checkmark-color .spectra-pro-form-checkbox__checkmark::after {
			border-color: var(--spectra-checkbox-checkmark-color) !important;
		}

		// Legacy support - checkbox check color
		&.spectra-checkbox-check-color .spectra-pro-form-checkbox__input:checked::after {
			color: var(--spectra-checkbox-check-color);
		}

		// Variable based CSS - Checkbox Glow Color.
		&.spectra-checkbox-glow-color .spectra-pro-form-checkbox__input:focus ~ .spectra-pro-form-checkbox__checkmark {
			box-shadow: 0 0 0 2px rgba(var(--spectra-checkbox-glow-color-rgb, 59, 130, 246), 0.1);
		}

		// Variable based CSS - Checkbox Size.
		&.spectra-checkbox-size .spectra-pro-form-checkbox__input {
			width: var(--spectra-checkbox-size);
			height: var(--spectra-checkbox-size);
		}

		// Hover states
		&:focus,
		&:hover {

			&.spectra-text-color-hover .spectra-pro-form-checkbox__label {
				color: var(--spectra-text-color-hover) !important;
			}

		}

		// Error states for checkboxes
		&.spectra-error-color {

			.spectra-pro-form-checkbox__input {
				border-color: var(--spectra-error-color);
			}

			.spectra-pro-form-checkbox__label {
				color: var(--spectra-error-color);
			}
		}

		&.spectra-error-color-hover:hover {

			.spectra-pro-form-checkbox__input {
				border-color: var(--spectra-error-color-hover) !important;
			}

			.spectra-pro-form-checkbox__label {
				color: var(--spectra-error-color-hover) !important;
			}
		}
	}

}

// Direct CSS rules for checkmark styling
.spectra-checkbox-background-color .spectra-pro-form-checkbox__checkmark {
	background-color: var(--spectra-checkbox-background-color) !important;
}

.spectra-checkbox-border-color .spectra-pro-form-checkbox__checkmark {
	border-color: var(--spectra-checkbox-border-color) !important;
}

.spectra-checkbox-color .spectra-pro-form-checkbox__input:checked ~ .spectra-pro-form-checkbox__checkmark {
	background-color: var(--spectra-checkbox-color) !important;
	border-color: var(--spectra-checkbox-color) !important;
}

// WordPress editor specific styles
.block-editor-block-list__layout {

	.spectra-pro-form-checkbox {
		// Editor preview styles
		border: 1px dashed #e5e7eb;
		border-radius: 0.25rem;
		padding: 0.75rem;

		&:hover {
			border-color: #3b82f6;
		}
	}
}
