// Hydrogen / Components / 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 "iframe" as *;

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

// Load the ratio mixin with its respective theme variables.
[data-h2-iframe*="1:1"],
[data-h2-iframe*="4:3"],
[data-h2-iframe*="3:2"],
[data-h2-iframe*="8:5"],
[data-h2-iframe*="16:9"] {
  @include h2-component-iframe-ratio();
}

// Load the custom mixin with its respective theme variables.
[data-h2-iframe*="custom"] {
  @include h2-component-iframe-custom();
}

// Load the 1:1 mixin with its respective theme variables.
[data-h2-iframe*="1:1"] {
    @include h2-component-iframe-11();
}

// Load the 4:3 mixin with its respective theme variables.
[data-h2-iframe*="4:3"] {
    @include h2-component-iframe-43();
}

// Load the 3:2 mixin with its respective theme variables.
[data-h2-iframe*="3:2"] {
    @include h2-component-iframe-32();
}

// Load the 8:5 mixin with its respective theme variables.
[data-h2-iframe*="8:5"] {
    @include h2-component-iframe-85();
}

// Load the 16:9 mixin with its respective theme variables.
[data-h2-iframe*="16:9"] {
    @include h2-component-iframe-169();
}