/* ==========================================================================
   SECTION: Core Settings
   ==========================================================================

   Foundational configuration for the project's design system.
   Defines key variables controlling responsive behavior, iconography,
   navigation, and layering.

   USAGE:
   @use '@lib' as *;
   @use '@extends' as *;

   FUNCTIONS:
   - size(): Converts px to fluid rem (args: min-size, size)
   - rem(): Converts px to static rem

   RELATED FILES:
   - _root.scss: CSS custom properties
   - extends/_silent-factory.scss: Silent classes
   - utilities/: Utility class generators
   ========================================================================== */
/* ==========================================================================
   SECTION: Themes
   ==========================================================================

   Color themes and utilities for backgrounds and text.

   UTILITY FORMATS:
   - Background: .bg-*
   - Text: .text-*
   - Theme: .theme-*

   CSS VARIABLES:
   - --*: color value
   - --*-rgb: RGB color value

   USAGE:
   - Silent class: @extend %bg-primary;
   - CSS class: .bg-primary;
   - CSS variable: var(--primary);
   - RGB opacity: rgb(var(--primary-rgb) / 50%);
   ========================================================================== */
/* ==========================================================================
   SECTION: Shadow
   ==========================================================================

   Box shadow utilities for consistent elevation effects.

   UTILITY FORMATS:
   - Shadow: .shadow-*

   CSS VARIABLES:
   - --shadow-*: box-shadow value

   USAGE:
   - Silent class: @extend %shadow-md;
   - CSS class: .shadow-md;
   - CSS variable: var(--shadow-md);
   ========================================================================== */
/* ==========================================================================
   SECTION: Spacing
   ==========================================================================

   Spacing utilities for consistent layout spacing.

   UTILITY FORMATS:
   - Padding: p-*, pt-*, pb-*, py-*, px-*
   - Margin: m-*, mt-*, mb-*, my-*, mx-*
   - Gap: gap-*, gap-x-*, gap-y-*
   - Other: ms-*, g-*, gy-*, gx-*

   CSS VARIABLES:
   - --spacing-*: spacing value

   USAGE:
   - Silent class: @extend %p-0;
   - CSS class: .p-0;
   - CSS variable: var(--spacing-0);
   ========================================================================== */
/* ==========================================================================
   SECTION: Radius
   ==========================================================================

   Border radius utilities for consistent rounded corners.

   UTILITY FORMATS:
   - Border radius: .br-*

   CSS VARIABLES:
   - --br-*: border-radius value

   USAGE:
   - Silent class: @extend %br-md;
   - CSS class: .br-md;
   - CSS variable: var(--br-md);
   ========================================================================== */
/* ==========================================================================
   SECTION: Typography
   ==========================================================================

   Typography utilities for consistent text styling.

   UTILITY FORMATS:
   - Text: .text-*, .text-*-m-0

   CSS VARIABLES:
   - --ff-*: font-family
   - --fs-*: font-size
   - --fw-*: font-weight
   - --lh-*: line-height
   - --ls-*: letter-spacing
   - --font-space-*: margin-bottom

   USAGE:
   - Silent class: @extend %text-sm;
   - CSS class: .text-sm;
   - CSS variable: var(--fs-sm);
   ========================================================================== */
/* ==========================================================================
   SECTION: Transitions
   ==========================================================================

   Animation timing variables for consistent motion.

   CSS VARIABLES:
   - --duration-*: transition-duration
   - --timing-*: transition-timing-function
   ========================================================================== */
/* ==========================================================================
   SECTION: Body
   ========================================================================== */
/* ==========================================================================
   SECTION: Links
   ========================================================================== */
/* ==========================================================================
   SECTION: Headings
   ========================================================================== */
/* ==========================================================================
   SECTION: Buttons
   ========================================================================== */
/* ==========================================================================
   SECTION: Forms
   ========================================================================== */
/* ==========================================================================
   SECTION: Header
   ========================================================================== */
/**
 * @file SVG Icon Mixins
 * @summary Custom SASS mixins for rendering Font Awesome icons with various options.
 */
/**
 * @mixin fa
 * Mixin for rendering Font Awesome icons with customization options.
 * @param {string} $icon - The icon name.
 * @param {number|string} $first - First customization option (weight, family, or pseudo-element).
 * @param {number|string} $sec - Second customization option (weight, family, or pseudo-element).
 * @param {number|string} $third - Third customization option (weight, family, or pseudo-element).
 */
@keyframes animation-preloader {
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

@keyframes animation-preloader {
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

.module-gchild-button {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-y, var(--spacing-4)) var(--gap-x, var(--spacing-6));
  align-items: center;
}
.module-gchild-button.btn-layout-block {
  flex-direction: column;
  align-items: baseline;
}

/*# sourceMappingURL=frontend.css.map*/