input[type=radio] {
    position: relative;
    margin: 0;
}

input[type=radio]:not(:disabled)::before {
    cursor: pointer;
}


/* 1. Browser Default
-------------------------------------------- */
/* input[type=radio] {
    cursor: pointer;
    margin: var(--radio-padding);
}

input[type=radio]:focus-visible {
    outline: var(--outline);
    outline-offset: var(--outline-outset);
} */


/* 2. Radio icon replacement
-------------------------------------------- */
input[type=radio] {
    appearance: none;
    padding: var(--radio-padding);
    font-family: var(--font-family--icon);
    font-size: var(--radio-icon-size);
    color: var(--radio-icon-color);
}

input[type=radio]:focus-visible {
    outline: 0;
}

input[type=radio]:focus-visible::before {
    outline: var(--outline);
    outline-offset: var(--outline-outset);
}

input[type=radio]::before {
    content: var(--radio-icon-radiobutton);
    color:  var(--radio-icon-color);
    background: var(--radio-background-color);
    border-radius: var(--radio-icon-border-radius);
}

input[type=radio]:hover::before {
    color: var(--radio-icon-color--hover);
    background: var(--radio-background-color--hover);
}

input[type=radio]:focus::before {
    content: var(--radio-icon-radiobutton--focus);
    color: var(--radio-icon-color--focus);
    background: var(--radio-background-color--focus);
}

input[type=radio]:checked::before {
    content: var(--radio-icon-radiobutton--checked);
    color: var(--radio-icon-color--checked);
    background: var(--radio-background-color--checked);
}

input[type=radio]:checked:hover::before {
    color: var(--radio-icon-color--checked--hover);
    background: var(--radio-background-color--checked--hover);
}

input[type=radio]:checked:focus::before {
    color: var(--radio-icon-color--checked--focus);
    background: var(--radio-background-color--checked--focus);
}


/* 3. Checkbox Custom (toggle)
-------------------------------------------- */
/* input[type=radio] {
    appearance: none;
    padding: var(--checkbox-padding);
    width: calc(var(--checkbox-toggle-width) + var(--checkbox-padding-start) + var(--checkbox-padding-end));
    height: calc(var(--checkbox-toggle-height) + var(--checkbox-padding-top) + var(--checkbox-padding-bottom));
}

input[type=radio]:focus-visible {
    outline: 0;
}

input[type=radio]:focus-visible::before {
    outline: var(--outline);
    outline-offset: var(--outline-outset);
}

input[type=radio]::before {
    position: absolute;
    content: '';
    width: var(--checkbox-toggle-width);
    height: var(--checkbox-toggle-height);
    border-width: var(--checkbox-toggle-border-width);
    border-style: var(--checkbox-toggle-border-style);
    border-color: var(--checkbox-toggle-border-color);
    border-radius: var(--checkbox-toggle-border-radius);
    background-color: var(--checkbox-toggle-background-color);
}

input[type=radio]::after {
    position: absolute;
    content: '';
    width: var(--checkbox-toggle-checkmark-width);
    height: var(--checkbox-toggle-checkmark-height);
    border-radius: var(--checkbox-toggle-checkmark-border-radius);
    background-color: var(--checkbox-toggle-checkmark-background-color);
    transform: translate(   calc((var(--checkbox-toggle-height) - var(--checkbox-toggle-checkmark-width)) / 2 ),
                            calc((var(--checkbox-toggle-height) - var(--checkbox-toggle-checkmark-height)) / 2 ));
    transition-property: transform;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
}

input[type=radio]:not(:disabled):hover::before {
    border-color: var(--checkbox-toggle-border-color--hover);
    background-color: var(--checkbox-toggle-background-color--hover);
}

input[type=radio]:not(:disabled):hover::after {
    background-color: var(--checkbox-toggle-checkmark-background-color--hover);
}

input[type=radio]:focus::before {
    border-color: var(--checkbox-toggle-border-color--focus);
    background-color: var(--checkbox-toggle-background-color--focus);
}

input[type=radio]:focus::after {
    background-color: var(--checkbox-toggle-checkmark-background-color--focus);
}

input[type=radio]:checked::before {
    border-color: var(--checkbox-toggle-border-color--checked);
    background-color: var(--checkbox-toggle-background-color--checked);
}

input[type=radio]:checked::after {
    background-color: var(--checkbox-toggle-checkmark-background-color--checked);
    transform: translate(   calc(var(--checkbox-toggle-width) - (var(--checkbox-toggle-border-width) + var(--checkbox-toggle-checkmark-width) + var(--checkbox-toggle-checkmark-gap))),
                            calc((var(--checkbox-toggle-height) - var(--checkbox-toggle-checkmark-height)) / 2));
}

input[type=radio]:not(:disabled):checked:hover::before {
    border-color: var(--checkbox-toggle-border-color--checked--hover);
    background-color: var(--checkbox-toggle-background-color--checked--hover);
}

input[type=radio]:not(:disabled):checked:hover::after {
    background-color: var(--checkbox-toggle-checkmark-background-color--checked--hover);
}

input[type=radio]:checked:focus::before {
    border-color: var(--checkbox-toggle-border-color--checked--focus);
    background-color: var(--checkbox-toggle-background-color--checked--focus);
}

input[type=radio]:checked:focus::after {
    background-color: var(--checkbox-toggle-checkmark-background-color--checked--focus);
} */