@use "../../../../styles/tokens/color";
@use "../../styles/config" as commonConfig;

$checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23fff'/%3E%3C/svg%3E");
$invalid-checked-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23ffffff'/%3E%3C/svg%3E");

$states: (
  default: commonConfig.$default,
  focus: (
    outline: 2px solid var(--color-border-contrast),
    outline-offset: 2px,
  ),
  checked: (
    border-color: var(--color-border-accent),
    background-color: var(--color-surface-tertiary),
    background-image: $checked-bg,
    background-size: cover,
  ),
  disabled: commonConfig.$disabled,
  disabled-checked: commonConfig.$disabled-checked,
  invalid: commonConfig.$invalid,
  invalid-checked: (
    background-color: var(--color-icon-negative),
    background-image: $invalid-checked-bg,
  ),
);

$sizes: commonConfig.$radiocheck-sizes;