@mixin radio-control-styles {
	.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__input {
		left: $gap-large;
		position: absolute;
		top: $gap-small;
	}

	.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;
	}
}

@mixin radio-control-input-styles {
	// Extra class for specificity.
	.wc-block-components-radio-control {
		.wc-block-components-radio-control__input {
			appearance: none;
			background: #fff;
			border: 2px solid currentColor;
			border-radius: 50%;
			display: inline-block;
			height: 1.25rem;
			min-height: 20px;
			min-width: 20px;
			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;
			}
		}

		@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;
				}
			}
		}
	}
}