// Hydrogen / Components / Dialog (Versioned)
// This file is processed and built so that the component can be used as an isolated, versioned tool.

// This file is compiled after it's been moved by the Gulp build script because the idea is that you can load the Sass from the versioned node_module OR simply use the compiled CSS if you don't care about themeing the component through Hydrogen.

// Forward the theme variables from the processed, nested core files.
@forward "core/styles/defaults";

// Load map variables from the core module so that the component can leverage them when generating selectors.
@use "core/styles/maps" as maps;

// Load the theme variables from the nested core files so that they can be passed to property mixins.
@use "core/styles/defaults" as var;

// Load the core itself so that its mixins can be accessed and subsequently nested inside the component attribute (this prevents the core from being loaded on the project outside of places it should be).
@use "core/styles/core" as core;

// // Load the component so that its mixins can be accessed.
@use "dialog" as *;

// Load the core and component mixins within the versioned component attribute, while passing them their respective theme variables.
// -0022 is replaced during the Gulp build script with the current component version, set in Gulpfile.js, before Sass is compiled.
[data-h2-dialog-0022] {
  // Load the component's unique reset styles.
  @include h2-component-dialog-reset();
  // Load the core.
  @include core.h2-universal-reset;
  // Load the generic component mixin.
  @include h2-component-dialog-generic(
    $focus-color: var.$focus-color,
    $dialogSmall: var.$dialog-small-screen,
    $dialogMedium: var.$dialog-medium-screen,
    $dialogLarge: var.$dialog-large-screen,
    $padding: var.$padding,
    $mediumQuery: var.$mq-medium,
    $largeQuery: var.$mq-large
  );
}

// Load the generic overlay mixin with its respective theme variables.
[data-h2-dialog-overlay-0022] {
  @include h2-component-dialog-overlay-generic();
}

// Load the themed color overlay mixin with its respective theme variables.
@each $colorKey, $colorValue in maps.$color-map {
  [data-h2-dialog-overlay-0022*="#{$colorKey}"] {
    @include h2-component-dialog-overlay-color(
      $color: $colorValue
    );
  }
}

// Load the themed opacity overlay mixin with its respective theme variables; requires the color loop to determine background-color.
@each $colorKey, $colorValue in maps.$color-map {
  @each $alphaKey, $alphaValue in maps.$opacity-map {
    [data-h2-dialog-overlay-0022*="#{$colorKey}"][data-h2-overlay-0022*="#{$alphaKey}"] {
      @include h2-component-dialog-overlay-opacity(
        $color: $colorValue,
        $opacity: $alphaValue
      );
    }
  }
}

@each $gradientKey, $gradientValue in maps.$gradient-map {
  @each $alphaKey, $alphaValue in maps.$opacity-map {
    [data-h2-dialog-overlay-0022*="#{$gradientKey}, #{$alphaKey}"] {
      @include h2-component-dialog-overlay-gradient(
        $gradient: $gradientValue,
        $opacity: $alphaValue
      );
    }
  }
}

// Load the trigger mixin with its respective theme variables.
[data-h2-dialog-trigger-0022] {
  @include h2-component-dialog-trigger-generic();
}