acf-radio-choices.html

<!-- Section Layout -->
default : <span class="flip" title="Text Left / Image Right"><svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M13 17h8v-2h-8v2zM3 19h8V5H3v14zM13 9h8V7h-8v2zm0 4h8v-2h-8v2z"></path></svg></span>
alt : <span title="Image Left / Text Right"><svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M13 17h8v-2h-8v2zM3 19h8V5H3v14zM13 9h8V7h-8v2zm0 4h8v-2h-8v2z"></path></svg></span>

<!-- Column Split -->
split-equal : <span title="Two columns; equal split"><svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H25V34H39ZM23 34H9V14H23V34Z"></path></svg></span>
split-two-thirds : <span title="Two columns; two-thirds, one-third split"><svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H30V34H39ZM28 34H9V14H28V34Z"></path></svg></split>
split-two-thirds-reverse : <span title="Two columns; one-third, two-thirds split"><svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H20V34H39ZM18 34H9V14H18V34Z"></path></svg></span>

acf-radio-icons.scss

/*
 *	Styles for ACF radio button icons
 */
$icon-width: 5.2rem;
$icon-height: 5.2rem;
$icon-border: solid 0.2rem rgba($lightgrey,0);
$icon-border-color-hover: $lightgrey;
$icon-border-color-selected: $red;

.acf-radio-icons {
	label {
		&:hover span { border-color: $icon-border-color-hover; }
		&.selected span { border-color: $icon-border-color-selected; }
		input { display: none; }
		span {
			border: $icon-border;
			font-weight: bold;
			text-align: center;
			display: inline-block;
			width: $icon-width;
			height: $icon-height;
			margin: 0;
			transition: all 0.2s ease-in-out;

			&.flip {
				transform: rotate(180deg);
				transform-origin: center;
			}
		}
	}
}