// Static styles - specificity (0,1,0) and higher.
.wp-block-spectra-pro-loop-builder-child-filter-checkbox {
	// Default CSS for this block.
	width: 100%;
	display: flex;
	align-items: flex-start;

	// Stack layout (default).
	&.is-layout-stack {
		flex-direction: column;
	}

	// Inline layout.
	&.is-layout-inline {
		flex-direction: row;
		flex-wrap: wrap;
	}

	// Reset styles to resolve the theme compatibility issues.
	label {
		cursor: pointer;
		display: flex;
		align-items: center;
		transition: color 0.2s ease-in-out;

		// Styles to reset for buttons on most themes.
		font: inherit;
		letter-spacing: inherit;
		word-spacing: inherit;
		line-height: inherit;
		text-transform: inherit;
		text-decoration: inherit;
	}

	// Reset styles to resolve the theme compatibility issues.
	input[type="checkbox"] {
		width: 16px;
		height: 16px;
		cursor: pointer;
		transition: all 0.2s ease-in-out;
	}

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

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

		// Variable based CSS - Background Color.
		&.spectra-background-color {
			background: var(--spectra-background-color);
		}

		// Variable based CSS - Background Gradient.
		&.spectra-background-gradient {
			background: var(--spectra-background-gradient);
		}

		// Variable based CSS - Text Color Hover.
		&.spectra-text-color-hover label:hover {
			color: var(--spectra-text-color-hover);
		}

		// Variable based CSS - Background Color Hover.
		&.spectra-background-color-hover:hover {
			background: var(--spectra-background-color-hover);
		}

		// Variable based CSS - Background Gradient Hover.
		&.spectra-background-gradient-hover:hover {
			background: var(--spectra-background-gradient-hover);
		}
	}
}
