/**
 * ============================================================================
 * GudStories Framework
 * ============================================================================
 *
 * File
 * ----
 * gs-framework-buttons.css
 *
 * Version
 * -------
 * 1.0.0
 *
 * Status
 * ------
 * OTT FRAMEWORK
 *
 * Purpose
 * -------
 * Universal Button System
 *
 * Used By
 * -------
 * Search
 * My List
 * Continue Journey
 * Profile
 * Settings
 * Universe
 * Story
 * Galaxy
 *
 * ============================================================================
 */


/* ==========================================================================
   Base Button
   ========================================================================== */

.gs-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:var(--gs-space-2);

    padding:12px 22px;

    border:none;

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

    background:var(--gs-color-surface);

    color:var(--gs-color-text);

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

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

    cursor:pointer;

    transition:var(--gs-transition-fast);

}


/* ==========================================================================
   Hover
   ========================================================================== */

.gs-btn:hover{

    transform:translateY(-2px);

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

}


/* ==========================================================================
   Primary
   ========================================================================== */

.gs-btn-primary{

    background:var(--gs-color-primary);

    color:#fff;

}

.gs-btn-primary:hover{

    background:var(--gs-color-primary-hover);

}


/* ==========================================================================
   Secondary
   ========================================================================== */

.gs-btn-secondary{

    background:var(--gs-color-surface);

    border:var(--gs-border);

}


/* ==========================================================================
   Ghost
   ========================================================================== */

.gs-btn-ghost{

    background:transparent;

    border:var(--gs-border);

}


/* ==========================================================================
   Outline
   ========================================================================== */

.gs-btn-outline{

    background:transparent;

    border:2px solid var(--gs-color-primary);

}


/* ==========================================================================
   Success
   ========================================================================== */

.gs-btn-success{

    background:var(--gs-color-success);

    color:#fff;

}


/* ==========================================================================
   Warning
   ========================================================================== */

.gs-btn-warning{

    background:var(--gs-color-warning);

    color:#000;

}


/* ==========================================================================
   Danger
   ========================================================================== */

.gs-btn-danger{

    background:var(--gs-color-error);

    color:#fff;

}


/* ==========================================================================
   Icon Button
   ========================================================================== */

.gs-btn-icon{

    width:48px;

    height:48px;

    padding:0;

    border-radius:50%;

}


/* ==========================================================================
   Play Button
   ========================================================================== */

.gs-btn-play{

    width:64px;

    height:64px;

    border-radius:50%;

    font-size:22px;

}


/* ==========================================================================
   Sizes
   ========================================================================== */

.gs-btn-sm{

    padding:8px 16px;

}

.gs-btn-lg{

    padding:16px 30px;

}

.gs-btn-xl{

    padding:20px 36px;

}


/* ==========================================================================
   Block
   ========================================================================== */

.gs-btn-block{

    width:100%;

}


/* ==========================================================================
   Disabled
   ========================================================================== */

.gs-btn:disabled{

    opacity:.55;

    pointer-events:none;

}


/* ==========================================================================
   Focus
   ========================================================================== */

.gs-btn:focus-visible{

    outline:3px solid var(--gs-color-primary);

    outline-offset:3px;

}