$icon-size--default: 1.5rem;

$icon-sizes: (
  xs: .75rem,
  s: 1rem,
  m: $icon-size--default,
  l: 3.75rem,
  xl: 5rem,
);

/// Set icon as token using data URI (standalone mode - no CDN dependency)
/// @param {String} $name - Icon name
/// @param {String} $style - Icon style ('solid' or 'line')
@mixin set-icon-token ($name, $style: 'solid') {
  // CDN_ROOT is no longer used - icons use embedded data URIs via CSS variables
  // The --zi variable is set by icon SCSS files with data URIs based on [icon="..."] selectors
  $style-suffix: if($style == 'line', ':line', '');
  // This sets the icon attribute value for runtime CSS variable matching
  --zi-name: '#{$name}#{$style-suffix}';
}

/// Set the icon mask (standalone mode - no CDN dependency)
/// @param {String} $name - Icon name
/// @param {String} $style - Icon style ('solid' or 'line')
/// @param {String} $size - Icon size key (xs, s, m, l, xl)
@mixin set-icon-mask ($name, $style: 'solid', $size: 'm') {
  $icon-size: #{map-get($icon-sizes, $size)};
  // CDN_ROOT is no longer used - use CSS variable --zi which contains data URI
  mask: var(--zi) center/#{$icon-size} no-repeat;
  -webkit-mask: var(--zi) center/#{$icon-size} no-repeat;
}

/// Set just the icon mask (standalone mode - no CDN dependency)
/// @param {String} $name - Icon name
/// @param {String} $style - Icon style ('solid' or 'line')
@mixin set-only-icon-mask ($name, $style: 'solid') {
  // CDN_ROOT is no longer used - use CSS variable --zi which contains data URI
  mask: var(--zi) no-repeat;
  -webkit-mask: var(--zi) no-repeat;
}

/// Set the icons (standalone mode - no CDN dependency)
/// @param {String} $name - Icon name
/// @param {String} $style - Icon style ('solid' or 'line')
/// @param {String} $size - Icon size key (xs, s, m, l, xl)
@mixin set-icon ( $name, $style: 'solid', $size: 'm') {
  @include set-icon-token($name, $style);
  @include set-icon-without-default($size)
}

/// Set the icons without default
@mixin set-icon-without-default ($size: 'm') {
  content: '';
  width: map-get($icon-sizes, $size);
  height: map-get($icon-sizes, $size);
  display: inline-block;
  box-sizing: content-box;
  background-color: currentColor;
  margin: 0;

  mask: var(--zi) center/#{map-get($icon-sizes, $size)} no-repeat;
  -webkit-mask: var(--zi) center/#{map-get($icon-sizes, $size)} no-repeat;
}

/// Themed tokens mixin
@mixin themedTokens() {
  :where(
    &,
    *[z-theme="light"] &,
    &[z-theme="light"]
  ){ // ⬜ Light
    @content('light');
  }
  :where(
    *[z-theme="dark"] &,
    &[z-theme="dark"]
  ) {  // 🟦 Dark
    @content('dark');
  }
}