.kbq-radio-group {
    --kbq-radio-size-big-vertical-gap: var(--kbq-size-m);
    --kbq-radio-size-normal-vertical-gap: var(--kbq-size-s);
    --kbq-radio-size-big-top: var(--kbq-size-3xs);
    /* THEME TOKENS */
    --kbq-radio-theme-default-outer-circle-border: var(--kbq-line-contrast-fade);
    --kbq-radio-theme-default-outer-circle-background: var(--kbq-background-bg);
    --kbq-radio-theme-default-inner-circle-background: transparent;
    --kbq-radio-theme-default-caption: var(--kbq-foreground-contrast-secondary);
    --kbq-radio-theme-states-hover-outer-circle-border: var(--kbq-line-contrast-fade);
    --kbq-radio-theme-states-hover-outer-circle-background: var(--kbq-states-background-transparent-hover);
    --kbq-radio-theme-states-hover-inner-circle-background: transparent;
    --kbq-radio-theme-states-checked-outer-circle-border: transparent;
    --kbq-radio-theme-states-checked-outer-circle-background: var(--kbq-background-theme);
    --kbq-radio-theme-states-checked-inner-circle-background: var(--kbq-foreground-white);
    --kbq-radio-theme-states-checked-hover-outer-circle-border: var(--kbq-states-background-theme-hover);
    --kbq-radio-theme-states-checked-hover-outer-circle-background: var(--kbq-states-background-theme-hover);
    --kbq-radio-theme-states-checked-hover-inner-circle-background: var(--kbq-foreground-white);
    --kbq-radio-theme-states-checked-disabled-outer-circle-border: var(--kbq-states-line-disabled);
    --kbq-radio-theme-states-checked-disabled-outer-circle-background: var(--kbq-states-background-disabled);
    --kbq-radio-theme-states-checked-disabled-inner-circle-background: var(--kbq-states-icon-disabled);
    --kbq-radio-theme-states-focused-outer-circle-border: transparent;
    --kbq-radio-theme-states-focused-outer-circle-background: var(--kbq-background-bg);
    --kbq-radio-theme-states-focused-inner-circle-background: transparent;
    --kbq-radio-theme-states-focused-outer-circle-shadow: 0 0 0.1px 2px var(--kbq-states-line-focus-theme);
    --kbq-radio-theme-states-checked-focused-outer-circle-border: transparent;
    --kbq-radio-theme-states-checked-focused-outer-circle-background: var(--kbq-background-theme);
    --kbq-radio-theme-states-checked-focused-inner-circle-background: var(--kbq-foreground-white);
    --kbq-radio-theme-states-checked-focused-outer-circle-shadow: 0 0 0.1px 2px var(--kbq-states-line-focus-theme);
    --kbq-radio-theme-states-disabled-outer-circle-border: var(--kbq-states-line-disabled);
    --kbq-radio-theme-states-disabled-outer-circle-background: var(--kbq-states-background-disabled);
    --kbq-radio-theme-states-disabled-inner-circle-background: transparent;
    --kbq-radio-theme-states-disabled-caption: var(--kbq-states-foreground-disabled);
    --kbq-radio-error-default-outer-circle-border: var(--kbq-line-error);
    --kbq-radio-error-default-outer-circle-background: var(--kbq-background-error-less);
    --kbq-radio-error-default-inner-circle-background: transparent;
    --kbq-radio-error-states-hover-outer-circle-border: var(--kbq-line-error);
    --kbq-radio-error-states-hover-outer-circle-background: var(--kbq-states-background-error-fade-hover);
    --kbq-radio-error-states-hover-inner-circle-background: transparent;
    --kbq-radio-error-states-checked-outer-circle-border: transparent;
    --kbq-radio-error-states-checked-outer-circle-background: var(--kbq-background-error);
    --kbq-radio-error-states-checked-inner-circle-background: var(--kbq-icon-white);
    --kbq-radio-error-states-checked-hover-outer-circle-border: transparent;
    --kbq-radio-error-states-checked-hover-outer-circle-background: var(--kbq-states-background-error-hover);
    --kbq-radio-error-states-checked-hover-inner-circle-background: var(--kbq-icon-white);
    --kbq-radio-error-states-checked-disabled-outer-circle-border: var(--kbq-states-line-disabled);
    --kbq-radio-error-states-checked-disabled-outer-circle-background: var(--kbq-states-background-disabled);
    --kbq-radio-error-states-checked-disabled-inner-circle-background: var(--kbq-states-icon-disabled);
    --kbq-radio-error-states-focused-outer-circle-border: transparent;
    --kbq-radio-error-states-focused-outer-circle-background: var(--kbq-background-error-less);
    --kbq-radio-error-states-focused-inner-circle-background: transparent;
    --kbq-radio-error-states-focused-outer-circle-shadow: 0 0 0.1px 2px var(--kbq-states-line-focus-error);
    --kbq-radio-error-states-checked-focused-outer-circle-border: transparent;
    --kbq-radio-error-states-checked-focused-outer-circle-background: var(--kbq-background-error);
    --kbq-radio-error-states-checked-focused-inner-circle-background: var(--kbq-icon-white);
    --kbq-radio-error-states-checked-focused-outer-circle-shadow: 0 0 0.1px 2px var(--kbq-states-line-focus-error);
    --kbq-radio-error-states-disabled-outer-circle-border: var(--kbq-states-line-disabled);
    --kbq-radio-error-states-disabled-outer-circle-background: var(--kbq-states-background-disabled);
    --kbq-radio-error-states-disabled-inner-circle-background: transparent;
    --kbq-radio-error-states-disabled-caption: var(--kbq-states-foreground-disabled);
}

.kbq-radio-button {
    --kbq-radio-size-normal-outer-circle-border-width: var(--kbq-size-border-width);
    --kbq-radio-size-normal-outer-size: calc(
        var(--kbq-size-l) - var(--kbq-radio-size-normal-outer-circle-border-width) * 2
    );
    --kbq-radio-size-normal-inner-size: var(--kbq-size-xs);
    --kbq-radio-size-normal-horizontal-content-padding: var(--kbq-size-s);
    --kbq-radio-size-normal-vertical-content-padding: var(--kbq-size-3xs);
    --kbq-radio-size-normal-top: 0;
    --kbq-radio-size-big-outer-circle-border-width: var(--kbq-size-border-width);
    --kbq-radio-size-big-outer-size: calc(var(--kbq-size-l) - var(--kbq-radio-size-big-outer-circle-border-width) * 2);
    --kbq-radio-size-big-inner-size: var(--kbq-size-xs);
    --kbq-radio-size-big-horizontal-content-padding: var(--kbq-size-s);
    --kbq-radio-size-big-vertical-content-padding: var(--kbq-size-3xs);
}
