Tokens

@use 'node_modules/@sipster/core/tools' as *;

body {
  --sds_selectionList_background_color: var(
    --sds_theme_background,
    #{sds-color(neutral, 05)}
  );
  --sds_selectionList_border_color: var(
    --sds_theme_control_border,
    #{sds-color(neutral, 30)}
  );
  --sds_selectionList_border_radius: var(--sds_theme_border_radius, 0.5rem);
  --sds_selectionList_border_style: solid;
  --sds_selectionList_border_width: 1px;
  --sds_selectionList_description: var(
    --sds_theme_text_subtle,
    #{sds-color(neutral, 60)}
  );
  --sds_selectionList_icon: var(--sds_theme_icon, #{sds-color(neutral, 70)});
  --sds_selectionList_icon_container: var(
    --sds_theme_background_low,
    #{sds-color(neutral, 10)}
  );
  --sds_selectionList_label: var(--sds_theme_text, #{sds-color(black)});

  --sds_selectionList_hover_background_color: var(
    --sds_theme_background_high,
    #{sds-color(white)}
  );
  --sds_selectionList_hover_border_color: var(
    --sds_theme_control_hover_border,
    #{sds-color(neutral)}
  );
  --sds_selectionList_hover_border_radius: var(
    --sds_selectionList_border_radius
  );

  --sds_selectionList_hover_border_style: var(--sds_selectionList_border_style);
  --sds_selectionList_hover_border_width: var(--sds_selectionList_border_width);
  --sds_selectionList_hover_description: var(
    --sds_theme_text,
    #{sds-color(black)}
  );

  --sds_selectionList_hover_icon: var(
    --sds_theme_icon_interactive,
    #{sds-color(black)}
  );
  --sds_selectionList_hover_icon_container: var(
    --sds_selectionList_icon_container
  );
  --sds_selectionList_hover_label: var(--sds_selectionList_label);

  --sds_selectionList_focus_background_color: var(
    --sds_selectionList_hover_background_color
  );
  --sds_selectionList_focus_border_color: var(
    --sds_theme_control_focus_border,
    #{sds-color(neutral)}
  );
  --sds_selectionList_focus_border_radius: var(
    --sds_selectionList_hover_border_radius
  );
  --sds_selectionList_focus_border_style: var(
    --sds_selectionList_hover_border_style
  );
  --sds_selectionList_focus_border_width: var(
    --sds_selectionList_hover_border_width
  );
  --sds_selectionList_focus_description: var(
    --sds_selectionList_hover_description
  );
  --sds_selectionList_focus_icon: var(--sds_selectionList_hover_icon);
  --sds_selectionList_focus_icon_container: var(
    --sds_selectionList_hover_icon_container
  );
  --sds_selectionList_focus_label: var(--sds_selectionList_hover_label);
  --sds_selectionList_focus_shadow: var(
    --sds_theme_focus_shadow,
    0 0 0 4px rgba(77, 95, 214, 0.64)
  );

  --sds_selectionList_checked_background_color: var(
    --sds_theme_background_high,
    #{sds-color(white)}
  );
  --sds_selectionList_checked_border_color: var(
    --sds_theme_focus_border,
    #{sds-color(indigo, 60)}
  );

  --sds_selectionList_checked_border_radius: var(
    --sds_selectionList_border_radius
  );
  --sds_selectionList_checked_border_style: var(
    --sds_selectionList_border_style
  );

  --sds_selectionList_checked_border_width: 2px;
  --sds_selectionList_checked_description: var(
    --sds_theme_text,
    #{sds-color(black)}
  );
  --sds_selectionList_checked_icon: var(
    --sds_theme_icon_inverted,
    #{sds-color(white)}
  );
  --sds_selectionList_checked_icon_container: var(
    --sds_theme_color_primary,
    #{sds-color(indigo, 60)}
  );
  --sds_selectionList_checked_label: var(--sds_selectionList_label);

  --sds_selectionList_error_background_color: var(
    --sds_theme_control_error_background,
    #{sds-color(red, 05)}
  );
  --sds_selectionList_error_border_color: var(
    --sds_theme_control_error_border,
    #{sds-color(red, 60)}
  );
  --sds_selectionList_error_border_radius: var(
    --sds_selectionList_border_radius
  );
  --sds_selectionList_error_border_style: var(--sds_selectionList_border_style);
  --sds_selectionList_error_border_width: 2px;

  --sds_selectionList_error_description: var(
    --sds_theme_control_error_text,
    #{sds-color(red, 70)}
  );
  --sds_selectionList_error_icon: var(
    --sds_theme_icon_inverted,
    #{sds-color(white)}
  );
  --sds_selectionList_error_icon_container: var(
    --sds_theme_control_error_icon,
    #{sds-color(red, 60)}
  );
  --sds_selectionList_error_label: var(
    --sds_theme_control_error_text,
    #{sds-color(red, 70)}
  );

  --sds_selectionList_disabled_background_color: var(
    --sds_selectionList_background_color
  );
  --sds_selectionList_disabled_border_color: var(
    --sds_theme_control_disabled_border,
    #{sds-color(neutral, 30)}
  );
  --sds_selectionList_disabled_border_radius: var(
    --sds_selectionList_border_radius
  );
  --sds_selectionList_disabled_border_style: var(
    --sds_selectionList_border_style
  );
  --sds_selectionList_disabled_border_width: var(
    --sds_selectionList_border_width
  );
  --sds_selectionList_disabled_description: var(
    --sds_selectionList_description
  );
  --sds_selectionList_disabled_icon: var(--sds_selectionList_icon);
  --sds_selectionList_disabled_icon_container: var(
    --sds_selectionList_icon_container
  );
  --sds_selectionList_disabled_label: var(--sds_selectionList_label);
  --sds_selectionList_disabled_opacity: var(--sds_theme_disabled_opacity, 48%);

  --sds_selectionList_image_aspect_ratio: 1;

  --sds_selectionList_nested_background_color: var(
    --sds_theme_background,
    #{sds-color(neutral, 05)}
  );
  --sds_selectionList_nested_border_color: var(
    --sds_selectionList_border_color
  );
}

//Simplified Checkbox & Radio
//NOTE: It is necessary to replicate these tokens to give support for a individual installation of the component

body {
  //Checkbox
  --sds_checkbox_background: var(
    --sds_theme_control_background,
    #{sds-color(white)}
  );
  --sds_checkbox_border_color: var(
    --sds_theme_control_border,
    #{sds-color(neutral, 30)}
  );
  --sds_checkbox_border_radius: 4px;
  --sds_checkbox_border_style: solid;
  --sds_checkbox_border_width: 1px;
  --sds_checkbox_text: var(--sds_theme_control_text, #{sds-color(black)});

  --sds_checkbox_checked_background: var(
    --sds_theme_color_primary,
    #{sds-color(indigo, 60)}
  );
  --sds_checkbox_checked_border_color: var(
    --sds_theme_color_primary_interactive,
    #{sds-color(indigo, 70)}
  );
  --sds_checkbox_checked_border_width: 1px;

  --sds_checkbox_indicator: var(
    --sds_theme_control_checked_indicator,
    #{sds-color(white)}
  );

  --sds_checkbox_error_background: var(
    --sds_theme_control_error_background,
    #{sds-color(red, 05)}
  );
  --sds_checkbox_error_border_color: var(
    --sds_theme_control_error_border,
    #{sds-color(red, 60)}
  );
  --sds_checkbox_error_border_style: var(--sds_checkbox_border_style);
  --sds_checkbox_error_border_width: 2px;

  --sds_checkbox_disabled_background: var(
    --sds_theme_control_disabled_background,
    #{sds-color(white)}
  );
  --sds_checkbox_disabled_border_style: var(--sds_checkbox_border_style);
  --sds_checkbox_disabled_border_color: var(
    --sds_theme_control_disabled_border,
    #{sds-color(neutral, 30)}
  );
  --sds_checkbox_disabled_border_width: 1px;
  //Radio
  --sds_radio_background: var(
    --sds_theme_control_background,
    #{sds-color(white)}
  );
  --sds_radio_border_color: var(
    --sds_theme_control_border,
    #{sds-color(neutral, 30)}
  );
  --sds_radio_border_radius: 50%;
  --sds_radio_border_style: solid;
  --sds_radio_border_width: 1px;
  --sds_radio_text: var(--sds_theme_control_text, #{sds-color(black)});

  --sds_radio_checked_background: var(
    --sds_theme_color_primary,
    #{sds-color(indigo, 60)}
  );
  --sds_radio_checked_border_color: var(
    --sds_theme_color_primary_interactive,
    #{sds-color(indigo, 60)}
  );
  --sds_radio_checked_border_width: 1px;

  --sds_radio_indicator: var(
    --sds_theme_control_checked_indicator,
    #{sds-color(white)}
  );

  --sds_radio_error_background: var(
    --sds_theme_control_error_background,
    #{sds-color(red, 05)}
  );
  --sds_radio_error_border_style: var(--sds_radio_border_style);
  --sds_radio_error_border_color: var(
    --sds_theme_control_error_border,
    #{sds-color(red, 60)}
  );
  --sds_radio_error_border_width: 1px;

  --sds_radio_disabled_background: var(
    --sds_theme_control_disabled_background,
    #{sds-color(white)}
  );
  --sds_radio_disabled_border_style: var(--sds_radio_border_style);
  --sds_radio_disabled_border_color: var(
    --sds_theme_control_disabled_border,
    #{sds-color(neutral, 30)}
  );
  --sds_radio_disabled_border_width: 1px;
}