/**
 * Radio Control
 */

@use "~@wordpress/base-styles/colors" as wp-colors;

.newspack-radio-control {
	color: wp-colors.$gray-700;
	font-size: 14px;
	line-height: 24px;
	margin: 32px 0;

	label {
		color: inherit;
		font-size: 14px;
		line-height: 24px;
		margin: 0;
	}

	.components-base-control__label {
		color: wp-colors.$gray-900;
		font-weight: bold;
	}

	// Options
	.components-radio-control__option {
		align-items: center;
		display: flex;
		margin: 0 0 8px;

		&:first-of-type {
			margin-top: 8px;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	// Radio
	input[type="radio"] {
		height: 24px;
		width: 24px;
		max-height: 24px;
		max-width: 24px;

		@media screen and ( min-width: 782px ) {
			height: 20px;
			width: 20px;
			max-height: 20px;
			max-width: 20px;
		}

		&:checked {
			background-color: var(--wp-admin-theme-color);
			border-color: var(--wp-admin-theme-color);

			&::before {
				border: none;
			}
		}

		&:focus {
			border-color: var(--wp-admin-theme-color);
			box-shadow: 0 0 0 2px white, 0 0 0 3.5px var(--wp-admin-theme-color);
		}
	}

	// Multiple Radio Controls
	& + & {
		margin-bottom: 32px;
		margin-top: -16px;
	}

	// Multiple Controls
	+ .newspack-select-control,
	+ .newspack-text-control {
		margin-bottom: 32px;
		margin-top: -16px;
	}

	// Reset
	.components-base-control__field,
	.components-base-control__label,
	.components-base-control__help {
		display: block;
		margin: 0;
	}
}