.eControls .eRadioButton {
    display: flex;
    align-items: var(--eRadioButtonAlIt, start);
    flex-direction: var(--eCheckBoxDirection, row);
    gap: var(--eCheckBoxGap, 8px);
    border-style: solid;
    border-color: var(--eRadioButtonBorderColor, var(--gray-300));
    border-width: var(--eRadioButtonBorderW, 1px);
    border-radius: var(--radius-xl);
    padding: var(--eRadioButtonP, var(--spacing-xl));

    &:has( .k-radio:checked:focus, .k-radio:focus, .k-radio:checked ) {
        border-style: solid;
        border-color: var(--eRadioButtonBorderColorFocus, var(--brand-600));
        border-width: var(--eRadioButtonBorderW, 1px);
    }

    & label {
        display: flex;
        flex-direction: column;
        gap: 2px;
        cursor: pointer;
        white-space: nowrap;
    }

    & .k-radio {
        border: 1px solid var(--gray-300);
        background-color: transparent;
        margin-top: 4px;
    }

        & .k-radio:checked {
            background-color: var(--brand-600) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
        }

            & .k-radio:checked:focus,
            & .k-radio:focus {
                box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
            }
}