/* =====================================================
   KASI MATTRESS
   BUTTONS
   Version: 1.1.0
   ===================================================== */


/* ==========================================
   BASE BUTTON
========================================== */

.km-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: var(--button-height);

    padding: 5px 30px;

    border: 2px solid transparent;

    border-radius: var(--radius-round);

    cursor: pointer;

    text-decoration: none;

    font-family: var(--font-body);

    font-size: var(--font-size-base);

    font-weight: var(--font-weight-semibold);

    line-height: 1;

    white-space: nowrap;

    /*
     * Smooth, controlled transitions.
     * Avoid transition: all because it can animate
     * properties that should not visually move.
     */
    transition:
        background-color 220ms ease,
        color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;

}


/* ==========================================
   BUTTON ICONS
========================================== */

.km-btn i {

    font-size: 0.95em;

    transition:
        transform 220ms ease;

}


/* ==========================================
   PRIMARY
========================================== */

.km-btn-primary {

    background: var(--primary);

    color: var(--white);

    border-color: var(--primary);

    box-shadow: var(--shadow-sm);

}

.km-btn-primary:hover {

    background: var(--primary-dark);

    color: var(--white);

    border-color: var(--primary-dark);

    box-shadow: var(--shadow-md);

    transform: translateY(-2px);

}

.km-btn-primary:hover i {

    transform: translateX(2px);

}


/* ==========================================
   SECONDARY
========================================== */

.km-btn-secondary {

    background: var(--accent);

    color: var(--white);

    border-color: var(--accent);

    box-shadow: var(--shadow-sm);

}

.km-btn-secondary:hover {

    background: var(--accent-dark);

    color: var(--white);

    border-color: var(--accent-dark);

    box-shadow: var(--shadow-md);

    transform: translateY(-2px);

}

.km-btn-secondary:hover i {

    transform: translateX(2px);

}


/* ==========================================
   OUTLINE
========================================== */

.km-btn-outline {

    background: transparent;

    color: var(--accent);

    border-color: var(--primary);

}

.km-btn-outline:hover {

    background: var(--primary);

    color: var(--white);

    border-color: var(--primary);

    box-shadow: var(--shadow-sm);

    transform: translateY(-2px);

}

.km-btn-outline:hover i {

    transform: translateX(2px);

}


/* ==========================================
   WHITE
========================================== */

.km-btn-white {

    background: var(--white);

    color: var(--primary);

    border-color: var(--white);

    box-shadow: var(--shadow-sm);

}

.km-btn-white:hover {

    background: var(--white);

    color: var(--primary);

    border-color: var(--white);

    box-shadow: var(--shadow-md);

    transform: translateY(-2px);

}

.km-btn-white:hover i {

    transform: translateX(2px);

}


/* ==========================================
   SUCCESS
========================================== */

.km-btn-success {

    background: var(--success);

    color: var(--white);

    border-color: var(--success);

    box-shadow: var(--shadow-sm);

}

.km-btn-success:hover {

    background: var(--success);

    color: var(--white);

    border-color: var(--success);

    filter: brightness(0.95);

    box-shadow: var(--shadow-md);

    transform: translateY(-2px);

}


/* ==========================================
   FULL WIDTH
========================================== */

.km-btn-block {

    width: 100%;

}


/* ==========================================
   BUTTON SIZES
========================================== */

.km-btn-sm {

    min-height: 42px;

    padding: 0 20px;

    font-size: var(--font-size-sm);

}

.km-btn-lg {

    min-height: 60px;

    padding: 0 40px;

    font-size: var(--font-size-lg);

}


/* ==========================================
   DISABLED
========================================== */

.km-btn:disabled,

.km-btn.disabled {

    opacity: 0.55;

    cursor: not-allowed;

    pointer-events: none;

    transform: none;

    box-shadow: none;

}


/* ==========================================
   ACTIVE
========================================== */

.km-btn:active {

    transform: translateY(0);

    box-shadow: var(--shadow-sm);

}


/* ==========================================
   FOCUS
========================================== */

.km-btn:focus-visible {

    outline: 3px solid var(--accent);

    outline-offset: 3px;

}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .km-btn,

    .km-btn i {

        transition: none;

    }

}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 768px) {

    .km-btn {

        width: 100%;

    }

}