// Hydrogen / Components / Button (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 functions from the core module so that the component can leverage them when generating selectors.
@use "../../../core/styles/functions" as fn;

// 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 "button" as *;

// Load the generic button mixin with its respective theme variables.
[data-h2-button] {
  @include h2-component-button-generic(
    $font-default: var.$font-default,
    $focus-color: var.$focus-color, 
    $gray: var.$gray, 
    $hover-bg-color: var.$hover-bg-color, 
    $hover-font-color: var.$hover-font-color
  );
}

// Load anchor specific button mixin.
a[data-h2-button] {
  @include h2-component-button-anchor(
    $font-default: var.$font-default,
    $focus-color: var.$focus-color
  );
}

// Load the color button styles with their respective theme variables.
@each $colorKey, $colorValue in maps.$color-map {
  [data-h2-button*="#{$colorKey}"],
  a[data-h2-button*="#{$colorKey}"] {
    @include h2-component-button-color(
      $color: $colorValue,
      $gray: var.$gray
    );
  }
}
// Load the radius button styles with their respective theme variables.
@each $radiusKey, $radiusValue in maps.$object-radius-map {
  [data-h2-button*="#{$radiusKey}"],
  a[data-h2-button*="#{$radiusKey}"] {
    @include h2-component-button-radius(
      $radius: $radiusValue
    );
  }
}
// Load the size button styles with their respective theme variables.
@each $sizeKey, $sizeValue in maps.$size-map {
  [data-h2-button*="#{$sizeKey}"],
  a[data-h2-button*="#{$sizeKey}"] {
    @include h2-component-button-size(
      $font-small: var.$font-scale-small,
      $font-medium: var.$font-scale-default,
      $font-large: var.$font-scale-h5,
      $padding: var.$padding,
      $size: $sizeValue
    );
  }
}
// Load the style button styles with their respective theme variables - the style variations also have color implications, hence the color loop.
@each $colorKey, $colorValue in maps.$color-map {
  @each $styleKey, $styleValue in maps.$button-type-map {
    [data-h2-button*="#{$colorKey}"][data-h2-button*="#{$styleKey}"],
    a[data-h2-button*="#{$colorKey}"][data-h2-button*="#{$styleKey}"] {
      @include h2-component-button-style(
        $color: $colorValue,
        $solid-font-color: fn.contrasting-color($colorValue, var.$white, var.$black),
        $gray: var.$gray,
        $hover-bg-color: var.$hover-bg-color,
        $hover-font-color: var.$hover-font-color,
        $style: $styleKey
      );
    }
  }
}