// Hydrogen / Components / Accordion (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 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 "accordion" as *;

// Load the core and component mixins within the versioned component attribute, while passing them their respective theme variables.
// "" is replaced during the Gulp build script with the current component version, set in Gulpfile.js, before Sass is compiled.
[data-h2-accordion] {
  // Load the component's unique reset styles.
  @include h2-component-accordion-reset(
    $font-scale-default: var.$font-scale-default
  );
  // Load the core.
  @include core.h2-universal-reset;
  // Load the generic component mixin.
  @include h2-component-accordion-generic(
    $focus-color: var.$focus-color
  );
}

// Load the right-aligned accordion mixin with its respective theme variables.
[data-h2-accordion*="right"] {
  @include h2-component-accordion-right;
}

// Load the left-aligned accordion mixin with its respective theme variables.
[data-h2-accordion*="left"] {
  @include h2-component-accordion-left;
}