/**
 * StatusToggle — query status checkbox styles.
 */

@import '../../scss/variables';

.rank-math-ai-visibility-status-toggle {

	&.components-checkbox-control {
		margin-bottom: 0;
	}

	.components-base-control__field {
		display:     flex;
		align-items: center;
		margin:      0;
	}

	// WP CheckboxControl renders an inner HStack between the checkbox box and
	// the label — target it directly because the HStack resets gap to 0.
	.components-h-stack {
		gap: 8px !important;
	}

	// Ensure the input container doesn't collapse.
	.components-checkbox-control__input-container {
		flex-shrink: 0;
		margin: 0;
	}

	// Pin checked colour to the module's primary blue.
	.components-checkbox-control__input[type='checkbox'] {
		margin: 0;

		&:checked {
			background-color: $color-btn-primary;
			border-color:     $color-btn-primary;
		}

		&:focus {
			box-shadow: 0 0 0 2px #fff, 0 0 0 4px $color-btn-primary;
		}
	}

	// Label — 13 px to match table cell body text.
	.components-checkbox-control__label {
		font-size:   13px;
		font-weight: 400;
		color:       $color-text-primary;
		line-height: 1;
		margin:      0;
	}

	// Reduce opacity when the whole control is disabled.
	.components-checkbox-control__input[type='checkbox']:disabled {
		opacity: 0.6;
	}
}