{"version":3,"file":"Button.module.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-control-gap, var(--tempest-space-2));\n    border: 1px solid transparent;\n    border-radius: var(--tempest-control-radius, var(--tempest-radius-md));\n    font-family: var(--tempest-font-sans);\n    font-weight: var(--tempest-weight-semibold);\n    line-height: var(--tempest-leading-none);\n    letter-spacing: var(--tempest-tracking-normal);\n    text-decoration: none;\n    white-space: nowrap;\n    user-select: none;\n    transition: var(--tempest-transition-base);\n    box-shadow: var(--tempest-shadow-xs);\n}\n\n.button:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .button:hover:not(:disabled) {\n        box-shadow: var(--tempest-shadow-sm);\n    }\n}\n\n.button:active:not(:disabled) {\n    transform: translateY(1px);\n    box-shadow: var(--tempest-shadow-xs);\n}\n\n.button:disabled {\n    opacity: 0.55;\n    box-shadow: none;\n}\n\n/* ============================================================\n * Variants — solid (default), soft, outline, ghost\n * Status colors: primary, secondary (neutral), danger, success\n * ============================================================ */\n\n/* primary — solid filled */\n.primary {\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n.primary:hover:not(:disabled) {\n    background-color: var(--tempest-primary-hover);\n}\n.primary:active:not(:disabled) {\n    background-color: var(--tempest-primary-active);\n}\n\n/* secondary — neutral surface */\n.secondary {\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    border-color: var(--tempest-border);\n}\n.secondary:hover:not(:disabled) {\n    background-color: var(--tempest-surface-2);\n    border-color: var(--tempest-border-strong);\n}\n\n/* danger — solid red */\n.danger {\n    background-color: var(--tempest-danger-solid);\n    color: var(--tempest-danger-on-solid);\n}\n.danger:hover:not(:disabled) {\n    background-color: var(--tempest-danger-hover);\n}\n\n/* success — solid green */\n.success {\n    background-color: var(--tempest-success-solid);\n    color: var(--tempest-success-on-solid);\n}\n.success:hover:not(:disabled) {\n    filter: brightness(0.92);\n}\n\n/* ghost — transparent, hover surface */\n.ghost {\n    background-color: transparent;\n    color: var(--tempest-text);\n    box-shadow: none;\n}\n.ghost:hover:not(:disabled) {\n    background-color: var(--tempest-surface);\n    box-shadow: none;\n}\n.ghost:active:not(:disabled) {\n    background-color: var(--tempest-surface-2);\n    box-shadow: none;\n}\n\n/* soft — tinted background, primary text */\n.soft {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow: none;\n}\n.soft:hover:not(:disabled) {\n    background-color: var(--tempest-primary-soft-hover);\n}\n\n/* outline — bordered, transparent fill */\n.outline {\n    background-color: transparent;\n    color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    box-shadow: none;\n}\n/*\n * The text colour has to move with the background.\n *\n * `.outline` sets `color: var(--tempest-primary)` over a transparent background,\n * where it is fine. This rule tints the background to `--tempest-primary-soft` and,\n * without restating the colour, leaves the fill token sitting on the tint: **4.38:1 in\n * the light theme and 4.28:1 in dark**, both under the 4.5:1 floor for text — so the\n * label got harder to read at the exact moment the pointer was on it.\n *\n * `--tempest-primary-on-soft` is the token for this ground (6.18:1 / 8.72:1) and\n * `docs/styles.md` has documented the rule all along. A rule that changes only the\n * background of a coloured element is the shape of this bug; the other eight places in\n * the SDK that tint a background inherit `--tempest-text`, `--tempest-text-muted` or\n * `--tempest-primary-on-soft` and are fine.\n */\n.outline:hover:not(:disabled) {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n/* link — text-only, underline on hover */\n.link {\n    background-color: transparent;\n    color: var(--tempest-primary);\n    box-shadow: none;\n    padding-left: 0;\n    padding-right: 0;\n    border-radius: var(--tempest-radius-sm);\n}\n.link:hover:not(:disabled) {\n    color: var(--tempest-primary-hover);\n    text-decoration: underline;\n    background: none;\n    box-shadow: none;\n}\n\n/* ============================================================\n * Sizes — token-driven, density-aware\n * ============================================================ */\n.xs {\n    height: var(--tempest-control-height-xs);\n    padding: 0 var(--tempest-control-padding-xs);\n    font-size: var(--tempest-control-font-xs);\n}\n.sm {\n    height: var(--tempest-control-height-sm);\n    padding: 0 var(--tempest-control-padding-sm);\n    font-size: var(--tempest-control-font-sm);\n}\n.md {\n    height: var(--tempest-control-height-md);\n    padding: 0 var(--tempest-control-padding-md);\n    font-size: var(--tempest-control-font-md);\n}\n.lg {\n    height: var(--tempest-control-height-lg);\n    padding: 0 var(--tempest-control-padding-lg);\n    font-size: var(--tempest-control-font-lg);\n}\n.xl {\n    height: var(--tempest-control-height-xl);\n    padding: 0 var(--tempest-control-padding-xl);\n    font-size: var(--tempest-control-font-xl);\n}\n\n/* Square (icon-only) — width matches height */\n.iconOnly {\n    position: relative;\n}\n.iconOnly.xs {\n    width: var(--tempest-control-height-xs);\n    padding: 0;\n}\n.iconOnly.sm {\n    width: var(--tempest-control-height-sm);\n    padding: 0;\n}\n.iconOnly.md {\n    width: var(--tempest-control-height-md);\n    padding: 0;\n}\n.iconOnly.lg {\n    width: var(--tempest-control-height-lg);\n    padding: 0;\n}\n.iconOnly.xl {\n    width: var(--tempest-control-height-xl);\n    padding: 0;\n}\n\n/* Touch hit-slop — extend tap target to a min 44×44 on coarse pointers\n * for the smallest icon-only sizes, without changing visual footprint. */\n@media (pointer: coarse) {\n    .iconOnly.xs::after,\n    .iconOnly.sm::after {\n        content: \"\";\n        position: absolute;\n        inset: -8px;\n    }\n}\n\n/* Pill shape */\n.pill {\n    border-radius: var(--tempest-radius-full);\n}\n\n.fullWidth {\n    width: 100%;\n}\n\n/*\n * Lay out leftIcon + label + rightIcon as one centered, gapped row. Without\n * this the three are inline inside a single span (no gap, icon baseline-\n * aligned instead of centered), which reads as off-center — most visible on\n * fullWidth buttons where the label has room to drift.\n */\n.content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-control-gap, var(--tempest-space-2));\n    min-width: 0;\n}\n\n.loading .hiddenText {\n    visibility: hidden;\n}\n\n.spinner {\n    position: absolute;\n    animation: tempest-spin 0.8s linear infinite;\n}\n\n@keyframes tempest-spin {\n    from {\n        transform: rotate(0deg);\n    }\n    to {\n        transform: rotate(360deg);\n    }\n}\n"],"mappings":";"}