@charset "UTF-8";
/**
 * HW Components — Button
 *
 * Type: Component
 * Purpose: Accessible button component with multiple variants, sizes, and states
 * Template: Button.html
 * Version: 2.0 (Migrated from TYPO3 11.5)
 *
 * Variants:
 * - button: Standard button element
 * - link: Anchor styled as button
 * - pseudo: Non-interactive button appearance
 *
 * Sizes:
 * - large (default): Primary CTAs, hero sections
 * - medium: Standard UI elements
 * - small: Compact spaces, filter tabs
 *
 * Colors:
 * - primary (default): Main brand actions
 * - alternative: Secondary actions
 * - mono: Neutral actions
 *
 * Icon Support:
 * - Icon left/right via hw13-icon-text component
 * - Icon-only with screen-reader text
 *
 * Note: This SCSS is the source; Button.css is the compiled artifact shipped by the extension.
 */
/**
 * HW Components — Button Base
 *
 * Type: Component Placeholders
 * Purpose: Extendable SCSS placeholder selectors for the Button component.
 *          Import this file and @extend only the parts you need for custom variants.
 *
 * Available placeholders:
 * - %hw13-button-css-variables                    Base CSS custom properties (large/default)
 * - %hw13-button-css-variables-size-medium         Size medium overrides
 * - %hw13-button-css-variables-size-small          Size small overrides
 * - %hw13-button-css-variables-color-alternative   Alternative color scheme
 * - %hw13-button-css-variables-color-mono          Mono color scheme
 * - %hw13-button                                  Base element layout (display, border-radius)
 * - %hw13-button-icon-only                        Icon-only button adjustments
 * - %hw13-button-interactive                      Button/anchor base styles with all states
 * - %hw13-button-icon-text                        Icon text component styles
 * - %hw13-button-tag-badge                        Tag badge positioning
 * - %hw13-button-text                             Button text wrapper styles
 *
 * Usage:
 *   @use "ButtonBase";
 *
 *   @layer hw13-components {
 *       hw13-button-custom {
 *           @extend %hw13-button-css-variables;
 *           @extend %hw13-button;
 *
 *           button, a {
 *               @extend %hw13-button-interactive;
 *           }
 *       }
 *   }
 */
/**
 * Convert value to rem based on root font size
 * Necessary because Figma exports values without units
 *
 * @param {String|Number} $value - Value to convert
 * @return {String} - calc() expression for rem conversion
 *
 * @example
 *   border-radius: hw13-rem-convert(var(--hw13-image-border-radius));
 *   // Output: calc((var(--hw13-image-border-radius) / var(--hw13-root-font-size)) * 1rem)
 */
/**
 * Convert value to em based on root font size
 * Necessary because Figma exports values without units
 *
 * @param {String|Number} $value - Value to convert
 * @return {String} - calc() expression for em conversion
 *
 * @example
 *   border-radius: hw13-em-convert(var(--hw13-image-border-radius));
 *   // Output: calc((var(--hw13-image-border-radius) / var(--hw13-root-font-size)) * 1em)
 */
/**
 * Convert unitless value to pixels
 *
 * @param {Number} $value - Unitless number to convert
 * @return {String} - calc() expression for px value
 *
 * @example
 *   outline-width: hw13-px-convert(var(--hw-card-border-width));
 *   // Output: calc(var(--hw-card-border-width) * 1px)
 */
/**
 * Fluid typography/spacing with clamp()
 * Supports viewport units (vw, vh) and container query units (cqi, cqh)
 *
 * @param {String} $unit - vw, vh, cqi, or cqh
 * @param {Number|String} $minSize - Minimum size (px or CSS var)
 * @param {Number|String} $maxSize - Maximum size (px or CSS var)
 * @param {Number} $minWidth - Min viewport/container width (optional, unit-specific defaults)
 * @param {Number} $maxWidth - Max viewport/container width (optional, unit-specific defaults)
 * @return {String} - clamp() calculation
 *
 * @example
 *   font-size: hw13-clamp(cqi, var(--hw-size-16), var(--hw-size-32), 20, 31);
 *   padding: hw13-clamp(vw, 1rem, 3rem);
 */
/**
 * Resolve breakpoint value (helper function for hw13-query)
 * Converts breakpoint names to actual values from $hw13-breakpoints map
 *
 * @param {String|Number} $breakpoint-value - Breakpoint name or direct value
 * @return {Number} - Resolved breakpoint value
 * @access private
 */
/**
 * Unified mixin for media queries and container queries
 * Supports breakpoint names from $hw13-breakpoints map
 *
 * @param {Map} $breakpoints - Map with "from" and/or "to" keys
 * @param {String} $type - "media" or "container"
 * @param {String} $container-name - Optional container name (for container queries)
 *
 * @example
 *   // Media query with breakpoint names
 *   @include hw13-query((from: "m", to: "l"), "media") {
 *     font-size: 2rem;
 *   }
 *
 *   // Container query with direct value
 *   @include hw13-query((from: 20rem), "container", "hw13-card") {
 *     padding: 2rem;
 *   }
 *
 *   // Range query
 *   @include hw13-query((from: "s", to: "m"), "media") {
 *     display: none;
 *   }
 */
/**
 * Recursively generate CSS custom properties from SCSS map
 * Creates --hw13-prefixed variables
 *
 * @param {Map} $map - Nested map of CSS properties
 * @param {String} $prefix - Internal prefix for recursion (don't pass manually)
 *
 * @example
 *   $css-variables: (
 *     image-card: (
 *       padding: 1rem,
 *       color: (
 *         default: red,
 *         hover: blue,
 *       ),
 *     ),
 *   );
 *
 *   @include hw13-generate-css-vars($css-variables);
 *
 *   // Generates:
 *   // --hw13-image-card-padding: 1rem;
 *   // --hw13-image-card-color-default: red;
 *   // --hw13-image-card-color-hover: blue;
 */
/**
 * Generate @font-face declarations for custom fonts
 * Supports both variable and non-variable fonts
 *
 * @param {String} $font-family - Font family name
 * @param {String} $font-folder - Folder name in fonts directory
 * @param {String} $font-name - Base font file name (without weight/style suffix)
 * @param {Map} $font-weights-styles - Map of weights to styles
 * @param {Boolean} $is-variable - Whether font is a variable font (default: false)
 *
 * @example Variable font
 *   @include hw13-font-face(
 *     "Raleway Variable",
 *     "raleway",
 *     "Raleway",
 *     (
 *       normal: (100, 900),
 *       italic: (100, 900)
 *     ),
 *     true
 *   );
 *
 * @example Non-variable font
 *   @include hw13-font-face(
 *     "Raleway",
 *     "raleway",
 *     "Raleway",
 *     (
 *       400: (normal, italic),
 *       700: (normal, italic)
 *     )
 *   );
 */
/**
 * Calculate the width of elements spanning multiple grid columns
 * Based on Figma grid with 24 columns and 23 gutters
 *
 * @param {Number} $column-span - Number of columns the element should span
 * @param {String} $grid-column-count - CSS variable for total column count (default: var(--hw13-grid-column-count))
 * @param {String} $grid-gutter - CSS variable for gutter width (default: var(--hw13-grid-width-gutter))
 * @return {String} - calc() expression for the element width
 *
 * @example
 *   // Using defaults (24 columns, standard gutter)
 *   section {
 *     flex: 0 0 hw13-grid-column-width(14);
 *   }
 *
 *   // Custom grid (12 columns, custom gutter)
 *   aside {
 *     width: hw13-grid-column-width(8, var(--custom-column-count), var(--custom-gutter));
 *   }
 *
 * Formula:
 * 1. Calculate pure column width: (100% - (gutter × (columns - 1))) / columns
 * 2. Multiply by column span
 * 3. Add back the gutters within the span: gutter × (span - 1)
 */
/*
	--hw13-button-large-padding-top: var(--hw13-padding-6l);
	--hw13-button-large-padding-right: var(--hw13-padding-9l);
	--hw13-button-large-padding-bottom: var(--hw13-padding-6l);
	--hw13-button-large-padding-left: var(--hw13-padding-9l);
	--hw13-button-large-border-width: var(--hw13-border-width);
	--hw13-button-large-border-radius-top-left: var(--hw13-border-radius-default);
	--hw13-button-large-border-radius-top-right: var(--hw13-border-radius-default);
	--hw13-button-large-border-radius-bottom-left: var(--hw13-border-radius-default);
	--hw13-button-large-border-radius-bottom-right: var(--hw13-border-radius-default);
	--hw13-button-large-gap: var(--hw13-gap-2l);
	--hw13-button-medium-padding-top: var(--hw13-padding-4l);
	--hw13-button-medium-padding-right: var(--hw13-padding-6l);
	--hw13-button-medium-padding-bottom: var(--hw13-padding-4l);
	--hw13-button-medium-padding-left: var(--hw13-padding-6l);
	--hw13-button-medium-border-width: var(--hw13-border-width);
	--hw13-button-medium-gap: var(--hw13-gap-1l);
	--hw13-button-small-padding-top: var(--hw13-padding-2l);
	--hw13-button-small-padding-right: var(--hw13-padding-4l);
	--hw13-button-small-padding-bottom: var(--hw13-padding-2l);
	--hw13-button-small-padding-left: var(--hw13-padding-4l);
	--hw13-button-small-border-width: var(--hw13-border-width);
	--hw13-button-small-gap: var(--hw13-gap-base);
	--hw13-button-font-family-text: var(--hw13-font-family-default);
	--hw13-button-font-family-icon: var(--hw13-font-family-icon);
	--hw13-button-font-weight-text: var(--hw13-font-weight-600);
	--hw13-button-font-weight-icon: var(--hw13-font-weight-icon);
	--hw13-button-main-color-background-default: var(--hw13-color-primary);
	--hw13-button-main-color-background-hover: var(--hw13-color-primary-dark-50);
	--hw13-button-main-color-background-active: var(--hw13-color-primary-dark-100);
	--hw13-button-main-color-background-disabled: var(--hw13-color-black-20);
	--hw13-button-main-color-text-default: var(--hw13-color-primary-comp);
	--hw13-button-main-color-text-hover: var(--hw13-color-primary-comp);
	--hw13-button-main-color-text-active: var(--hw13-color-primary-comp);
	--hw13-button-main-color-text-disabled: var(--hw13-color-black-60);
	--hw13-button-main-color-border-default: var(--hw13-color-primary);
	--hw13-button-main-color-border-hover: var(--hw13-color-primary-dark-50);
	--hw13-button-main-color-border-active: var(--hw13-color-primary-dark-100);
	--hw13-button-main-color-border-disabled: var(--hw13-color-black-20);
	--hw13-button-alternative-color-background-default: var(--hw13-color-secondary);
	--hw13-button-alternative-color-background-hover: var(--hw13-color-secondary-dark-50);
	--hw13-button-alternative-color-background-active: var(--hw13-color-secondary-dark-100);
	--hw13-button-alternative-color-background-disabled: var(--hw13-color-black-20);
	--hw13-button-alternative-color-text-default: var(--hw13-color-secondary-comp);
	--hw13-button-alternative-color-text-hover: var(--hw13-color-secondary-comp);
	--hw13-button-alternative-color-text-active: var(--hw13-color-secondary-comp);
	--hw13-button-alternative-color-text-disabled: var(--hw13-color-black-60);
	--hw13-button-alternative-color-border-default: var(--hw13-color-secondary);
	--hw13-button-alternative-color-border-hover: var(--hw13-color-secondary-dark-50);
	--hw13-button-alternative-color-border-active: var(--hw13-color-secondary-dark-100);
	--hw13-button-alternative-color-border-disabled: var(--hw13-color-black-20);
	--hw13-button-border-radius-alt: var(--hw13-border-radius-max, var(--hw13-button-large-border-radius-default));
*/
@layer hw13-components {
  hw13-button {
    --hw13-button-font-size: var(--hw13-button-large-font-size);
    --hw13-button-padding-top: calc(var(--hw13-button-large-padding-top) / var(--hw13-root-font-size) * 1em);
    --hw13-button-padding-right: calc(var(--hw13-button-large-padding-right) / var(--hw13-root-font-size) * 1em);
    --hw13-button-padding-bottom: calc(var(--hw13-button-large-padding-bottom) / var(--hw13-root-font-size) * 1em);
    --hw13-button-padding-left: calc(var(--hw13-button-large-padding-left) / var(--hw13-root-font-size) * 1em);
    --hw13-button-border-width: calc(var(--hw13-button-large-border-width) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-top-left: calc(var(--hw13-button-large-border-radius-top-left) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-top-right: calc(var(--hw13-button-large-border-radius-top-right) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-bottom-right: calc(var(--hw13-button-large-border-radius-bottom-right) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-bottom-left: calc(var(--hw13-button-large-border-radius-bottom-left) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-gap: calc(var(--hw13-button-large-gap) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-icon-size: var(--hw13-button-large-font-size);
    --hw13-button-min-height: calc(clamp(calc(calc(48 / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)), calc(calc(48 / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)) + calc((calc(62 / 16) - calc(48 / 16)) * (100cqi - calc(25 * 1rem / (var(--hw13-root-font-size, 16) / 16))) / (64 - 25)), calc(calc(62 / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16))) * (var(--hw13-root-font-size, 16) / 16));
    --hw13-button-shadow: none;
    --hw13-button-color-background-default: var(--hw13-button-main-color-background-default);
    --hw13-button-color-background-hover: var(--hw13-button-main-color-background-hover);
    --hw13-button-color-background-active: var(--hw13-button-main-color-background-active);
    --hw13-button-color-background-disabled: var(--hw13-button-main-color-background-disabled);
    --hw13-button-color-text-default: var(--hw13-button-main-color-text-default);
    --hw13-button-color-text-hover: var(--hw13-button-main-color-text-hover);
    --hw13-button-color-text-active: var(--hw13-button-main-color-text-active);
    --hw13-button-color-text-disabled: var(--hw13-button-main-color-text-disabled);
    --hw13-button-color-border-default: var(--hw13-button-main-color-border-default);
    --hw13-button-color-border-hover: var(--hw13-button-main-color-border-hover);
    --hw13-button-color-border-active: var(--hw13-button-main-color-border-active);
    --hw13-button-color-border-disabled: var(--hw13-button-main-color-border-disabled);
    --hw13-button-border-radius-alt: var(--hw13-border-radius-max, var(--hw13-button-large-border-radius-default));
    --hw13-font-weight-icon: var(--hw13-font-weight-400, 400);
  }
  hw13-button[data-size=medium] {
    --hw13-button-padding-top: calc(var(--hw13-button-medium-padding-top) / var(--hw13-root-font-size) * 1em);
    --hw13-button-padding-right: calc(var(--hw13-button-medium-padding-right) / var(--hw13-root-font-size) * 1em);
    --hw13-button-padding-bottom: calc(var(--hw13-button-medium-padding-bottom) / var(--hw13-root-font-size) * 1em);
    --hw13-button-padding-left: calc(var(--hw13-button-medium-padding-left) / var(--hw13-root-font-size) * 1em);
    --hw13-button-border-width: calc(var(--hw13-button-medium-border-width) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-top-left: calc(var(--hw13-button-medium-border-radius-top-left) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-top-right: calc(var(--hw13-button-medium-border-radius-top-right) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-bottom-right: calc(var(--hw13-button-medium-border-radius-bottom-right) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-bottom-left: calc(var(--hw13-button-medium-border-radius-bottom-left) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-gap: calc(var(--hw13-button-medium-gap) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-font-size: var(--hw13-button-medium-font-size);
    --hw13-button-icon-size: var(--hw13-button-medium-font-size);
    --hw13-button-min-height: calc(clamp(calc(calc(40 / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)), calc(calc(40 / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)) + calc((calc(50 / 16) - calc(40 / 16)) * (100cqi - calc(25 * 1rem / (var(--hw13-root-font-size, 16) / 16))) / (64 - 25)), calc(calc(50 / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16))) * (var(--hw13-root-font-size, 16) / 16));
  }
  hw13-button[data-size=small] {
    --hw13-button-padding-top: calc(var(--hw13-button-small-padding-top) / var(--hw13-root-font-size) * 1em);
    --hw13-button-padding-right: calc(var(--hw13-button-small-padding-right) / var(--hw13-root-font-size) * 1em);
    --hw13-button-padding-bottom: calc(var(--hw13-button-small-padding-bottom) / var(--hw13-root-font-size) * 1em);
    --hw13-button-padding-left: calc(var(--hw13-button-small-padding-left) / var(--hw13-root-font-size) * 1em);
    --hw13-button-border-width: calc(var(--hw13-button-small-border-width) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-top-left: calc(var(--hw13-button-small-border-radius-top-left) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-top-right: calc(var(--hw13-button-small-border-radius-top-right) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-bottom-right: calc(var(--hw13-button-small-border-radius-bottom-right) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-bottom-left: calc(var(--hw13-button-small-border-radius-bottom-left) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-gap: calc(var(--hw13-button-small-gap) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-font-size: var(--hw13-button-small-font-size);
    --hw13-button-icon-size: var(--hw13-button-small-font-size);
    --hw13-button-min-height: calc(clamp(calc(calc(32 / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)), calc(calc(32 / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)) + calc((calc(38 / 16) - calc(32 / 16)) * (100cqi - calc(25 * 1rem / (var(--hw13-root-font-size, 16) / 16))) / (64 - 25)), calc(calc(38 / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16))) * (var(--hw13-root-font-size, 16) / 16));
  }
  hw13-button[data-color=alternative] {
    --hw13-button-color-background-default: var(--hw13-button-alternative-color-background-default);
    --hw13-button-color-background-hover: var(--hw13-button-alternative-color-background-hover);
    --hw13-button-color-background-active: var(--hw13-button-alternative-color-background-active);
    --hw13-button-color-background-disabled: var(--hw13-button-alternative-color-background-disabled);
    --hw13-button-color-text-default: var(--hw13-button-alternative-color-text-default);
    --hw13-button-color-text-hover: var(--hw13-button-alternative-color-text-hover);
    --hw13-button-color-text-active: var(--hw13-button-alternative-color-text-active);
    --hw13-button-color-text-disabled: var(--hw13-button-alternative-color-text-disabled);
    --hw13-button-color-border-default: var(--hw13-button-alternative-color-border-default);
    --hw13-button-color-border-hover: var(--hw13-button-alternative-color-border-hover);
    --hw13-button-color-border-active: var(--hw13-button-alternative-color-border-active);
    --hw13-button-color-border-disabled: var(--hw13-button-alternative-color-border-disabled);
  }
  hw13-button[data-color=mono] {
    --hw13-button-color-background-default: var(--hw13-color-black-5);
    --hw13-button-color-background-hover: var(--hw13-color-black-5);
    --hw13-button-color-background-active: var(--hw13-color-black-5);
    --hw13-button-color-background-disabled: var(--hw13-color-black-5);
    --hw13-button-color-text-default: var(--hw13-color-text-default);
    --hw13-button-color-text-hover: var(--hw13-color-text-default);
    --hw13-button-color-text-active: var(--hw13-color-text-default);
    --hw13-button-color-text-disabled: var(--hw13-color-black-60);
    --hw13-button-color-border-default: var(--hw13-color-black-5);
    --hw13-button-color-border-hover: var(--hw13-color-primary);
    --hw13-button-color-border-active: var(--hw13-color-primary);
    --hw13-button-color-border-disabled: var(--hw13-color-black-5);
    --hw13-button-border-radius-top-left: calc(var(--hw13-button-border-radius-alt) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-top-right: calc(var(--hw13-button-border-radius-alt) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-bottom-left: calc(var(--hw13-button-border-radius-alt) / var(--hw13-root-font-size) * 1rem);
    --hw13-button-border-radius-bottom-right: calc(var(--hw13-button-border-radius-alt) / var(--hw13-root-font-size) * 1rem);
  }
  hw13-button {
    border-radius: var(--hw13-button-border-radius-top-left) var(--hw13-button-border-radius-top-right) var(--hw13-button-border-radius-bottom-right) var(--hw13-button-border-radius-bottom-left);
    display: inline-block;
  }
  hw13-button:has(hw13-sr-only) {
    --hw13-button-padding-right: var(--hw13-button-padding-top);
    --hw13-button-padding-bottom: var(--hw13-button-padding-top);
    --hw13-button-padding-left: var(--hw13-button-padding-top);
  }
  hw13-button:has(hw13-sr-only) > button,
  hw13-button:has(hw13-sr-only) > a {
    aspect-ratio: 1;
  }
  hw13-button:has(hw13-sr-only) hw13-icon {
    --hw13-icon-color: currentColor;
    aspect-ratio: 1;
    line-height: inherit;
    min-height: 1lh;
  }
  hw13-button:has(hw13-sr-only) hw13-icon::before {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  hw13-button[data-variant=pseudo] hw13-button-text,
  hw13-button button:not(hw13-icon-text button),
  hw13-button a:not(hw13-icon-text a), hw13-button[data-variant=link] > hw13-icon-text, hw13-button[data-variant=form] > hw13-icon-text, hw13-button[data-variant=pseudo] > hw13-icon-text {
    box-sizing: border-box;
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--hw13-button-gap);
    position: relative;
    width: auto;
    min-height: var(--hw13-button-min-height);
    padding-top: calc(var(--hw13-button-padding-top) - var(--hw13-button-border-width));
    padding-right: calc(var(--hw13-button-padding-right) - var(--hw13-button-border-width));
    padding-bottom: calc(var(--hw13-button-padding-bottom) - var(--hw13-button-border-width));
    padding-left: calc(var(--hw13-button-padding-left) - var(--hw13-button-border-width));
    font-family: var(--hw13-button-font-family-text);
    font-size: var(--hw13-button-font-size);
    font-weight: var(--hw13-button-font-weight-text);
    line-height: var(--hw13-text-line-height);
    color: var(--hw13-button-color-text-default);
    background: var(--hw13-button-color-background-default);
    border: var(--hw13-button-border-width) solid var(--hw13-button-color-border-default);
    box-shadow: var(--hw13-button-shadow);
    text-decoration: none;
    cursor: pointer;
    border-radius: inherit;
    transition-property: background-color, color, border-color;
    transition-duration: var(--hw13-motion-duration-short);
    transition-timing-function: var(--hw13-motion-timing-function);
  }
  hw13-button[data-variant=pseudo] hw13-button-text:hover,
  hw13-button button:hover:not(hw13-icon-text button),
  hw13-button a:hover:not(hw13-icon-text a), hw13-button[data-variant=link] > hw13-icon-text:hover, hw13-button[data-variant=form] > hw13-icon-text:hover, hw13-button[data-variant=pseudo] > hw13-icon-text:hover, hw13-button[data-variant=pseudo] hw13-button-text:focus-visible,
  hw13-button button:focus-visible:not(hw13-icon-text button),
  hw13-button a:focus-visible:not(hw13-icon-text a), hw13-button[data-variant=link] > hw13-icon-text:focus-visible, hw13-button[data-variant=form] > hw13-icon-text:focus-visible, hw13-button[data-variant=pseudo] > hw13-icon-text:focus-visible {
    --hw13-button-color-background-default: var(--hw13-button-color-background-hover);
    --hw13-button-color-text-default: var(--hw13-button-color-text-hover);
    --hw13-button-color-border-default: var(--hw13-button-color-border-hover);
  }
  hw13-button[data-variant=pseudo] hw13-button-text[aria-pressed=true],
  hw13-button button[aria-pressed=true]:not(hw13-icon-text button),
  hw13-button a[aria-pressed=true]:not(hw13-icon-text a), hw13-button[data-variant=link] > hw13-icon-text[aria-pressed=true], hw13-button[data-variant=form] > hw13-icon-text[aria-pressed=true], hw13-button[data-variant=pseudo] > hw13-icon-text[aria-pressed=true], hw13-button[data-variant=pseudo] hw13-button-text[aria-expanded=true],
  hw13-button button[aria-expanded=true]:not(hw13-icon-text button),
  hw13-button a[aria-expanded=true]:not(hw13-icon-text a), hw13-button[data-variant=link] > hw13-icon-text[aria-expanded=true], hw13-button[data-variant=form] > hw13-icon-text[aria-expanded=true], hw13-button[data-variant=pseudo] > hw13-icon-text[aria-expanded=true], hw13-button[data-variant=pseudo] hw13-button-text[aria-selected=true],
  hw13-button button[aria-selected=true]:not(hw13-icon-text button),
  hw13-button a[aria-selected=true]:not(hw13-icon-text a), hw13-button[data-variant=link] > hw13-icon-text[aria-selected=true], hw13-button[data-variant=form] > hw13-icon-text[aria-selected=true], hw13-button[data-variant=pseudo] > hw13-icon-text[aria-selected=true], hw13-button[data-variant=pseudo] hw13-button-text:active,
  hw13-button button:active:not(hw13-icon-text button),
  hw13-button a:active:not(hw13-icon-text a), hw13-button[data-variant=link] > hw13-icon-text:active, hw13-button[data-variant=form] > hw13-icon-text:active, hw13-button[data-variant=pseudo] > hw13-icon-text:active {
    --hw13-button-color-background-default: var(--hw13-button-color-background-active);
    --hw13-button-color-text-default: var(--hw13-button-color-text-active);
    --hw13-button-color-border-default: var(--hw13-button-color-border-active);
  }
  hw13-button[data-variant=pseudo] hw13-button-text[disabled],
  hw13-button button[disabled]:not(hw13-icon-text button),
  hw13-button a[disabled]:not(hw13-icon-text a), hw13-button[data-variant=link] > hw13-icon-text[disabled], hw13-button[data-variant=form] > hw13-icon-text[disabled], hw13-button[data-variant=pseudo] > hw13-icon-text[disabled] {
    --hw13-button-color-background-default: var(--hw13-button-color-background-disabled);
    --hw13-button-color-text-default: var(--hw13-button-color-text-disabled);
    --hw13-button-color-border-default: var(--hw13-button-color-border-disabled);
    pointer-events: none;
    cursor: default;
  }
  @container (max-width: 25rem) {
    hw13-button[data-variant=pseudo] hw13-button-text,
    hw13-button button:not(hw13-icon-text button),
    hw13-button a:not(hw13-icon-text a), hw13-button[data-variant=link] > hw13-icon-text, hw13-button[data-variant=form] > hw13-icon-text, hw13-button[data-variant=pseudo] > hw13-icon-text {
      justify-content: center;
      width: 100%;
    }
  }
  hw13-button hw13-icon-text a,
  hw13-button hw13-icon-text button {
    color: inherit;
  }
  hw13-button hw13-icon-text a::after,
  hw13-button hw13-icon-text button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  hw13-button hw13-tag[data-count] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25em;
    transform: translateX(calc(50% + var(--hw13-button-border-width))) translateY(calc(-50% - var(--hw13-button-border-width)));
    z-index: 1;
  }
  hw13-button-text {
    pointer-events: none;
    min-width: 1.25em;
    min-height: 1.25em;
    line-height: 1.25;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hw13-button-font-family-text);
    font-size: var(--hw13-button-font-size);
    font-weight: var(--hw13-button-font-weight-text);
    letter-spacing: var(--hw13-button-text-letter-spacing);
  }
}
@layer hw13-components {
  hw13-button[data-variant=link] > hw13-icon-text:has(:focus-visible), hw13-button[data-variant=form] > hw13-icon-text:has(:focus-visible) {
    --hw13-button-color-background-default: var(--hw13-button-color-background-hover);
    --hw13-button-color-text-default: var(--hw13-button-color-text-hover);
    --hw13-button-color-border-default: var(--hw13-button-color-border-hover);
  }
  hw13-button[data-variant=pseudo] > hw13-icon-text {
    pointer-events: none;
    cursor: default;
  }
  hw13-content-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block: 0.75rem;
  }
  @media (width >= 48rem) {
    .hw13-button__text--short {
      display: none;
    }
  }
  .hw13-button__text--long {
    display: none;
  }
  @media (width >= 48rem) {
    .hw13-button__text--long {
      display: inline;
    }
  }
}
hw13-button hw13-icon-text > :not(hw13-icon),
hw13-button hw13-icon-text a,
hw13-button hw13-icon-text button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration-color: var(--hw13-button-color-background-default);
}

hw13-button hw13-icon-text hw13-icon {
  place-self: center;
}

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