/* radio icon --------------------------------------------------------*/

/* @group @variables */

:root {
--radio-icon-size: 1.125rem;
--radio-icon-border-width : .1875rem;
--radio-icon-background-color: var(--color-gainsboro);
--radio-icon-border-color: transparent;
--radio-icon-border-radius: 50%;
}

input:focus ~ label .a-radio-icon,
label:hover .a-radio-icon {
--radio-icon-background-color: var(--color-white);
--radio-icon-border-width: .1875rem;
--radio-icon-border-color: var(--color-gainsboro);
}

input:checked ~ label .a-radio-icon {
--radio-icon-background-color: var(--color-white);
--radio-icon-border-width: .1875rem;
--radio-icon-border-color: var(--color-focus-primary);
}

/* @end @variables */

/* @group @a-radio-icon */

.a-radio-icon {
box-sizing: border-box;
width: var(--radio-icon-size);
height: var(--radio-icon-size);
background-color: var(--radio-icon-background-color);
border: var(--radio-icon-border-width) solid var(--radio-icon-border-color);
border-radius: var(--radio-icon-border-radius);
transition: var(--link-transition);
}

/* @end @a-radio-icon */