/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-for-theme($name) {
  @if ($el-theme-name == $name) {
    @content;
  }
}

@mixin el-for-themes($names...) {
  @each $name in $names {
    @include el-for-theme($name) {
      @content;
    }
  }
}

@mixin el-except-theme($name) {
  @if ($el-theme-name != $name) {
    @content;
  }
}

@mixin el-except-for-themes($names...) {
  @each $name in $names {
    @include el-except-theme($name) {
      @content;
    }
  }
}

@mixin el-install-css-properties($theme-name, $theme) {
  .el-theme-#{$theme-name} {

    @each $var, $value in $theme {
      @if (type-of($value) == 'string' and map-get($theme, $value)) {
        --#{$var}: var(--#{$value});
      } @else {
        --#{$var}: #{$value};
      }
    }
  }
}

@mixin el-pre-process-context($theme-name) {
  $el-theme-process-mode: 'pre-process' !global;

  $el-theme-name: $theme-name !global;
  $el-processed-theme: el-process-theme(el-get-registered-theme($theme-name)) !global;
}

@mixin el-lazy-process-context($theme-name) {
  $el-theme-process-mode: 'lazy-process' !global;

  $el-theme-name: $theme-name !global;
  $el-processed-theme: () !global;
}

@mixin el-install-component-with-css-props() {
  // @breaking-change 5.0.0
  :host {
    @content;
  }
}

@mixin el-install-component-with-scss-vars() {
  $enabled-themes: el-get-enabled-themes();

  @each $theme-name in $enabled-themes {

    @include el-lazy-process-context($theme-name);

    /*
      :host can be prefixed
      https://github.com/angular/angular/blob/8d0ee34939f14c07876d222c25b405ed458a34d3/packages/compiler/src/shadow_css.ts#L441

      We have to use :host instead of :host-context($theme), to be able to prefix theme class
      with something defined inside of @content, by prefixing &.
      For example this scss code:
        .el-theme-default {
          .some-selector & {
            ...
          }
        }
      Will result in next css:
        .some-selector .el-theme-default {
          ...
        }

      It doesn't work with :host-context because angular splitting it in two selectors and removes
      prefix in one of the selectors.
    */
    .el-theme-#{$theme-name} :host {
      @content;
    }
  }
}

// Entry point
// Installs component styles based on registered themes
// TODO: we hide :host inside of it which is not obvious
@mixin el-install-component() {

  @if ($el-enable-css-custom-properties) {

    @include el-install-component-with-css-props() {
      @content;
    }

  } @else {

    @include el-install-component-with-scss-vars() {
      @content;
    }
  }
}

@mixin el-install-global-with-css-props() {
  @content;

  @each $theme-name in el-get-enabled-themes() {
    @include el-install-css-properties($theme-name, el-get-registered-theme($theme-name));
  }
}

@mixin el-install-global-with-scss-vars() {

  @each $theme-name in el-get-enabled-themes() {
    @include el-pre-process-context($theme-name);

    .el-theme-#{$theme-name} {
      @content;
    }
  }
}

// Entry point
// Installs global styles based on registered themes
@mixin el-install() {
  @if ($el-enable-css-custom-properties) {
    @include el-install-global-with-css-props() {
      @content;
    }
  } @else {
    @include el-install-global-with-scss-vars() {
      @content;
    }
  }
}