// @graupl/icons icon component default values.
//
// Generally, these should not be used directly when styling components unless a static value is needed.
// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
//
// They should not be used to define direct property values (i.e. font-size, color, etc.).
// Those should be defined as custom properties in the `_variables.scss` file.

@use "pkg:@graupl/core/src/scss/defaults" as root-defaults;
@use "pkg:@graupl/core/src/functions/theme";
@use "sass:map";

// Icon selectors.
$selector-base: root-defaults.$component-selector-base !default;
$modifier-selector-base: root-defaults.$modifier-selector-base !default;
$generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
$themeable: true !default;
$icon-selector-base: $selector-base !default;
$icon-selector: "icon" !default;
$icon-before-selector: "#{$icon-selector}-before" !default;
$icon-after-selector: "#{$icon-selector}-after" !default;
$icon-theme-selector-base: $modifier-selector-base !default;
$icon-theme-selector-prefix: "" !default;
$icon-prefix-selector-base: $modifier-selector-base !default;
$icon-prefix-selector: "" !default;

// Icon properties.
$icon-display: inline-block !default;
$icon-size: 1.25em !default;

// Icons.
// This should be a key/value pair for the name of the icon and the path to the icon's SVG.
$icons: () !default;

// Button state theme defaults.
// This map is used to define the default colour shades for the
// themed icon bases.
//
// e.g.
// Primary icons will use primary--900 as the colour.
//
// Secondary/tertiary icons will use the same shade for their respective colours.
$-icon-theme-mappings: (
  color: 500,
);
$icon-theme-mappings: () !default;

// Merge the custom icon state theme map with the default one.
@if $generate-base-theme-map {
  $icon-theme-mappings: map.merge($-icon-theme-mappings, $icon-theme-mappings);
}

$-icon-theme-map: theme.generate-property-map($icon-theme-mappings);
$icon-theme-map: () !default;
$icon-theme-map: map.deep-merge($-icon-theme-map, $icon-theme-map);