@use './Operators.scss' as *;
@use './Icons/_vars-extended.auto.scss' as icons;

$themes: ('light', 'dark');

// https://sass-lang.com/documentation/at-rules/mixin/#passing-arguments-to-content-blocks
/// ...
@mixin themeContext() {
  @supports selector(:host-context(*[z-theme])) {
    @each $theme in $themes {
      :host-context(*[z-theme="#{$theme}"]) {
        @content('#{$theme}');
      }
    }
  }

  @each $theme in $themes {
    #{if($theme == 'light', ':host,', '')}
    :host([z-theme="#{$theme}"]) {
      @content('#{$theme}');
    }
  }
}

/// Generate icon CSS variables for web components with [icon] attribute
/// This mixin should be included in components that use icons
/// It generates --zi CSS variables for all available icons
@mixin iconSupport() {
  @each $icon-name, $styles in icons.$icons-extended {
    $solid: map-get($styles, 'solid');
    $line: map-get($styles, 'line');

    @if $solid {
      :host([icon^="#{$icon-name}"]) {
        --zi: url("data:image/svg+xml,#{$solid}");
      }
    }

    @if $line {
      :host([icon^="#{$icon-name}:line"]) {
        --zi: url("data:image/svg+xml,#{$line}");
      }
    }
  }
}