/* ==========================================================
   DOODLE UI COMPONENT
   Module  : Component
   File    : button.css
   Version : 2.0.0
   Author  : Doodle IT Development
========================================================== */

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);

    min-height:var(--button-height-md);
    padding: 0 var(--space-8);

    border: var(--border-width) solid transparent;
    border-radius: var(--button-radius);

    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-semibold);
    line-height: var(--line-height-normal);

    cursor: pointer;
    user-select: none;

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);

    white-space: nowrap;
}

/* ==========================================================
   BUTTON HOVER
========================================================== */

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled,
.btn.disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

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

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
}

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

.btn-secondary {
    background: var(--color-text);
    color: var(--color-white);
}

.btn-secondary:hover {
    background: var(--color-black);
}

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

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-outline-gold {
    background: transparent;
    color: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
}

.btn-outline-gold:hover {
    background: var(--color-accent-gold);
    color: var(--color-white);
}

.btn-outline-white {
    background: transparent;
    color: var(--color-text-white);
    border-color: var(--color-text-white);
}

.btn-outline-white:hover {
    background: var(--color-text-white);
    color: var(--color-text);
}

/* ==========================================================
   GHOST
========================================================== */

.btn-ghost {
    background: transparent;
    color: var(--color-primary);
}

.btn-ghost:hover {
    background: var(--color-primary-soft);
}

/* ==========================================================
   DANGER
========================================================== */

.btn-danger {
    background: var(--color-danger);
    color: var(--color-white);
}

.btn-danger:hover {
    filter: brightness(.95);
}

/* ==========================================================
   BUTTON SIZE
========================================================== */

.btn-sm {
    min-height: 40px;
    padding: 0 var(--space-4);
    font-size: var(--font-size-sm);
}

.btn-md {
    min-height: 48px;
}

.btn-lg {
    min-height:var(--button-height-lg)
    padding: 0 var(--space-8);
    font-size: var(--font-size-lg);
}

/* ==========================================================
   BUTTON WIDTH
========================================================== */

.btn-block {
    width: 100%;
}

/* ==========================================================
   ICON BUTTON
========================================================== */

.btn-icon {
    width: 48px;
    height: 48px;
    padding: 0;
}

.btn-icon svg,
.btn-icon img {
    width: 20px;
    height: 20px;
}

/* ==========================================================
   LOADING
========================================================== */

.btn-loading {
    pointer-events: none;
    opacity: .85;
}

.btn-loading::after {

    content: "";

    width: 16px;
    height: 16px;

    border: 2px solid rgba(255,255,255,.35);
    border-top-color: var(--color-white);

    border-radius: 50%;

    animation: spin 1s linear infinite;

}

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

@media (max-width: 767px) {

    .btn {

        min-height: 44px;

        padding: 0 var(--space-5);

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

    }

    .btn-lg {

        min-height: 52px;

    }

}