// Forward theme variables from the core module first so that they can be accessed and modified.
@forward "core/styles/defaults";
@use "core/styles/defaults" as var;
@use "core/styles/maps" as maps;
@use "core/styles/functions" as fn;
@use "core/styles/core" as *;
// Load properties so that their mixins can be accessed.
  // Alignment
  @use "properties/styles/alignment/alignment" as alignment;
  // Background Color
  @use "properties/styles/background-color/background-color" as bgcolor;
  // Borders
  @use "properties/styles/borders/borders" as border;
  // Containers
  @use "properties/styles/containers/containers" as container;
  // Display
  @use "properties/styles/display/display" as display;
  // Flex Grid
  @use "properties/styles/flex-grid/flex-grid" as grid;
  // Fonts
  @use "properties/styles/fonts/font-color/font-color" as fontColor;
  @use "properties/styles/fonts/font-family/font-family" as fontFamily;
  @use "properties/styles/fonts/font-size/font-size" as fontSize;
  @use "properties/styles/fonts/font-style/font-style" as fontStyle;
  @use "properties/styles/fonts/font-weight/font-weight" as fontWeight;
  @use "properties/styles/fonts/headings/headings" as headings;
  // Hovers
  @use "properties/styles/hovers/hover-background-color/hover-background-color" as hoverBgColor;
  @use "properties/styles/hovers/hover-font-color/hover-font-color" as hoverFontColor;
  // Margins
  @use "properties/styles/margins/margins" as margin;
  // Padding
  @use "properties/styles/padding/padding" as padding;
  // Position
  @use "properties/styles/position/position" as position;
  // Radius
  @use "properties/styles/radius/radius" as radius;
  // Shadow
  @use "properties/styles/shadow/shadow" as shadow;
  // Visibility
  @use "properties/styles/visibility/visibility" as visibility;
// Components
@use "components/accordion/styles/accordion" as accordion;
@use "components/alert/styles/alert" as alert;
@use "components/blockquote/styles/blockquote" as blockquote;
@use "components/breadcrumb/styles/breadcrumb" as breadcrumb;
@use "components/button/styles/button" as button;
@use "components/dialog/styles/dialog" as dialog;
@use "components/forms/styles/form" as form;
@use "components/forms/styles/inputs/checkbox" as checkbox;
@use "components/forms/styles/inputs/date" as date;
@use "components/forms/styles/inputs/email" as email;
@use "components/forms/styles/inputs/fieldset" as fieldset;
@use "components/forms/styles/inputs/number" as number;
@use "components/forms/styles/inputs/password" as password;
@use "components/forms/styles/inputs/radio" as radio;
@use "components/forms/styles/inputs/select" as select;
@use "components/forms/styles/inputs/telephone" as tel;
@use "components/forms/styles/inputs/text" as text;
@use "components/forms/styles/inputs/textarea" as textarea;
@use "components/forms/styles/inputs/url" as url;
@use "components/horizontal-rule/styles/horizontal-rule" as horizontal-rule;
@use "components/iframe/styles/iframe" as iframe;
@use "components/menu/styles/menu" as menu;
@use "components/overlay/styles/overlay" as overlay;
@use "components/pullquote/styles/pullquote" as pullquote;
@use "components/skip-to-content/styles/skip-to-content" as skip-to-content;
@use "components/table/styles/table" as table;
@use "components/tag/styles/tag" as tag;

body[data-h2-system="0042"] {
  @include h2-body-style;
  // Mobile Menu Body Lock Class
  &.h2-mobile-menu-body-lock {
    overflow: hidden;
    @media #{var.$mq-medium} {
      overflow: visible;
    }
  }
}

[data-h2-system="0042"] {
  @include h2-universal-reset;

  // Props
  // Load mixins within the enabler attribute, while passing their respective theme variables.
  @include alignment.h2-prop-alignment(
    // Maps
    $mediaQueryMap: maps.$media-query-map, 
    $alignmentMap: maps.$alignment-map
    // Variables
  );
  @include bgcolor.h2-prop-bg-color(
    // Maps
    $mediaQueryMap: maps.$media-query-map, 
    $colorMap: maps.$color-map, 
    $opacityMap: maps.$opacity-map, 
    $gradientMap: maps.$gradient-map,
    // Variables
    $hover-font-color: var.$hover-font-color
  );
  @include border.h2-prop-border(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $sideMap: maps.$side-map,
    $borderWidthMap: maps.$border-width-list,
    $borderStyleMap: maps.$border-style-list,
    $colorMap: maps.$color-map,
    // Variables
    $border-thickness-thin: var.$border-thickness-thin,
    $border-thickness-thick: var.$border-thickness-thick
  );
  @include container.h2-prop-container(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $containerSizeMap: maps.$container-size-map,
    $alignmentValueMap: maps.$alignment-value-map,
    // Variables
    $mq-medium: var.$mq-medium
  );
  @include display.h2-prop-display(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $displayMap: maps.$display-list
    // Variables
  );
  @include grid.h2-prop-grid(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $whitespaceMap: maps.$whitespace-map,
    // Variables
    $gridColumns: var.$grid-columns,
    $padding: var.$padding
  );
  // Fonts
  @include fontColor.h2-prop-font-color(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $colorMap: maps.$color-map,
    $headingMap: maps.$heading-list
    // Variables
  );
  @include fontFamily.h2-prop-font-family(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $fontFamilyMap: maps.$font-family-map,
    $headingMap: maps.$heading-list
    // Variables
  );
  @include fontSize.h2-prop-font-size(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $fontSizeMap: maps.$font-size-map,
    $headingMap: maps.$heading-list
    // Variables
  );
  @include fontStyle.h2-prop-font-style(
    // Maps
    $mediaQueryMap: maps.$media-query-map
    // Variables
  );
  @include fontWeight.h2-prop-font-weight(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $fontWeightMap: maps.$weight-map,
    $headingMap: maps.$heading-list
    // Variables
  );
  @include headings.h2-prop-headings(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $headingMap: maps.$heading-list,
    // Variables
    $heading-1-border-color: var.$heading-1-border-color,
    $heading-1-border-style: var.$heading-1-border-style,
    $heading-1-border-width: var.$heading-1-border-width,
    $heading-1-font-color: var.$heading-1-font-color,
    $heading-1-font-family: var.$heading-1-font-family,
    $heading-1-font-size: var.$heading-1-font-size,
    $heading-1-font-weight: var.$heading-1-font-weight,
    $heading-2-border-color: var.$heading-2-border-color,
    $heading-2-border-style: var.$heading-2-border-style,
    $heading-2-border-width: var.$heading-2-border-width,
    $heading-2-font-color: var.$heading-2-font-color,
    $heading-2-font-family: var.$heading-2-font-family,
    $heading-2-font-size: var.$heading-2-font-size,
    $heading-2-font-weight: var.$heading-2-font-weight,
    $heading-3-border-color: var.$heading-3-border-color,
    $heading-3-border-style: var.$heading-3-border-style,
    $heading-3-border-width: var.$heading-3-border-width,
    $heading-3-font-color: var.$heading-3-font-color,
    $heading-3-font-family: var.$heading-3-font-family,
    $heading-3-font-size: var.$heading-3-font-size,
    $heading-3-font-weight: var.$heading-3-font-weight,
    $heading-4-border-color: var.$heading-4-border-color,
    $heading-4-border-style: var.$heading-4-border-style,
    $heading-4-border-width: var.$heading-4-border-width,
    $heading-4-font-color: var.$heading-4-font-color,
    $heading-4-font-family: var.$heading-4-font-family,
    $heading-4-font-size: var.$heading-4-font-size,
    $heading-4-font-weight: var.$heading-4-font-weight,
    $heading-5-border-color: var.$heading-5-border-color,
    $heading-5-border-style: var.$heading-5-border-style,
    $heading-5-border-width: var.$heading-5-border-width,
    $heading-5-font-color: var.$heading-5-font-color,
    $heading-5-font-family: var.$heading-5-font-family,
    $heading-5-font-size: var.$heading-5-font-size,
    $heading-5-font-weight: var.$heading-5-font-weight,
    $heading-6-border-color: var.$heading-6-border-color,
    $heading-6-border-style: var.$heading-6-border-style,
    $heading-6-border-width: var.$heading-6-border-width,
    $heading-6-font-color: var.$heading-6-font-color,
    $heading-6-font-family: var.$heading-6-font-family,
    $heading-6-font-size: var.$heading-6-font-size,
    $heading-6-font-weight: var.$heading-6-font-weight
  );
  // Hovers
  @include hoverBgColor.h2-prop-hover-bg-color(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $colorMap: maps.$color-map,
    $opacityMap: maps.$opacity-map
    // Variables
  );
  @include hoverFontColor.h2-prop-hover-font-color(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $colorMap: maps.$color-map
    // Variables
  );
  @include margin.h2-prop-margin(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $sideMap: maps.$side-map,
    $whitespaceMap: maps.$whitespace-map,
    // Variables
    $margin: var.$margin
  );
  @include padding.h2-prop-padding(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $sideMap: maps.$side-map,
    $whitespaceMap: maps.$whitespace-map,
    // Variables
    $padding: var.$padding
  );
  @include position.h2-prop-position(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $positionMap: maps.$position-list
    // Variables
  );
  @include radius.h2-prop-radius(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    $radiusMap: maps.$radius-map
    // Variables
  );
  @include shadow.h2-prop-shadow(
    // Maps
    $mediaQueryMap: maps.$media-query-map,
    // Variables
    $small: var.$shadow-small,
    $medium: var.$shadow-medium,
    $large: var.$shadow-large
  );
  @include visibility.h2-prop-visibility(
    // Maps
    $mediaQueryMap: maps.$media-query-map
    // Variables
  );

  // Accordions
    // Load the generic accordion mixin with its respective theme variables.
    [data-h2-accordion] {
      @include accordion.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 accordion.h2-component-accordion-right;
    }
    // Load the left-aligned accordion mixin with its respective theme variables.
    [data-h2-accordion*="left"] {
      @include accordion.h2-component-accordion-left;
    }

  // Alerts
    // Load the generic alert mixin with its respective theme variables.
    [data-h2-alert-wrapper] {
      @include alert.h2-component-alert-generic(
        $padding: var.$padding
      );
    }
    
    // Load the static and toast alert mixins with their respective theme variables.
    [data-h2-alert-wrapper*="static"] {
      @include alert.h2-component-alert-static();
    }
    
    [data-h2-alert-wrapper*="toast"] {
      @include alert.h2-component-alert-toast($mqm: var.$mq-medium);
    }
    
    // Load the themed color alert mixin with its respective theme variables.
    @each $colorKey, $colorValue in maps.$color-map {
      [data-h2-alert-wrapper] {
        [data-h2-alert*="#{$colorKey}"] {
          @include alert.h2-component-alert-color($color: $colorValue);
        }
      }
    }
    
    // Gradient themed alerts.
    @each $gradientKey, $gradientValue in maps.$gradient-map {
      [data-h2-alert-wrapper] {
        [data-h2-alert*="#{$gradientKey}"] {
          @if (str-index($gradientKey, "-1-")) {
            @include alert.h2-component-alert-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-1
            );
          }
          @if (str-index($gradientKey, "-2-")) {
            @include alert.h2-component-alert-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-2
            );
          }
          @if (str-index($gradientKey, "-3-")) {
            @include alert.h2-component-alert-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-3
            );
          }
          @if (str-index($gradientKey, "-4-")) {
            @include alert.h2-component-alert-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-4
            );
          }
          @if (str-index($gradientKey, "-5-")) {
            @include alert.h2-component-alert-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-5
            );
          }
        }
      }
    }

  // Blockquotes
    // Load the generic blockquote mixin with its respective theme variables.
    [data-h2-blockquote] {
      @include blockquote.h2-component-blockquote-generic();
    }
    // Load the themed blockquote mixin with its respective theme variables.
    @each $colorKey, $colorValue in maps.$color-map {
      [data-h2-blockquote*="#{$colorKey}"] {
        @include blockquote.h2-component-blockquote-color(
          $color: $colorValue
        );
      }
    }
    @each $gradientKey, $gradientValue in maps.$gradient-map {
      [data-h2-blockquote*="#{$gradientKey}"] {
        @if (str-index($gradientKey, "-1-")) {
          @include blockquote.h2-component-blockquote-gradient(
            $gradient: $gradientValue,
            $color: var.$theme-color-1
          );
        }
        @if (str-index($gradientKey, "-2-")) {
          @include blockquote.h2-component-blockquote-gradient(
            $gradient: $gradientValue,
            $color: var.$theme-color-2
          );
        }
        @if (str-index($gradientKey, "-3-")) {
          @include blockquote.h2-component-blockquote-gradient(
            $gradient: $gradientValue,
            $color: var.$theme-color-3
          );
        }
        @if (str-index($gradientKey, "-4-")) {
          @include blockquote.h2-component-blockquote-gradient(
            $gradient: $gradientValue,
            $color: var.$theme-color-4
          );
        }
        @if (str-index($gradientKey, "-5-")) {
          @include blockquote.h2-component-blockquote-gradient(
            $gradient: $gradientValue,
            $color: var.$theme-color-5
          );
        }
      }
    }
    // Load the blockquote border mixin with its respective theme variables.
    @each $width in maps.$border-width-list {
      [data-h2-blockquote*="#{$width}"] {
        @include blockquote.h2-component-blockquote-width(
          $width: $width, 
          $border-thickness-thin: var.$border-thickness-thin, 
          $border-thickness-thick: var.$border-thickness-thick
        );
      }
    }
  
  // Breadcrumb
    // Load the generic breadcrumb mixin with its respective theme variables.
    [data-h2-breadcrumb] {
      @include breadcrumb.h2-component-breadcrumb-generic();
    }
    // Load the custom breadcrumb mixin with its respective theme variables.
    @each $colorKey, $colorValue in maps.$color-map {
      [data-h2-breadcrumb*="#{$colorKey}"] {
        @include breadcrumb.h2-component-breadcrumb-custom(
          $color: $colorValue, 
          $line-height: var.$line-height, 
          $margin: var.$margin
        );
      }
    }

  // Button
    // Load the generic button mixin with its respective theme variables.
    [data-h2-button] {
      @include button.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 button.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 button.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 button.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 button.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 button.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
          );
        }
      }
    }
    // Gradients
    @each $gradientKey, $gradientValue in maps.$gradient-map {
      @each $styleKey, $styleValue in maps.$button-type-map {
        [data-h2-button*="#{$gradientKey}"][data-h2-button*="#{$styleKey}"],
        a[data-h2-button*="#{$gradientKey}"][data-h2-button*="#{$styleKey}"] {
          @if (str-index($gradientKey, "-1-")) {
            @include button.h2-component-button-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-1,
              $solid-font-color: fn.contrasting-color(var.$theme-color-1, var.$white, var.$black),
              $gray: var.$gray,
              $hover-bg-color: var.$hover-bg-color,
              $hover-font-color: var.$hover-font-color,
              $style: $styleKey
            );
          }
          @if (str-index($gradientKey, "-2-")) {
            @include button.h2-component-button-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-2,
              $solid-font-color: fn.contrasting-color(var.$theme-color-2, var.$white, var.$black),
              $gray: var.$gray,
              $hover-bg-color: var.$hover-bg-color,
              $hover-font-color: var.$hover-font-color,
              $style: $styleKey
            );
          }
          @if (str-index($gradientKey, "-3-")) {
            @include button.h2-component-button-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-3,
              $solid-font-color: fn.contrasting-color(var.$theme-color-3, var.$white, var.$black),
              $gray: var.$gray,
              $hover-bg-color: var.$hover-bg-color,
              $hover-font-color: var.$hover-font-color,
              $style: $styleKey
            );
          }
          @if (str-index($gradientKey, "-4-")) {
            @include button.h2-component-button-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-4,
              $solid-font-color: fn.contrasting-color(var.$theme-color-4, var.$white, var.$black),
              $gray: var.$gray,
              $hover-bg-color: var.$hover-bg-color,
              $hover-font-color: var.$hover-font-color,
              $style: $styleKey
            );
          }
          @if (str-index($gradientKey, "-5-")) {
            @include button.h2-component-button-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-5,
              $solid-font-color: fn.contrasting-color(var.$theme-color-5, var.$white, var.$black),
              $gray: var.$gray,
              $hover-bg-color: var.$hover-bg-color,
              $hover-font-color: var.$hover-font-color,
              $style: $styleKey
            );
          }
        }
      }
    }

  // Dialog
    // Load the generic dialog mixin with its respective theme variables.
    [data-h2-dialog] {
      @include dialog.h2-component-dialog-generic(
        $focus-color: var.$focus-color,
        $dialogSmall: var.$dialog-small-screen,
        $dialogMedium: var.$dialog-medium-screen,
        $dialogLarge: var.$dialog-large-screen,
        $padding: var.$padding,
        $mediumQuery: var.$mq-medium,
        $largeQuery: var.$mq-large
      );
    }
    // Load the generic overlay mixin with its respective theme variables.
    [data-h2-dialog-overlay] {
      @include dialog.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 dialog.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 dialog.h2-component-dialog-overlay-opacity(
            $color: $colorValue,
            $opacity: $alphaValue
          );
        }
      }
    }
    @each $gradientKey, $gradientValue in maps.$gradient-map {
      @each $alphaKey, $alphaValue in maps.$opacity-map {
        [data-h2-dialog-overlay*="#{$gradientKey}, #{$alphaKey}"] {
          @include dialog.h2-component-dialog-overlay-gradient(
            $gradient: $gradientValue,
            $opacity: $alphaValue
          );
        }
      }
    }
    // Load the trigger mixin with its respective theme variables.
    [data-h2-dialog-trigger] {
      @include dialog.h2-component-dialog-trigger-generic();
    }

  // Forms
    // Load the generic mixin with its respective theme variables.
    [data-h2-form] {
      // Load the generic component mixin.
      [data-h2-form-item] {
        @include form.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();
      }
    }

  // Horizontal Rules
    // Load the generic mixin with its respective theme variables.
    [data-h2-hr] {
      @include horizontal-rule.h2-component-horizontal-rule-generic();
    }
    // Load the color mixin with its respective theme variables.
    @each $colorKey, $colorValue in maps.$color-map {
      [data-h2-hr*="#{$colorKey}"] {
        @include horizontal-rule.h2-component-horizontal-rule-color(
          $color: $colorValue
        );
      }
    }
    // Load the width mixin with its respective theme variables.
    @each $width in maps.$border-width-list {
      [data-h2-hr*="#{$width}"] {
        @include horizontal-rule.h2-component-horizontal-rule-width(
          $border-thickness-thick: var.$border-thickness-thick,
          $border-thickness-thin: var.$border-thickness-thin,
          $width: $width
        );
      }
    }

  // Iframes
    // Load the generic mixin with its respective theme variables.
    [data-h2-iframe] {
      @include iframe.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 iframe.h2-component-iframe-ratio();
    }
    // Load the custom mixin with its respective theme variables.
    [data-h2-iframe*="custom"] {
      @include iframe.h2-component-iframe-custom();
    }
    // Load the 1:1 mixin with its respective theme variables.
    [data-h2-iframe*="1:1"] {
      @include iframe.h2-component-iframe-11();
    }
    // Load the 4:3 mixin with its respective theme variables.
    [data-h2-iframe*="4:3"] {
      @include iframe.h2-component-iframe-43();
    }
    // Load the 3:2 mixin with its respective theme variables.
    [data-h2-iframe*="3:2"] {
      @include iframe.h2-component-iframe-32();
    }
    // Load the 8:5 mixin with its respective theme variables.
    [data-h2-iframe*="8:5"] {
      @include iframe.h2-component-iframe-85();
    }
    // Load the 16:9 mixin with its respective theme variables.
    [data-h2-iframe*="16:9"] {
      @include iframe.h2-component-iframe-169();
    }

  // Menu
    // Mobile Menu Body Lock Class
    .h2-mobile-menu-body-lock {
      overflow: hidden;
      @media #{var.$mq-medium} {
        overflow: visible;
      }
    }
    // Load the generic mixin with its respective theme variables.
    &[data-h2-menu-wrapper],
    [data-h2-menu-wrapper] {
      // Menu Trigger
      [data-h2-mobile-menu-trigger] {
        @include menu.h2-component-menu-trigger(
          $medium: var.$mq-medium
        );
      }
      // Menu
      [data-h2-menu] {
        // Load the generic component mixin.
        @include menu.h2-component-menu-generic(
          // Main Menu
          $main-menu-background-color: var.$menu-bg-color,
          $main-menu-divider-color: var.$menu-divider-color,
          $main-menu-font-color: var.$menu-font-color,
          $main-menu-icon-color: var.$menu-icon-color,
          $main-menu-anchor-hover: fn.contrasting-color(var.$menu-bg-color, lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
          $main-menu-button-background-color: fn.contrasting-color(var.$menu-bg-color, rgba(var.$white, .1), rgba(var.$black, .1)),
          // All Submenus
          $submenu-background-color: var.$submenu-bg-color,
          // Submenu 1
          $submenu-1-border-color: fn.contrasting-color(var.$submenu-bg-color, rgba(var.$white, .3), rgba(var.$black, .3)),
          $submenu-1-font-color: fn.contrasting-color(var.$submenu-bg-color, var.$white, var.$black),
          $submenu-1-anchor-hover: fn.contrasting-color(var.$submenu-bg-color, lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
          $submenu-1-button-background-color: fn.contrasting-color(var.$submenu-bg-color, rgba(var.$white, .1), rgba(var.$black, .1)),
          // Submenu 2
          $submenu-2-border-color: fn.contrasting-color(darken(var.$submenu-bg-color, 5%), rgba(var.$white, .3), rgba(var.$black, .3)),
          $submenu-2-font-color: fn.contrasting-color(darken(var.$submenu-bg-color, 5%), var.$white, var.$black),
          $submenu-2-anchor-hover: fn.contrasting-color(darken(var.$submenu-bg-color, 5%), lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
          $submenu-2-button-background-color: fn.contrasting-color(darken(var.$submenu-bg-color, 5%), rgba(var.$white, .1), rgba(var.$black, .1)),
          // Submenu 3
          $submenu-3-border-color: fn.contrasting-color(darken(var.$submenu-bg-color, 10%), rgba(var.$white, .3), rgba(var.$black, .3)),
          $submenu-3-font-color: fn.contrasting-color(darken(var.$submenu-bg-color, 10%), var.$white, var.$black),
          $submenu-3-anchor-hover: fn.contrasting-color(darken(var.$submenu-bg-color, 10%), lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
          $submenu-3-button-background-color: fn.contrasting-color(darken(var.$submenu-bg-color, 10%), rgba(var.$white, .1), rgba(var.$black, .1)),
          // Submenu 4
          $submenu-4-border-color: fn.contrasting-color(darken(var.$submenu-bg-color, 15%), rgba(var.$white, .3), rgba(var.$black, .3)),
          $submenu-4-font-color: fn.contrasting-color(darken(var.$submenu-bg-color, 15%), var.$white, var.$black),
          $submenu-4-anchor-hover: fn.contrasting-color(darken(var.$submenu-bg-color, 15%), lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
          $submenu-4-button-background-color: fn.contrasting-color(darken(var.$submenu-bg-color, 15%), rgba(var.$white, .1), rgba(var.$black, .1)),
          // Submenu 5
          $submenu-5-border-color: fn.contrasting-color(darken(var.$submenu-bg-color, 20%), rgba(var.$white, .3), rgba(var.$black, .3)),
          $submenu-5-font-color: fn.contrasting-color(darken(var.$submenu-bg-color, 20%), var.$white, var.$black),
          $submenu-5-anchor-hover: fn.contrasting-color(darken(var.$submenu-bg-color, 20%), lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
          $submenu-5-button-background-color: fn.contrasting-color(darken(var.$submenu-bg-color, 20%), rgba(var.$white, .1), rgba(var.$black, .1)),
          // Misc
          $font-scale-default: var.$font-scale-default,
          $line-height: var.$line-height,
          $medium: var.$mq-medium,
          $padding: var.$padding
        );
      }
    }
    // Top Style Menus
    &[data-h2-menu-wrapper*="top"],
    [data-h2-menu-wrapper*="top"] {
      [data-h2-menu] {
        @include menu.h2-component-menu-topbar(
          $mq-medium: var.$mq-medium,
          $padding: var.$padding,
          $menu-divider-color: var.$menu-divider-color
        );
      }
    }
    &[data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="sticky"],
    [data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="sticky"] {
      [data-h2-menu] {
        @include menu.h2-component-menu-topbar-sticky (
          $mq-medium: var.$mq-medium
        );
      }
    }
    @each $containKey, $containValue in maps.$container-size-map {
      @if $containKey != "full" {
        &[data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="#{$containKey}"],
        [data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="#{$containKey}"] {
          [data-h2-menu] {
            @include menu.h2-component-menu-topbar-contained (
              $mq-medium: var.$mq-medium,
              $container: $containValue,
              $padding: var.$padding,
              $menu-divider-color: var.$menu-divider-color
            );
          }
        }
      }
    }
    &[data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="center"],
    [data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="center"] {
      [data-h2-menu] {
        @include menu.h2-component-menu-topbar-center (
          $mq-medium: var.$mq-medium
        );
      }
    }
    &[data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="right"],
    [data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="right"] {
      [data-h2-menu] {
        @include menu.h2-component-menu-topbar-right (
            $mq-medium: var.$mq-medium
        );
      }
    }
    &[data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="split"],
    [data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="split"] {
      [data-h2-menu] {
        @include menu.h2-component-menu-topbar-split (
          $mq-medium: var.$mq-medium
        );
      }
    }
    // Sidebar Style Menus
    &[data-h2-menu-wrapper*="side"],
    [data-h2-menu-wrapper*="side"] {
      [data-h2-menu] {
        @include menu.h2-component-menu-sidebar (
          $mq-medium: var.$mq-medium,
          $padding: var.$padding
        );
        &+div,
        &+main {
          @media #{var.$mq-medium} {
            margin-left: calc((1/4) * 100%);
            overflow-x: hidden;
            width: calc((3/4) * 100%);
          }
        }
      }
    }
    &[data-h2-menu-wrapper*="side"][data-h2-menu-wrapper*="right"],
    [data-h2-menu-wrapper*="side"][data-h2-menu-wrapper*="right"] {
      [data-h2-menu] {
          @include menu.h2-component-menu-sidebar-right (
            $mq-medium: var.$mq-medium,
            $padding: var.$padding
          );
          &+div,
          &+main {
            @media #{var.$mq-medium} {
              margin-left: auto;
              margin-right: calc((1/4) * 100%);
              overflow-x: hidden;
              width: calc((3/4) * 100%);
            }
          }
      }
    }
    @each $whiteKey, $whiteValue in maps.$whitespace-map {
      &[data-h2-menu-wrapper*="side"][data-h2-menu-wrapper*="#{$whiteKey}"],
      [data-h2-menu-wrapper*="side"][data-h2-menu-wrapper*="#{$whiteKey}"] {
        [data-h2-menu] {
          @include menu.h2-component-menu-sidebar-padded (
            $mq-medium: var.$mq-medium,
            $multiplier: $whiteValue,
            $padding: var.$padding
          );
        }
      }
    }

  // Overlay
    // Load the generic mixin with its respective theme variables.
    [data-h2-overlay] {
      @include overlay.h2-component-overlay-generic();
    }
    // Load custom mixins here. Please refer to existing components for examples, as well as how to pass variables, maps, and functions. 
    [data-h2-overlay*="image"] {
      @include overlay.h2-component-overlay-image();
    }
    [data-h2-overlay*="pattern"] {
      @include overlay.h2-component-overlay-pattern();
    }
    @each $colorKey, $colorValue in maps.$color-map {
      @each $alphaKey, $alphaValue in maps.$opacity-map {
        [data-h2-overlay*="#{$colorKey}, #{$alphaKey}"] {
          @include overlay.h2-component-overlay(
            $color: $colorValue,
            $opacity: $alphaValue
          );
        }
      }
    }
    @each $gradientKey, $gradientValue in maps.$gradient-map {
      @each $alphaKey, $alphaValue in maps.$opacity-map {
        [data-h2-overlay*="#{$gradientKey}, #{$alphaKey}"] {
          @include overlay.h2-component-overlay-gradient(
            $gradient: $gradientValue,
            $opacity: $alphaValue
          );
        }
      }
    }
  
  // Pullquote
    // Load the generic mixin with its respective theme variables.
    [data-h2-pullquote] {
      @include pullquote.h2-component-pullquote-generic();
    }
    // Load custom mixins here. Please refer to existing components for examples, as well as how to pass variables, maps, and functions. 
    @each $alignmentKey, $alignmentValue in maps.$alignment-map {
      [data-h2-pullquote*="#{$alignmentKey}"] {
        @include pullquote.h2-component-pullquote-alignment(
          $alignment: $alignmentValue
        );
      }
    }
    @each $colorKey, $colorValue in maps.$color-map {
      [data-h2-pullquote*="#{$colorKey}"] {
        @include pullquote.h2-component-pullquote-color(
          $color: $colorValue
        );
      }
    }

  // Skip to Content
    // Load the generic mixin with its respective theme variables.
    [data-h2-skip-to-content] {
      @include skip-to-content.h2-component-skip-to-content-generic(
        $font: var.$font-default
      );
    }
    // Load custom mixins here. Please refer to existing components for examples, as well as how to pass variables, maps, and functions. 
    @each $colorKey, $colorValue in maps.$color-map {
      [data-h2-skip-to-content*="#{$colorKey}"] {
        @include skip-to-content.h2-component-skip-to-content-color(
          $color: $colorValue
        );
      }
    }

  // Table
    // Load the generic mixin with its respective theme variables.
    [data-h2-table] {
      @include table.h2-component-table-generic(
        $mqMedium: var.$mq-medium,
        $black: var.$black
      );
    }
    // Load custom mixins here. Please refer to existing components for examples, as well as how to pass variables, maps, and functions. 
    @each $headColorKey, $headColorValue in maps.$color-map {
      @each $rowColorKey, $rowColorValue in maps.$color-map {
        [data-h2-table*="#{$headColorKey}, #{$rowColorKey}"] {
          @include table.h2-component-table-color(
            $headColor: $headColorValue,
            $headFontColor: fn.contrasting-color($headColorValue, var.$white, var.$black),
            $rowColor: $rowColorValue
          );
        }
      }
    }

  // Tag
    // Load the generic mixin with its respective theme variables.
    [data-h2-tag] {
      @include tag.h2-component-tag-generic(
        $font: var.$font-default,
        $font-small: var.$font-scale-small,
        $padding: var.$padding
      );
    }
    // Load custom mixins here. Please refer to existing components for examples, as well as how to pass variables, maps, and functions. 
    @each $colorKey, $colorValue in maps.$color-map {
      [data-h2-tag*="#{$colorKey}"] {
        @include tag.h2-component-tag-color(
          $color: $colorValue
        );
      }
    }
    @each $radiusKey, $radiusValue in maps.$object-radius-map {
      [data-h2-tag*="#{$radiusKey}"] {
        @include tag.h2-component-tag-radius(
          $radius: $radiusValue
        );
      }
    }
    @each $colorKey, $colorValue in maps.$color-map {
      @each $styleKey, $styleValue in maps.$button-type-map {
        [data-h2-tag*="#{$colorKey}"][data-h2-tag*="#{$styleKey}"] {
          @include tag.h2-component-tag-style(
            $color: $colorValue,
            $solid-font-color: fn.contrasting-color($colorValue, var.$white, var.$black),
            $style: $styleKey,
            $padding: var.$padding
          );
        }
      }
    }
    @each $styleKey, $styleValue in maps.$button-type-map {
      @each $gradientKey, $gradientValue in maps.$gradient-map {
        [data-h2-tag*="#{$gradientKey}"][data-h2-tag*="#{$styleKey}"] {
          @if (str-index($gradientKey, "-1-")) {
            @include tag.h2-component-tag-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-1,
              $font-color: fn.contrasting-color(var.$theme-color-1, var.$white, var.$black),
              $style: $styleKey,
              $padding: var.$padding
            );
          }
          @if (str-index($gradientKey, "-2-")) {
            @include tag.h2-component-tag-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-2,
              $font-color: fn.contrasting-color(var.$theme-color-2, var.$white, var.$black),
              $style: $styleKey,
              $padding: var.$padding
            );
          }
          @if (str-index($gradientKey, "-3-")) {
            @include tag.h2-component-tag-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-3,
              $font-color: fn.contrasting-color(var.$theme-color-3, var.$white, var.$black),
              $style: $styleKey,
              $padding: var.$padding
            );
          }
          @if (str-index($gradientKey, "-4-")) {
            @include tag.h2-component-tag-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-4,
              $font-color: fn.contrasting-color(var.$theme-color-4, var.$white, var.$black),
              $style: $styleKey,
              $padding: var.$padding
            );
          }
          @if (str-index($gradientKey, "-5-")) {
            @include tag.h2-component-tag-gradient(
              $gradient: $gradientValue,
              $color: var.$theme-color-5,
              $font-color: fn.contrasting-color(var.$theme-color-5, var.$white, var.$black),
              $style: $styleKey,
              $padding: var.$padding
            );
          }
        }
      }
    }
}