{"version":3,"file":"spend-rules-checkout-integration.css","mappings":"AAeA,4CACC,mBACA,oBACA,UACA,YACA,uBACA,kBACA,kBACA,iCAGA,sBACA,eAEA,kDACC,+BACA,mBAGD,gFACC,cAGA,kBACA,iBAEA,oFACC,kBAUF,6EACC,yBACA,mBACA,mBAEA,mFACC,WAKF,kHAEC,yBACA,mBAEA,0IACC,wCAGD,8HACC,WAUD,iGACC,WAKF,kFACC,gDACA,uCAEA,uGACC,WAQF,qDACC,mBAEA,yFACC,WAcF,8DACC,qCACA,mCACA,YACA,mBACA,kBACA,gBACA,gBACA,eACA,iBACA,uBACA,oBACA,qBACA,mBACA,gBACA,oBACA,mBACA,uBAEA,oFACC,qCACA,mCACA,WAGD,wEACC,WACA,mBAQF,+DACC,mBACA,kBACA,YAEA,oEACC,uBAWF,iFACC,oDACA,sDACA,eAEA,uFACC,UAIF,mFACC,iDACA,mDACA,eAEA,yFACC,UAIF,kFACC,qDACA,uDACA,eAEA,wFACC,U;AC1HH,iCACC,KACC,4BCzEF,gCACC,aACA,sBACA,SAGD,yCDIC,4DACA,iBATyB,CAUzB,kBACA,gBACA,YAEA,gDACC,WACA,kBACA,QACA,4BAEA,0HAOA,+CAEA,uCAfD,gDAgBE,gBAKD,wDACC,aAWF,yCACC,qCAGD,gDACC,qCAGD,uCACC,yCACC,qCAGD,gDACC,sC","sources":["webpack://leat/./assets/ts/frontend/blocks/_shared/button/styles.scss","webpack://leat/./assets/ts/frontend/blocks/_shared/_mixins.scss","webpack://leat/./assets/ts/frontend/blocks/_shared/skeleton/styles.scss"],"sourcesContent":["// ============================================================================\n// Shared Button Component Styles\n// ============================================================================\n//\n// This component integrates with Gutenberg's native color system via CSS custom properties.\n// When using native Gutenberg button color support, the colors are applied via:\n// - style.elements.button.color.background → --leat-button-bg\n// - style.elements.button.color.text → --leat-button-text\n//\n// Usage:\n// 1. Standard buttons: Use variant=\"contained|outlined|text\"\n// 2. Size modifiers: Add leat-button--small for compact buttons\n// 3. Status styles: Add leat-button--claimed, leat-button--automatic for status indicators\n// ============================================================================\n\n.leat-block-components-button:not(.is-link) {\n\talign-items: center;\n\tdisplay: inline-flex;\n\tgap: 0.5rem;\n\theight: auto;\n\tjustify-content: center;\n\ttext-align: center;\n\tposition: relative;\n\ttransition: box-shadow 0.1s linear;\n\n\t// Default padding (can be overridden by size modifiers)\n\tpadding: 0.75rem 1.5rem;\n\tfont-size: 1rem;\n\n\t&:focus {\n\t\toutline: 2px solid currentColor;\n\t\toutline-offset: 2px;\n\t}\n\n\t.leat-block-components-button__text {\n\t\tdisplay: block;\n\n\t\t// Prevent runts/widows. Overwrite `balance` with `pretty`, as `pretty` is not supported in all browsers.\n\t\ttext-wrap: balance;\n\t\ttext-wrap: pretty;\n\n\t\t> svg {\n\t\t\tfill: currentColor;\n\t\t}\n\t}\n\n\t// ========================================================================\n\t// Variant Styles\n\t// ========================================================================\n\n\t// Text variant - minimal button with no background\n\t// Only apply when NOT using theme button styles\n\t&.text:not(.wp-block-button__link) {\n\t\tbackground: transparent;\n\t\tcolor: currentColor;\n\t\tpadding: 0.5rem 1rem;\n\n\t\t&:hover {\n\t\t\topacity: 0.9;\n\t\t}\n\t}\n\n\t// Outlined variant\n\t&.outlined,\n\t&.is-style-outline {\n\t\tbackground: transparent;\n\t\tcolor: currentColor;\n\n\t\t&:not(:focus) {\n\t\t\tbox-shadow: inset 0 0 0 1px currentColor;\n\t\t}\n\n\t\t&:hover {\n\t\t\topacity: 0.9;\n\t\t}\n\t}\n\n\t// Contained variant - inherits theme colors via wp-block-button__link\n\t// The .wp-block-button__link class provides theme button colors automatically\n\t// Custom colors from Gutenberg are applied as INLINE STYLES on buttons (not via CSS custom properties)\n\t// We intentionally DO NOT set background-color or color here to let theme styles apply\n\t&.contained.wp-block-button__link {\n\t\t// Only set hover behavior - colors come from theme or inline styles\n\t\t&:hover:not(:disabled) {\n\t\t\topacity: 0.9;\n\t\t}\n\t}\n\n\t// Fallback for contained buttons without wp-block-button__link (shouldn't happen in practice)\n\t&.contained:not(.wp-block-button__link) {\n\t\tbackground-color: var(--leat-button-bg, #1e1e1e);\n\t\tcolor: var(--leat-button-text, #ffffff);\n\n\t\t&:hover:not(:disabled) {\n\t\t\topacity: 0.9;\n\t\t}\n\t}\n\n\t// ========================================================================\n\t// State Styles\n\t// ========================================================================\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\n\t\t.leat-block-components-button__text {\n\t\t\topacity: 0.5;\n\t\t}\n\t}\n\n\t// ========================================================================\n\t// Primary loyalty action pill\n\t// ========================================================================\n\t// Canonical design for the headline action across loyalty blocks\n\t// (coupon copy, spend-rule redeem + modal CTA, referral share).\n\t// Block-specific layout tweaks (width, min-width) live in each block's SCSS.\n\t// Colors are intentionally settable via inline style from the Gutenberg\n\t// \"Styles\" panel — we use CSS custom properties with fallbacks so the\n\t// user-picked color always wins.\n\n\t&.leat-button--pill {\n\t\tbackground: var(--leat-pill-bg, #000);\n\t\tcolor: var(--leat-pill-color, #fff);\n\t\tborder: none;\n\t\tborder-radius: 24px;\n\t\tpadding: 14px 24px;\n\t\tmin-height: 48px;\n\t\tfont-weight: 500;\n\t\tfont-size: 14px;\n\t\tline-height: 21px;\n\t\tletter-spacing: -0.28px;\n\t\ttext-transform: none;\n\t\ttext-decoration: none;\n\t\twhite-space: nowrap;\n\t\tbox-shadow: none;\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t&:hover:not([disabled]) {\n\t\t\tbackground: var(--leat-pill-bg, #000);\n\t\t\tcolor: var(--leat-pill-color, #fff);\n\t\t\topacity: 0.9;\n\t\t}\n\n\t\t&[disabled] {\n\t\t\topacity: 0.6;\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t// ========================================================================\n\t// Size Modifiers\n\t// ========================================================================\n\n\t&.leat-button--small {\n\t\tpadding: 0.5rem 1rem;\n\t\tfont-size: 0.875rem;\n\t\tgap: 0.375rem;\n\n\t\t&.text {\n\t\t\tpadding: 0.375rem 0.75rem;\n\t\t}\n\t}\n\n\t// ========================================================================\n\t// Status Indicators\n\t// ========================================================================\n\t// These special button styles are used for non-interactive status displays\n\t// They should only apply when rendered as spans (is-display-only), not regular buttons\n\t// This prevents them from overriding theme button colors\n\n\t&.leat-button--claimed.is-display-only {\n\t\tcolor: var(--leat-success-color, #00a32a) !important;\n\t\tbackground: var(--leat-success-bg, #f0f6fc) !important;\n\t\tcursor: default;\n\n\t\t&:hover {\n\t\t\topacity: 1; // Override hover effects for status indicators\n\t\t}\n\t}\n\n\t&.leat-button--automatic.is-display-only {\n\t\tcolor: var(--leat-info-color, #757575) !important;\n\t\tbackground: var(--leat-info-bg, #f0f0f0) !important;\n\t\tcursor: default;\n\n\t\t&:hover {\n\t\t\topacity: 1; // Override hover effects for status indicators\n\t\t}\n\t}\n\n\t&.leat-button--location.is-display-only {\n\t\tcolor: var(--leat-location-color, #92400e) !important;\n\t\tbackground: var(--leat-location-bg, #fef3c7) !important;\n\t\tcursor: default;\n\n\t\t&:hover {\n\t\t\topacity: 1; // Override hover effects for status indicators\n\t\t}\n\t}\n}","/**\n * Shared SCSS Mixins\n *\n * Common mixins used across Leat frontend blocks\n */\n\n// Universal border radius variable (can be overridden)\n$universal-border-radius: 4px !default;\n\n/**\n * Skeleton animation mixin\n *\n * Creates an animated shimmer effect for loading states\n */\n@mixin skeleton-animation() {\n\tbackground: color-mix(in srgb, currentColor 5%, transparent);\n\tborder-radius: $universal-border-radius;\n\tposition: relative;\n\toverflow: hidden;\n\tborder: none;\n\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\ttransform: translateX(-100%);\n\t\t/* stylelint-disable declaration-colon-newline-after, function-parentheses-space-inside, function-comma-space-after */\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\ttransparent 0%,\n\t\t\tcolor-mix(in srgb, currentColor 5%, transparent) 50%,\n\t\t\ttransparent 100%\n\t\t);\n\t\t/* stylelint-enable */\n\t\tanimation: leat-skeleton-shimmer 1.25s infinite;\n\n\t\t@media (prefers-reduced-motion: reduce) {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t&--static {\n\t\t&::after {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n/**\n * Skeleton animation fade mixin\n *\n * Adds smooth transitions for skeleton appearance/disappearance\n */\n@mixin skeleton-animation-fade() {\n\t& {\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t&::after {\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t& {\n\t\t\ttransition: background-color 0.2s ease;\n\t\t}\n\n\t\t&::after {\n\t\t\ttransition: background-color 0.2s ease;\n\t\t}\n\t}\n}\n\n/**\n * Skeleton shimmer animation\n */\n@keyframes leat-skeleton-shimmer {\n\t100% {\n\t\ttransform: translateX(100%);\n\t}\n}\n","/**\n * Skeleton Component Styles\n */\n@import '../mixins';\n\n.leat-block-components-skeleton {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1rem;\n}\n\n.leat-block-components-skeleton__element {\n\t@include skeleton-animation();\n\t@include skeleton-animation-fade();\n}"],"names":[],"sourceRoot":""}