/**
 * Button Components
 * 
 * Checkout button styles that extend the centralized design system.
 * Font styles (font-family, font-size, font-weight, line-height) are
 * inherited from the main .hafo-btn base via the design system.
 *
 * @package Hafo\Checkout
 * @version 1.1.0
 */

/* Base checkout button - inherits from design system */
.hafo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hafo-space-1);
    padding: var(--hafo-space-1) var(--hafo-space-3);

    /* Typography - LOCKED from design system */
    font-family: var(--hafo-font-family) !important;
    font-size: var(--hafo-font-size-base) !important;
    font-weight: var(--hafo-font-weight-medium) !important;
    line-height: var(--hafo-space-4) !important;
    text-align: center;

    /* Appearance - Reset defaults */
    text-decoration: none !important;
    background-color: transparent;
    border-radius: var(--hafo-radius-full);
    border: var(--hafo-border-width-1) solid transparent;
    cursor: pointer;
    white-space: nowrap;
    color: inherit;

    /* Remove browser defaults */
    appearance: none;
    box-sizing: border-box;
    margin: 0;

    /* Transitions */
    transition: var(--hafo-transition-colors), var(--hafo-transition-transform);
    min-height: var(--hafo-space-6);
}

/* Ensure anchors don't have underlines in any state */
a.hafo-button,
a.hafo-button:hover,
a.hafo-button:focus,
a.hafo-button:visited {
    text-decoration: none !important;
}

/* Ensure buttons have no extra browser styling */
button.hafo-button {
    background: none;
}

.hafo-button:focus-visible {
    outline: none;
    box-shadow: var(--hafo-ring);
}

/* Primary - Brand filled button */
.hafo-button--primary {
    background-color: var(--hafo-color-brand);
    color: var(--hafo-color-text-inverted);
    border-color: var(--hafo-color-brand);
}

.hafo-button--primary:hover,
.hafo-button--primary:focus {
    background-color: var(--hafo-color-brand-dark);
    border-color: var(--hafo-color-brand-dark);
}

/* Secondary - Outline button */
.hafo-button--secondary {
    background-color: transparent;
    color: var(--hafo-color-brand);
    border-color: var(--hafo-color-brand);
}

.hafo-button--secondary:hover,
.hafo-button--secondary:focus {
    background-color: var(--hafo-color-brand);
    color: var(--hafo-color-text-inverted);
}

.hafo-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}