.wc-block-components-radio-control__option {
	@include reset-typography();
	@include with-translucent-border( 0 0 1px );
	display: block;
	padding: $gap-small $gap-small 0 #{$gap-larger * 2};
}

.wc-block-components-radio-control__option-layout {
	@include with-translucent-border( 0 0 1px );
	display: table;
	width: 100%;
	padding-bottom: $gap-small;
}

.wc-block-components-radio-control__option .wc-block-components-radio-control__option-layout {
	&::after {
		display: none;
	}
}

.wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__description-group {
	display: table-row;

	> span {
		display: table-cell;
	}

	.wc-block-components-radio-control__secondary-label,
	.wc-block-components-radio-control__secondary-description {
		text-align: right;
		min-width: 50%;
	}
}

.wc-block-components-radio-control__label,
.wc-block-components-radio-control__secondary-label {
	line-height: 20px;
	// Currently, max() CSS function calls need to be wrapped with unquote.
	// See: https://github.com/sass/sass/issues/2378#issuecomment-367490840
	line-height: unquote("max(1rem, 20px)");
}

.wc-block-components-radio-control__description,
.wc-block-components-radio-control__secondary-description {
	@include font-size( small );
	line-height: 20px;
}

// Extra class for specificity.
.wc-block-components-radio-control {
	.wc-block-components-radio-control__input {
		appearance: none;
		background: transparent;
		border: 2px solid currentColor;
		border-radius: 50%;
		display: inline-block;
		height: 1.25rem;
		left: $gap-large;
		min-height: 20px;
		min-width: 20px;
		position: absolute;
		top: $gap-small;
		width: 1.25rem;

		&:checked::before {
			background: currentColor;
			border-radius: 50%;
			content: "";
			display: block;
			height: 0.625em;
			left: 50%;
			margin: 0;
			min-height: 10px;
			min-width: 10px;
			position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 0.625em;
		}

		.has-dark-controls & {
			border-color: $controls-border-dark;

			&:checked::before {
				background: $input-text-dark;
			}
		}
	}

	@include breakpoint( ">782px" ) {
		.wc-block-components-radio-control__input {
			height: 1rem;
			margin-top: 2px;
			min-height: 16px;
			min-width: 16px;
			width: 1rem;

			&:checked::before {
				height: 0.5em;
				min-height: 8px;
				min-width: 8px;
				width: 0.5em;
			}
		}
	}
}

.theme-twentytwentyone {
	.wc-block-components-radio-control .wc-block-components-radio-control__input {
		&:checked {
			border-width: 2px;

			&::before {
				background-color: var(--form--color-text);
			}
		}

		&::after {
			display: none;
		}
	}
}