// Hydrogen / Component / 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 "form" as *;
@use "inputs/checkbox" as checkbox;
@use "inputs/date" as date;
@use "inputs/email" as email;
@use "inputs/fieldset" as fieldset;
@use "inputs/number" as number;
@use "inputs/password" as password;
@use "inputs/radio" as radio;
@use "inputs/select" as select;
@use "inputs/telephone" as tel;
@use "inputs/text" as text;
@use "inputs/textarea" as textarea;
@use "inputs/url" as url;

// Load the generic mixin with its respective theme variables.
[data-h2-form] {
  // Load the generic component mixin.
  [data-h2-form-item] {
    @include h2-component-form-text-generic(
      $gray: var.$gray,
      $black: var.$black,
      $error-color: var.$stop,
      $focus-color: var.$focus-color,
      $font: var.$font-default,
      $font-size-small: var.$font-scale-small,
      $font-size-default: var.$font-scale-default,
      $radius: var.$form-input-radius,
      $padding: var.$padding
    );
  }
  // Load the checkbox mixins.
  [data-h2-form-item*="checkbox"] {
    @include checkbox.h2-component-form-checkbox-generic(
      $padding: var.$padding
    );
  }
  [data-h2-form-item*="checkbox"][data-h2-form-item*="group"] {
    @include checkbox.h2-component-form-checkbox-group(
      $gray: var.$gray,
      $radius: var.$form-input-radius,
      $padding: var.$padding
    );
  }
  [data-h2-form-item*="checkbox"][data-h2-form-item*="single"] {
    @include checkbox.h2-component-form-checkbox-single(
      $padding: var.$padding
    );
  }
  // Load the date mixins.
  [data-h2-form-item*="date"] {
    @include date.h2-component-form-date-generic();
  }
  // Load the email mixins.
  [data-h2-form-item*="email"] {
    @include email.h2-component-form-email-generic();
  }
  // Load the fieldset mixins.
  [data-h2-fieldset] {
    @include fieldset.h2-component-fieldset-generic(
      $font: var.$font-default,
      $font-size: var.$font-scale-h5,
      $padding: var.$padding
    );
  }
  @each $colorKey, $colorValue in maps.$color-map {
    [data-h2-fieldset*="#{$colorKey}"] {
      @include fieldset.h2-component-fieldset-color(
        $color: $colorValue
      );
    }
  }
  @each $radiusKey, $radiusValue in maps.$object-radius-map {
    [data-h2-fieldset*="#{$radiusKey}"] {
      @include fieldset.h2-component-fieldset-radius(
        $radius: $radiusValue
      );
    }
  }
  // Load the number mixins.
  [data-h2-form-item*="number"] {
    @include number.h2-component-form-number-generic();
  }
  // Load the password mixins.
  [data-h2-form-item*="password"] {
    @include password.h2-component-form-password-generic(
      $focus-color: var.$focus-color,
      $padding: var.$padding
    );
  }
  // Load the radio mixins.
  [data-h2-form-item*="radio"] {
    @include radio.h2-component-form-radio-generic(
      $gray: var.$gray,
      $radius: var.$form-input-radius,
      $padding: var.$padding
    );
  }
  // Load the select mixins.
  [data-h2-form-item*="select"] {
    @include select.h2-component-form-select-generic(
      $padding: var.$padding
    );
  }
  // Load the telephone mixins.
  [data-h2-form-item*="telephone"] {
    @include tel.h2-component-form-telephone-generic();
  }
  // Load the text mixins.
  [data-h2-form-item*="text"] {
    @include text.h2-component-form-text-generic();
  }
  // Load the textarea mixins.
  [data-h2-form-item*="textarea"] {
    @include textarea.h2-component-form-textarea-generic();
  }
  // Load the URL mixins.
  [data-h2-form-item*="url"] {
    @include url.h2-component-form-url-generic();
  }
}