// Hydrogen / Components / Dialog (System)
// This file is processed and then imported into @hydrogen-design-system/system

// File paths must respect how the system's architecture works.
//  - root
//    - core
//      - styles
//    - properties
//      - styles
//      - individual properties
//        - styles
//    - components
//      - individual components
//        - styles
//          - [you're here]

// Unlike the versioned copy, this stylesheet doesn't require Hydrogen's core because the core is imported by the system itself in that repository later on.

// Forward theme variables from the core module first so that they can be accessed and modified.
@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 theme variables from the core module so that they can be passed to the component mixins.
@use "../../../core/styles/defaults" as var;

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

// Load the generic dialog mixin with its respective theme variables.
[data-h2-dialog] {
  @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,
    $mediumQuery: var.$mq-medium,
    $largeQuery: var.$mq-large
  );
}

// Load the generic overlay mixin with its respective theme variables.
[data-h2-dialog-overlay] {
  @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*="#{$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*="#{$colorKey}"][data-h2-overlay*="#{$alphaKey}"] {
      @include h2-component-dialog-overlay-opacity(
        $color: $colorValue,
        $opacity: $alphaValue
      );
    }
  }
}

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