/*==========================================================
    IMPACTA GAMES
    DESIGN SYSTEM

    BUTTONS
==========================================================*/



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

.ig-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:0.75rem;

    min-height:48px;

    padding:0.9rem 1.8rem;

    border:1px solid transparent;

    border-radius:var(--ig-radius-md);

    background:transparent;

    color:var(--ig-text-title);

    font-family:inherit;

    font-size:var(--ig-fs-md);

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

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

    user-select:none;

    appearance:none;

    transition:
        background-color var(--ig-duration-normal) var(--ig-ease),
        border-color var(--ig-duration-normal) var(--ig-ease),
        color var(--ig-duration-normal) var(--ig-ease),
        box-shadow var(--ig-duration-normal) var(--ig-ease),
        transform var(--ig-duration-fast) var(--ig-ease);

}

.ig-btn:hover{

    text-decoration:none;

}

.ig-btn:active{

    transform:translateY(1px);

}

.ig-btn:focus-visible{

    outline:none;

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

    box-shadow:
        0 0 0 3px rgba(24,184,255,.20);

}



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

.ig-btn-primary{

    background:var(--ig-primary);

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

    color:#FFFFFF;

}

.ig-btn-primary:hover{

    background:var(--ig-primary-light);

    border-color:var(--ig-primary-light);

}

.ig-btn-primary:active{

    background:var(--ig-primary-dark);

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

}



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

.ig-btn-secondary{

    background:var(--ig-secondary);

    border-color:var(--ig-secondary);

    color:#FFFFFF;

}

.ig-btn-secondary:hover{

    filter:brightness(1.08);

}



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

.ig-btn-outline{

    background:transparent;

    border-color:var(--ig-border-light);

    color:var(--ig-text-title);

}

.ig-btn-outline:hover{

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

    color:var(--ig-primary);

}



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

.ig-btn-ghost{

    background:transparent;

    border-color:transparent;

    color:var(--ig-text-title);

}

.ig-btn-ghost:hover{

    background:var(--ig-overlay-light);

}



/*==========================================================
    LINK
==========================================================*/

.ig-btn-link{

    min-height:auto;

    padding:0;

    border:none;

    border-radius:0;

    background:none;

    color:var(--ig-primary);

}

.ig-btn-link:hover{

    color:var(--ig-primary-light);

}



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

.ig-btn-xs{

    min-height:32px;

    padding:0.45rem 0.9rem;

    font-size:var(--ig-fs-xs);

}

.ig-btn-sm{

    min-height:40px;

    padding:0.65rem 1.2rem;

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

}

.ig-btn-md{

    min-height:48px;

}

.ig-btn-lg{

    min-height:56px;

    padding:1rem 2.2rem;

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

}

.ig-btn-xl{

    min-height:64px;

    padding:1.2rem 2.8rem;

    font-size:var(--ig-fs-xl);

}



/*==========================================================
    BUTTON SHAPES
==========================================================*/

.ig-btn-square{

    border-radius:0;

}

.ig-btn-rounded{

    border-radius:var(--ig-radius-md);

}

.ig-btn-pill{

    border-radius:var(--ig-radius-pill);

}



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

.ig-btn svg,
.ig-btn img{

    width:1.15em;

    height:1.15em;

    flex-shrink:0;

}

.ig-btn-icon{

    width:48px;

    height:48px;

    padding:0;

    aspect-ratio:1;

}

.ig-btn-icon.ig-btn-sm{

    width:40px;

    height:40px;

}

.ig-btn-icon.ig-btn-lg{

    width:56px;

    height:56px;

}

.ig-btn-icon.ig-btn-xl{

    width:64px;

    height:64px;

}



/*==========================================================
    BUTTON GROUP
==========================================================*/

.ig-btn-group{

    display:flex;

    flex-wrap:wrap;

    gap:var(--ig-space-4);

}

.ig-btn-group-vertical{

    display:flex;

    flex-direction:column;

    gap:var(--ig-space-4);

}



/*==========================================================
    BUTTON STATES
==========================================================*/

.ig-btn:disabled,
.ig-btn.is-disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:none;

}

.ig-btn.is-loading{

    cursor:wait;

    pointer-events:none;

    opacity:.75;

}



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

.ig-btn-block{

    display:flex;

    width:100%;

}



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

@media (max-width:768px){

    .ig-btn-group{

        flex-direction:column;

        width:100%;

    }

    .ig-btn-group .ig-btn{

        width:100%;

    }

}



/*==========================================================
    ACCESSIBILITY
==========================================================*/

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

    .ig-btn{

        transition:none;

    }

}