@use '../scss/mixins';

/**
 * CSS Specificity.
 *
 * @link https://make.wordpress.org/core/2024/06/21/wordpress-6-6-css-specificity/
 */
:root :where( .wp-block-pronamic-form-control__element ) {
	background-color: var(--pronamic-form-control-background-color);
	border: 1px solid var(--pronamic-form-control-border-color);
	border-radius: var(--pronamic-form-control-border-radius);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
	padding: .875em 1em;
}

.wp-block-pronamic-form-control__element {
	&:where( :not( [type=checkbox] ):not( [type=radio ] ) ) {
		box-sizing: border-box;
		color: inherit;
		display: inline-block;
		font-size: inherit;
		outline: 2px solid transparent;
		transition: border-color .2s, outline-color .4s;
		width: 100%;

		&:focus {
			border-color: var(--pronamic-form-control-background-color-focus);
			outline-color: rgba(0, 0, 0, .05);
		}
	}
}

.wp-block-pronamic-form-control {
	textarea {
		min-block-size: 12rem;
	}
}

.wp-block-pronamic-form-control__element[type=radio] {
	@include mixins.base-toggle-input();

	border-radius: 50%;

	&::before {
		border-radius: 50%;
	}
}

.wp-block-pronamic-form-control__element[type=checkbox] {
	@include mixins.base-toggle-input();

	border-radius: var(--pronamic-form-control-border-radius);

	&::before {
		background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
		width: 100%;
		height: 100%;
	}
}