@layer shwt-widgets {
  :where(shwt-widget-form-input, shwt-widget-form-checkbox, shwt-widget-form-radio, shwt-widget-form-select) {
    display: block;

    --_default-bgColor: var(--bgColor, #ffffff);
    --_default-borderColor: var(--borderColor, #ababab);
    --_default-borderStyle: var(--borderStyle, solid);
    --_default-borderWidth: var(--borderWidth, 2px);
    --_default-borderRadius: var(--borderRadius, 6px);
    --_default-padding: var(--padding, 14px);
    --_default-shadowX: var(--shadowX, 2px);
    --_default-shadowY: var(--shadowY, 2px);
    --_default-shadowBlur: var(--shadowBlur, 6px);
    --_default-shadowColor: var(--shadowColor, transparent);
    --_default-innerShadowX: var(--innerShadowX, 2px);
    --_default-innerShadowY: var(--innerShadowY, 2px);
    --_default-innerShadowBlur: var(--innerShadowBlur, 6px);
    --_default-innerShadowColor: var(--innerShadowColor, transparent);
    --_default-inputFont: var(--inputFont, Arial, sans-serif);
    --_default-inputFontWeight: var(--inputFontWeight, 400);
    --_default-inputFontStyle: var(--inputFontStyle, normal);
    --_default-inputSize: var(--inputSize, 16px);
    --_default-inputColor: var(--inputColor, #000000);
    --_default-placeholderColor: var(--placeholderColor, #ababab);
    --_default-labelFont: var(--labelFont, Arial, sans-serif);
    --_default-labelFontWeight: var(--labelFontWeight, 400);
    --_default-labelFontStyle: var(--labelFontStyle, normal);
    --_default-labelSize: var(--labelSize, 16px);
    --_default-labelColor: var(--labelColor, #000000);
    --_default-requiredColor: var(--requiredColor, #d74242);

    --_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);
    --_placeholderColor: var(--_default-placeholderColor);
    --_labelFont: var(--_default-labelFont);
    --_labelFontWeight: var(--_default-labelFontWeight);
    --_labelFontStyle: var(--_default-labelFontStyle);
    --_labelSize: var(--_default-labelSize);
    --_labelColor: var(--_default-labelColor);
    --_requiredColor: var(--_default-requiredColor);
  }

  :where(shwt-widget-form-input, shwt-widget-form-checkbox, shwt-widget-form-radio, shwt-widget-form-select):focus-within:not([errored]) {
    --_borderColor: var(--borderColor, #82c7e3);
  }

  :where(shwt-widget-form-input, shwt-widget-form-checkbox, shwt-widget-form-radio, shwt-widget-form-select)[errored] {
    --_borderColor: var(--borderColor, #e74d3c);
    --_labelColor: var(--labelColor, #e74d3c);
  }

  :where(shwt-widget-form-input, shwt-widget-form-checkbox, shwt-widget-form-radio, shwt-widget-form-select) .shwt-form-field-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--_labelFont);
    font-weight: var(--_labelFontWeight);
    font-style: var(--_labelFontStyle);
    font-size: var(--_labelSize);
    color: var(--_labelColor);
  }

  :where(shwt-widget-form-input, shwt-widget-form-checkbox, shwt-widget-form-radio, shwt-widget-form-select) .shwt-form-field-required {
    color: var(--_requiredColor);
    order: var(--requiredOrder, 0);
    display: var(--requiredDisplay, inline);
  }

  :where(shwt-widget-form-input, shwt-widget-form-checkbox, shwt-widget-form-radio, shwt-widget-form-select)[requiredplacement="before"]
    .shwt-form-field-required {
    order: var(--requiredOrder, -1);
  }

  :where(shwt-widget-form-input, shwt-widget-form-checkbox, shwt-widget-form-radio, shwt-widget-form-select)[requiredplacement="hidden"]
    .shwt-form-field-required {
    display: var(--requiredDisplay, none);
  }

  :where(shwt-widget-form-input, shwt-widget-form-checkbox, shwt-widget-form-radio, shwt-widget-form-select) :is(input, select, textarea):disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}