/*
==========================================================
FantasyFanzone Button System
Version: 4.0
==========================================================
*/

.ffz-btn,
.ffz-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:12px;

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

    padding:0 28px;

    border:0;
    border-radius:var(--ffz-button-radius);

    font-family:var(--ffz-font-family);
    font-size:var(--ffz-font-size-base);
    font-weight:var(--ffz-font-weight-semibold);
    line-height:1;

    text-align:center;
    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

    user-select:none;
    -webkit-user-select:none;

    transition:
        background-color var(--ffz-transition-normal),
        color var(--ffz-transition-normal),
        border-color var(--ffz-transition-normal),
        transform var(--ffz-transition-normal),
        box-shadow var(--ffz-transition-normal),
        opacity var(--ffz-transition-normal),
        filter var(--ffz-transition-normal);
}

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

.ffz-btn--primary,
.ffz-button{
    background:var(--ffz-gradient-primary);

    color:#fff;

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

.ffz-btn--primary:hover,
.ffz-button:hover{
    transform:translateY(-2px);

    box-shadow:var(--ffz-shadow-lg);
}

.ffz-btn--primary:active,
.ffz-button:active{
    transform:translateY(0);
}

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

.ffz-btn--secondary,
.ffz-button--secondary{
    background:var(--ffz-surface);

    color:var(--ffz-text);

    border:1px solid var(--ffz-border);

    box-shadow:none;
}

.ffz-btn--secondary:hover,
.ffz-button--secondary:hover{
    background:var(--ffz-surface-light);

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

    transform:translateY(-2px);
}

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

.ffz-btn--ghost,
.ffz-button--ghost{
    background:transparent;

    border:1px solid var(--ffz-border);

    color:var(--ffz-text);

    box-shadow:none;
}

.ffz-btn--ghost:hover,
.ffz-button--ghost:hover{
    background:rgba(255,255,255,.04);

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

    transform:translateY(-2px);
}

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

.ffz-btn--outline{
    background:transparent;

    border:2px solid var(--ffz-primary);

    color:var(--ffz-primary);

    box-shadow:none;
}

.ffz-btn--outline:hover{
    background:var(--ffz-primary);

    color:#fff;

    transform:translateY(-2px);
}

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

.ffz-btn--success{
    background:var(--ffz-success);

    color:#fff;

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

.ffz-btn--success:hover{
    filter:brightness(1.08);

    transform:translateY(-2px);

    box-shadow:var(--ffz-shadow-lg);
}

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

.ffz-btn--danger{
    background:var(--ffz-danger);

    color:#fff;

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

.ffz-btn--danger:hover{
    filter:brightness(1.08);

    transform:translateY(-2px);

    box-shadow:var(--ffz-shadow-lg);
}

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

.ffz-btn--sm{
    min-height:40px;

    padding:0 18px;

    font-size:14px;
}

.ffz-btn--lg{
    min-height:58px;

    padding:0 36px;

    font-size:18px;
}

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

.ffz-btn--block{
    display:flex;

    width:100%;
}

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

.ffz-btn:disabled,
.ffz-button:disabled,
.ffz-btn[aria-disabled="true"],
.ffz-button[aria-disabled="true"]{
    opacity:.55;

    cursor:not-allowed;

    pointer-events:none;

    transform:none;

    box-shadow:none;
}

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

.ffz-btn:focus-visible,
.ffz-button:focus-visible{
    outline:2px solid var(--ffz-primary);
    outline-offset:4px;
}

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

.ffz-btn svg,
.ffz-button svg{
    flex-shrink:0;

    width:1em;
    height:1em;

    fill:currentColor;
}

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

@media(max-width:480px){

    .ffz-btn,
    .ffz-button{
        max-width:100%;

        white-space:normal;
    }

    .ffz-btn--lg{
        min-height:54px;

        padding:0 28px;

        font-size:16px;
    }

}

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

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

    .ffz-btn,
    .ffz-button{
        transition:none;
    }

    .ffz-btn:hover,
    .ffz-button:hover,
    .ffz-btn:active,
    .ffz-button:active{
        transform:none;
    }

}