@layer shwt-widgets {
  shwt-widget-form-radio {
    --_default-bgColor: var(--bgColor, #fafafa);
    --_default-borderColor: var(--borderColor, #e0e0e0);
    --_default-borderWidth: var(--borderWidth, 1px);
    --_default-borderRadius: var(--borderRadius, 50%);
    --_default-padding: var(--padding, 3px);
    --_default-radioDotColor: var(--radioDotColor, #555555);
    --_default-radioDotSize: var(--radioDotSize, 6px);
  }

  shwt-widget-form-radio .shwt-form-field-option {
    --_bgColor: var(--_default-bgColor);
    --_borderColor: var(--_default-borderColor);
    --_borderStyle: var(--_default-borderStyle);
    --_borderWidth: var(--_default-borderWidth);
    --_borderRadius: var(--_default-borderRadius);
    --_padding: var(--_default-padding);
    --_shadowX: var(--_default-shadowX);
    --_shadowY: var(--_default-shadowY);
    --_shadowBlur: var(--_default-shadowBlur);
    --_shadowColor: var(--_default-shadowColor);
    --_innerShadowX: var(--_default-innerShadowX);
    --_innerShadowY: var(--_default-innerShadowY);
    --_innerShadowBlur: var(--_default-innerShadowBlur);
    --_innerShadowColor: var(--_default-innerShadowColor);
    --_inputFont: var(--_default-inputFont);
    --_inputFontWeight: var(--_default-inputFontWeight);
    --_inputFontStyle: var(--_default-inputFontStyle);
    --_inputSize: var(--_default-inputSize);
    --_inputColor: var(--_default-inputColor);
    --_radioDotColor: var(--_default-radioDotColor);
    --_radioDotSize: var(--_default-radioDotSize);
  }

  shwt-widget-form-radio .shwt-form-field-wrapper {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  shwt-widget-form-radio .shwt-form-field-label {
    float: var(--labelFloat, none);
    width: var(--labelInlineWidth, auto);
    margin: 0;
    margin-block-end: var(--labelBlockGap, var(--labelGap, 10px));
    margin-inline-end: var(--labelInlineGap, 0);
    padding: 0;
  }

  shwt-widget-form-radio[labelposition="inline"] .shwt-form-field-label {
    float: var(--labelFloat, inline-start);
    width: var(--labelInlineWidth, var(--labelWidth, 120px));
    margin-block-end: var(--labelBlockGap, 0);
    margin-inline-end: var(--labelInlineGap, var(--labelGap, 10px));
  }

  shwt-widget-form-radio .shwt-form-field-options {
    display: flex;
    flex-direction: var(--radioDirection, column);
    flex-wrap: var(--radioWrap, nowrap);
    gap: var(--radioGap, 14px);
  }

  shwt-widget-form-radio[radiodirection="horizontal"] .shwt-form-field-options {
    flex-direction: var(--radioDirection, row);
    flex-wrap: var(--radioWrap, wrap);
  }

  shwt-widget-form-radio .shwt-form-field-option {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  shwt-widget-form-radio .shwt-form-field-option-label {
    font-family: var(--_inputFont);
    font-weight: var(--_inputFontWeight);
    font-style: var(--_inputFontStyle);
    font-size: var(--_inputSize);
    color: var(--_inputColor);
  }

  shwt-widget-form-radio input {
    appearance: none;
    flex: 0 0 auto;
    box-sizing: content-box;
    width: var(--_radioDotSize);
    height: var(--_radioDotSize);
    margin: 0;
    padding: var(--_padding);
    background: var(--_bgColor);
    border-color: var(--_borderColor);
    border-style: var(--_borderStyle);
    border-width: var(--_borderWidth);
    border-radius: var(--_borderRadius);
    box-shadow: var(--_shadowX) var(--_shadowY) var(--_shadowBlur) var(--_shadowColor), inset var(--_innerShadowX) var(--_innerShadowY) var(--_innerShadowBlur) var(--_innerShadowColor);
    color: var(--_radioDotColor);
  }

  shwt-widget-form-radio input:checked::before {
    content: "";
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--radioCheckedFill, currentColor);
    border: var(--radioCheckedRing, 0px) solid currentColor;
  }

  shwt-widget-form-radio[radiostyle="outline"] input:checked::before {
    background: var(--radioCheckedFill, transparent);
    border-width: var(--radioCheckedRing, 2px);
  }
}