/* docara-shell-source: runtime/component/radio/css/radio.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  /* The native input of a radio drawn by the component (the font variant among
     them): kept in the form and the focus order, out of sight. */
  .sf-radio-native {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    inline-size: 0;
    height: 0;
    block-size: 0;
    margin: 0;
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-radio-button {
    background-color: transparent;
    background-color: var(--sf-radio-button--background-color, transparent);
    gap: var(--sf-radio-button--gap);
  }
  .sf-radio-button > .sf-radio-button-container > .sf-radio-button-top > .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-icon-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
    height: var(--sf-icon-size-3);
    height: var(--sf-icon--height, var(--sf-icon-size-3));
    width: var(--sf-icon-size-3);
    width: var(--sf-icon--width, var(--sf-icon-size-3));
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-radio-button-box--gap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-end-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-end-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-start-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-start-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-top-right-radius: var(--sf-radio-button-box--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-top-right-radius: var(--sf-radio-button-box--border-start-end-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radio-button-box--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-top-left-radius: var(--sf-radio-button-box--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-top-left-radius: var(--sf-radio-button-box--border-start-end-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radio-button-box--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-top-left-radius: var(--sf-radio-button-box--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-top-left-radius: var(--sf-radio-button-box--border-start-start-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radio-button-box--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-top-right-radius: var(--sf-radio-button-box--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-top-right-radius: var(--sf-radio-button-box--border-start-start-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radio-button-box--border-start-start-radius);
  }
  .sf-radio-button .sf-radio-button-box {
    /* Public variables (core/contracts/public-variables.v1.json): names with a
       single dash after the block, never set by the Framework, read where the
       resting ring is drawn -- here and by size -- and not by checked, hover,
       focus, error or disabled, so states still show. */
    --sf-radio-button-box--background-color: var(--sf-radio-button-background-color, transparent);
    --sf-radio-button-box--border: var(--sf-px) solid;
    --sf-radio-button-box--border-color: var(--sf-radio-button-border-color, var(--sf-outline));
    --sf-radio-button-box--border-end-end-radius: var(--sf-radius-circle);
    --sf-radio-button-box--border-end-start-radius: var(--sf-radius-circle);
    --sf-radio-button-box--border-start-end-radius: var(--sf-radius-circle);
    --sf-radio-button-box--border-start-start-radius: var(--sf-radius-circle);
    --sf-radio-button-box--border-style: solid;
    --sf-radio-button-box--border-width: var(--sf-radio-button-border-width, var(--sf-px));
    --sf-radio-button-box--gap: var(--sf-a0);
    background-color: var(--sf-radio-button-box--background-color);
    border: var(--sf-radio-button-box--border);
    border-color: transparent;
    border-color: var(--sf-radio-button-box--border-color, transparent);
    border-end-end-radius: var(--sf-radio-button-box--border-end-end-radius);
    border-end-start-radius: var(--sf-radio-button-box--border-end-start-radius);
    border-start-end-radius: var(--sf-radio-button-box--border-start-end-radius);
    border-start-start-radius: var(--sf-radio-button-box--border-start-start-radius);
    border-style: solid;
    border-style: var(--sf-radio-button-box--border-style, solid);
    border-width: var(--sf-radio-button-box--border-width);
    box-shadow: var(--sf-radio-button-box--box-shadow);
    gap: var(--sf-radio-button-box--gap);
    height: var(--sf-radio-button-box--height);
    width: var(--sf-radio-button-box--width);
  }
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-radio-button .sf-radio-button-container {
    --sf-radio-button-container--background-color: transparent;
    background-color: var(--sf-radio-button-container--background-color);
  }
  .sf-radio-button .sf-radio-button-description {
    --sf-radio-button-description--color: var(--sf-on-surface-variant);
    --sf-radio-button-description--font-family: var(--sf-text--family);
    --sf-radio-button-description--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-radio-button-description--color);
    font-family: var(--sf-radio-button-description--font-family);
    font-size: var(--sf-radio-button-description--font-size);
    font-weight: var(--sf-radio-button-description--font-weight);
    line-height: var(--sf-radio-button-description--line-height);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) gap/var(--sf-radio-button-top--gap) */
  .sf-radio-button .sf-radio-button-top {
    --sf-radio-button-top--background-color: transparent;
    background-color: var(--sf-radio-button-top--background-color);
    gap: var(--sf-radio-button-top--gap);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  .sf-radio-button .sf-radio-button-text {
    --sf-radio-button-text--background-color: transparent;
    background-color: var(--sf-radio-button-text--background-color);
    color: var(--sf-radio-button-text--color);
    font-family: var(--sf-radio-button-text--font-family);
    font-size: var(--sf-radio-button-text--font-size);
    font-weight: var(--sf-radio-button-text--font-weight);
    line-height: var(--sf-radio-button-text--line-height);
    --sf-radio-button-text--color: var(--sf-radio-button-color, var(--sf-on-surface));
  }
  .sf-radio-button .sf-radio-button-mark {
    background-color: var(--sf-radio-button-mark--background-color);
    border-radius: var(--sf-radio-button-mark--border-radius);
    height: var(--sf-radio-button-mark--height);
    width: var(--sf-radio-button-mark--width);
  }
  .sf-radio-button.sf-radio-button--size-1\/2 .sf-radio-button-box {
    --sf-radio-button-box--height: var(--sf-radio-button-size, var(--sf-text-height-1\/2));
    --sf-radio-button-box--width: var(--sf-radio-button-size, var(--sf-text-height-1\/2));
  }
  .sf-radio-button.sf-radio-button--size-1 .sf-radio-button-box {
    --sf-radio-button-box--height: var(--sf-radio-button-size, var(--sf-text-height-1));
    --sf-radio-button-box--width: var(--sf-radio-button-size, var(--sf-text-height-1));
  }
  .sf-radio-button.sf-radio-button--size-1\/2 .sf-radio-button-description {
    --sf-radio-button-description--font-size: var(--sf-text-size-1\/3);
    --sf-radio-button-description--line-height: var(--sf-text-height-1\/3);
  }
  .sf-radio-button.sf-radio-button--size-1 .sf-radio-button-description {
    --sf-radio-button-description--font-size: var(--sf-text-size-1\/2);
    --sf-radio-button-description--line-height: var(--sf-text-height-1\/2);
  }
  .sf-radio-button.sf-radio-button--size-1\/2 .sf-radio-button-text {
    --sf-radio-button-text--font-size: var(--sf-text-size-1\/2);
    --sf-radio-button-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-radio-button.sf-radio-button--size-1 .sf-radio-button-text {
    --sf-radio-button-text--font-size: var(--sf-text-size-1);
    --sf-radio-button-text--line-height: var(--sf-text-height-1);
  }
  .sf-radio-button.sf-radio-button--size-1\/2 .sf-radio-button-text {
    --sf-radio-button-text--font-family: var(--sf-text--family);
    --sf-radio-button-text--font-weight: var(--sf-font-weight-medium);
  }
  .sf-radio-button.sf-radio-button--size-1 .sf-radio-button-text {
    --sf-radio-button-text--font-family: var(--sf-text--family);
    --sf-radio-button-text--font-weight: var(--sf-font-weight-medium);
  }
  .sf-radio-button.sf-radio-button--size-1\/2 .sf-radio-button-top {
    --sf-radio-button-top--gap: var(--sf-space-1\/4);
  }
  .sf-radio-button.sf-radio-button--size-1 .sf-radio-button-top {
    --sf-radio-button-top--gap: var(--sf-space-1\/4);
  }
  .sf-radio-button.sf-radio-button--size-1\/2[\:has\(input\:checked\)] .sf-radio-button-mark {
    --sf-radio-button-mark--height: var(--sf-b2);
    --sf-radio-button-mark--width: var(--sf-b2);
  }
  .sf-radio-button.sf-radio-button--size-1\/2:has(input:checked) .sf-radio-button-mark {
    --sf-radio-button-mark--height: var(--sf-b2);
    --sf-radio-button-mark--width: var(--sf-b2);
  }
  .sf-radio-button.sf-radio-button--size-1[\:has\(input\:checked\)] .sf-radio-button-mark {
    --sf-radio-button-mark--height: var(--sf-b2);
    --sf-radio-button-mark--width: var(--sf-b2);
  }
  .sf-radio-button.sf-radio-button--size-1:has(input:checked) .sf-radio-button-mark {
    --sf-radio-button-mark--height: var(--sf-b2);
    --sf-radio-button-mark--width: var(--sf-b2);
  }
  .sf-radio-button[\:has\(input\:disabled\)] .sf-radio-button-text {
    --sf-radio-button-text--color: var(--sf-on-disable);
  }
  .sf-radio-button:has(input:disabled) .sf-radio-button-text {
    --sf-radio-button-text--color: var(--sf-on-disable);
  }
  /* The mark is the picture before a label: the label follows it at the size's
     text step, as an option label follows its picture in a list. */
  .sf-radio-button--size-1\/2 {
    --sf-radio-button--gap: var(--sf-radio-button-gap, var(--sf-ui-1\/2--text-space-x));
  }
  .sf-radio-button--size-1 {
    --sf-radio-button--gap: var(--sf-radio-button-gap, var(--sf-ui-1--text-space-x));
  }
  .sf-radio-button.sf-radio-button--size-2 .sf-radio-button-box {
    --sf-radio-button-box--height: var(--sf-radio-button-size, var(--sf-text-height-2));
    --sf-radio-button-box--width: var(--sf-radio-button-size, var(--sf-text-height-2));
  }
  .sf-radio-button.sf-radio-button--size-2 .sf-radio-button-description {
    --sf-radio-button-description--font-size: var(--sf-text-size-1);
    --sf-radio-button-description--line-height: var(--sf-text-height-1);
  }
  .sf-radio-button.sf-radio-button--size-2 .sf-radio-button-text {
    --sf-radio-button-text--font-size: var(--sf-text-size-2);
    --sf-radio-button-text--line-height: var(--sf-text-height-2);
  }
  .sf-radio-button.sf-radio-button--size-2 .sf-radio-button-text {
    --sf-radio-button-text--font-family: var(--sf-text--family);
    --sf-radio-button-text--font-weight: var(--sf-font-weight-medium);
  }
  .sf-radio-button.sf-radio-button--size-2 .sf-radio-button-top {
    --sf-radio-button-top--gap: var(--sf-space-1\/4);
  }
  .sf-radio-button.sf-radio-button--size-2[\:has\(input\:checked\)] .sf-radio-button-mark {
    --sf-radio-button-mark--height: var(--sf-b2);
    --sf-radio-button-mark--width: var(--sf-b2);
  }
  .sf-radio-button.sf-radio-button--size-2:has(input:checked) .sf-radio-button-mark {
    --sf-radio-button-mark--height: var(--sf-b2);
    --sf-radio-button-mark--width: var(--sf-b2);
  }
  .sf-radio-button--size-2 {
    --sf-radio-button--gap: var(--sf-radio-button-gap, var(--sf-ui-2--text-space-x));
  }
  .sf-radio-button[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:hover\)] .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-primary-hover);
  }
  .sf-radio-button:has(input:enabled:not(:disabled):not(.disabled):hover) .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-primary-hover);
  }
  /* Hover shows on the ring alone, as on the checkbox: a fill behind the ring
     and its label marked the text, which no control here does (owner,
     2026-10-13). */
  .sf-radio-button[\:has\(input\:checked\)][\:not-has\(input\:disabled\)] .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-primary);
  }
  .sf-radio-button:has(input:checked):not(:has(input:disabled)) .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-primary);
  }
  .sf-radio-button[\:has\(input\:checked\)] .sf-radio-button-mark {
    --sf-radio-button-mark--border-radius: var(--sf-radius-circle);
  }
  .sf-radio-button:has(input:checked) .sf-radio-button-mark {
    --sf-radio-button-mark--border-radius: var(--sf-radius-circle);
  }
  .sf-radio-button[\:has\(input\:checked\)][\:not-has\(input\:disabled\)] .sf-radio-button-mark {
    --sf-radio-button-mark--background-color: var(--sf-primary);
  }
  .sf-radio-button:has(input:checked):not(:has(input:disabled)) .sf-radio-button-mark {
    --sf-radio-button-mark--background-color: var(--sf-primary);
  }
  .sf-radio-button[\:has\(input\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-radio-button-box {
    --sf-radio-button-box--background-color: var(--sf-transparent-for-focus);
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-radio-button:has(input:not(:disabled):not(.disabled).focus-visible) .sf-radio-button-box {
    --sf-radio-button-box--background-color: var(--sf-transparent-for-focus);
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-radio-button[\:has\(input\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-radio-button-box {
    --sf-radio-button-box--background-color: var(--sf-transparent-for-focus);
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-radio-button:has(input:not(:disabled):not(.disabled):focus-visible) .sf-radio-button-box {
    --sf-radio-button-box--background-color: var(--sf-transparent-for-focus);
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  /* The global :focus-visible rule paints the ring on whatever holds the focus.
     Here the focus lives on the bare control while the ring belongs to the part
     the person sees, so the control gives its own ring up: one component, one
     ring. */
  .sf-radio-button input.focus-visible {
    outline: none;
  }
  .sf-radio-button input:focus-visible {
    outline: none;
  }
  .sf-radio-button[\:has\(input\:disabled\)] .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-outline-disable);
  }
  .sf-radio-button:has(input:disabled) .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-outline-disable);
  }
  .sf-radio-button[\:has\(input\:disabled\)] .sf-radio-button-mark {
    --sf-radio-button-mark--background-color: var(--sf-on-disable);
  }
  .sf-radio-button:has(input:disabled) .sf-radio-button-mark {
    --sf-radio-button-mark--background-color: var(--sf-on-disable);
  }
  .sf-radio-button[\:has\(input\:disabled\)] > .sf-radio-button-container > .sf-radio-button-top > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-radio-button:has(input:disabled) > .sf-radio-button-container > .sf-radio-button-top > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-radio-button[\:has\(input\:disabled\)] .sf-radio-button-description {
    --sf-radio-button-description--color: var(--sf-on-disable);
  }
  .sf-radio-button:has(input:disabled) .sf-radio-button-description {
    --sf-radio-button-description--color: var(--sf-on-disable);
  }
  .sf-radio-button.error .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-error);
  }
}
@layer sf.states {
  @media (forced-colors: active) {
    .sf-radio-button .sf-radio-button-box {
      forced-color-adjust: none;
      background-color: Canvas;
      border-color: ButtonText;
    }
    .sf-radio-button .sf-radio-button-mark {
      background-color: transparent;
    }
    .sf-radio-button[\:has\(input\:checked\)] .sf-radio-button-box {
      border-color: Highlight;
    }
    .sf-radio-button:has(input:checked) .sf-radio-button-box {
      border-color: Highlight;
    }
    .sf-radio-button[\:has\(input\:checked\)] .sf-radio-button-mark {
      background-color: Highlight;
    }
    .sf-radio-button:has(input:checked) .sf-radio-button-mark {
      background-color: Highlight;
    }
    .sf-radio-button[\:has\(input\:disabled\)] .sf-radio-button-box {
      border-color: GrayText;
    }
    .sf-radio-button:has(input:disabled) .sf-radio-button-box {
      border-color: GrayText;
    }
    .sf-radio-button[\:has\(input\:disabled\:checked\)] .sf-radio-button-mark {
      background-color: GrayText;
    }
    .sf-radio-button:has(input:disabled:checked) .sf-radio-button-mark {
      background-color: GrayText;
    }
    .sf-radio-button[\:has\(input\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-radio-button-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-radio-button-box--box-shadow: none;
    }
    .sf-radio-button:has(input:not(:disabled):not(.disabled).focus-visible) .sf-radio-button-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-radio-button-box--box-shadow: none;
    }
    .sf-radio-button[\:has\(input\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-radio-button-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-radio-button-box--box-shadow: none;
    }
    .sf-radio-button:has(input:not(:disabled):not(.disabled):focus-visible) .sf-radio-button-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-radio-button-box--box-shadow: none;
    }
  }
}
@layer sf.components {
  .sf-radio-button {
    min-width: 0;
  }
  .sf-radio-button:not(.disabled)[\:has\(input\:not\(\:disabled\)\)] {
    cursor: pointer;
  }
  .sf-radio-button:not(.disabled):has(input:not(:disabled)) {
    cursor: pointer;
  }
  .sf-radio-button[\:has\(input\:disabled\)] {
    cursor: default;
  }
  .sf-radio-button:has(input:disabled) {
    cursor: default;
  }
  .sf-radio-button .sf-radio-button-container {
    min-width: 0;
  }
  .sf-radio-button .sf-radio-button-box {
    position: relative;
    flex-shrink: 0;
  }
  /* The native control is the hit area. It covers the mark and reaches at
     least 24px on each axis (WCAG 2.2, 2.5.8) where the mark is smaller: a size
     1/2 mark is 16px on mobile, a size 1 mark 20. The inset only goes negative,
     evenly on both sides, so a larger mark keeps its own box and RTL needs
     nothing. The mark itself does not change. */
  .sf-radio-button .sf-radio-button-box > input[type=radio] {
    position: absolute;
    top: min(0px, (100% - var(--sf-c2)) / 2);
    right: min(0px, (100% - var(--sf-c2)) / 2);
    bottom: min(0px, (100% - var(--sf-c2)) / 2);
    left: min(0px, (100% - var(--sf-c2)) / 2);
    inset: min(0px, (100% - var(--sf-c2)) / 2) min(0px, (100% - var(--sf-c2)) / 2);
    width: max(100%, var(--sf-c2));
    inline-size: max(100%, var(--sf-c2));
    height: max(100%, var(--sf-c2));
    block-size: max(100%, var(--sf-c2));
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }
  .sf-radio-button .sf-radio-button-text {
    white-space: normal;
    white-space: var(--sf-radio-button-text--white-space, normal);
    word-wrap: anywhere;
  }
  .sf-radio-group--font {
    gap: var(--sf-space-1\/4);
    flex-wrap: wrap;
  }
  .sf-radio-wrap--type-font {
    align-items: flex-start;
    gap: var(--sf-space-1\/3);
    min-width: 0;
  }
  .sf-radio-wrap--type-font:hover {
    --sf-radio-button--background-color: transparent;
  }
  .sf-radio-button--type-font {
    position: relative;
  }
  .sf-radio-button--type-font .sf-radio-text {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    box-sizing: border-box;
    color: var(--sf-on-surface);
    background-color: var(--sf-surface-0);
    border: var(--sf-px) solid var(--sf-outline);
    border-radius: var(--sf-radius--ui);
    font-family: inherit;
    font-family: var(--sf-radio-font--family, inherit);
    font-style: normal;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: var(--sf-duration-fast);
    transition-timing-function: var(--sf-animation);
  }
  .sf-radio-button--type-font.sf-radio-button--size-1\/2 .sf-radio-text {
    width: var(--sf-d1);
    inline-size: var(--sf-d1);
    height: var(--sf-c1);
    block-size: var(--sf-c1);
    font-size: var(--sf-text-size-1\/2);
    line-height: var(--sf-text-height-1\/2);
  }
  .sf-radio-button--type-font.sf-radio-button--size-1 .sf-radio-text {
    width: var(--sf-d2);
    inline-size: var(--sf-d2);
    height: var(--sf-c2);
    block-size: var(--sf-c2);
    font-size: var(--sf-text-size-1);
    line-height: var(--sf-text-height-1);
  }
  .sf-radio-button--type-font.sf-radio-button--size-2 .sf-radio-text {
    width: var(--sf-d4);
    inline-size: var(--sf-d4);
    height: var(--sf-c4);
    block-size: var(--sf-c4);
    font-size: var(--sf-text-size-2);
    line-height: var(--sf-text-height-2);
  }
  .sf-radio-button--type-font[\:has\(input\:not\(\:disabled\)\:hover\)] .sf-radio-text {
    border-color: var(--sf-primary-hover);
    background-color: var(--sf-surface-container-hover);
  }
  .sf-radio-button--type-font:has(input:not(:disabled):hover) .sf-radio-text {
    border-color: var(--sf-primary-hover);
    background-color: var(--sf-surface-container-hover);
  }
  .sf-radio-button--type-font .sf-radio-text.active {
    color: var(--sf-on-primary);
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
  }
  .sf-radio-button--type-font[\:has\(input.focus-visible\)] .sf-radio-text {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-radio-button--type-font:has(input.focus-visible) .sf-radio-text {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-radio-button--type-font[\:has\(input\:focus-visible\)] .sf-radio-text {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-radio-button--type-font:has(input:focus-visible) .sf-radio-text {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-radio-button--type-font[\:has\(input\:disabled\)] .sf-radio-text {
    color: var(--sf-on-disable);
    background-color: var(--sf-surface-0);
    border-color: var(--sf-outline-disable);
  }
  .sf-radio-button--type-font:has(input:disabled) .sf-radio-text {
    color: var(--sf-on-disable);
    background-color: var(--sf-surface-0);
    border-color: var(--sf-outline-disable);
  }
  @media (forced-colors: active) {
    .sf-radio-button--type-font .sf-radio-text {
      forced-color-adjust: none;
      color: ButtonText;
      background-color: Canvas;
      border-color: ButtonText;
    }
    .sf-radio-button--type-font .sf-radio-text.active {
      color: HighlightText;
      background-color: Highlight;
      border-color: Highlight;
    }
    .sf-radio-button--type-font[\:has\(input.focus-visible\)] .sf-radio-text {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      box-shadow: none;
    }
    .sf-radio-button--type-font:has(input.focus-visible) .sf-radio-text {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      box-shadow: none;
    }
    .sf-radio-button--type-font[\:has\(input\:focus-visible\)] .sf-radio-text {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      box-shadow: none;
    }
    .sf-radio-button--type-font:has(input:focus-visible) .sf-radio-text {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      box-shadow: none;
    }
    .sf-radio-button--type-font[\:has\(input\:disabled\)] .sf-radio-text {
      color: GrayText;
      border-color: GrayText;
    }
    .sf-radio-button--type-font:has(input:disabled) .sf-radio-text {
      color: GrayText;
      border-color: GrayText;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-radio-button--type-font .sf-radio-text {
      transition-duration: 0s;
    }
  }
}