/**
 * ============================================================================
 * GudStories Framework
 * ============================================================================
 *
 * File
 * ----
 * gs-framework-icons.css
 *
 * Version
 * -------
 * 1.0.0
 *
 * Status
 * ------
 * OTT FRAMEWORK
 *
 * Purpose
 * -------
 * Universal Icon System.
 *
 * ============================================================================
 */


/* ==========================================================================
   Base Icon
   ========================================================================== */

.gs-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    line-height:1;

    color:inherit;

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

}


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

.gs-icon-xs{font-size:12px;}

.gs-icon-sm{font-size:16px;}

.gs-icon-md{font-size:20px;}

.gs-icon-lg{font-size:24px;}

.gs-icon-xl{font-size:32px;}

.gs-icon-xxl{font-size:42px;}


/* ==========================================================================
   Circle
   ========================================================================== */

.gs-icon-circle{

    width:42px;

    height:42px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}


/* ==========================================================================
   Filled
   ========================================================================== */

.gs-icon-filled{

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

    color:#fff;

}


/* ==========================================================================
   Button Icons
   ========================================================================== */

.gs-btn .gs-icon{

    margin-right:6px;

}


/* ==========================================================================
   Navigation
   ========================================================================== */

.gs-nav-icon{

    width:48px;

    height:48px;

}


/* ==========================================================================
   Card Icons
   ========================================================================== */

.gs-card-icon{

    position:absolute;

    top:12px;

    right:12px;

    z-index:5;

}


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

.gs-icon-hover:hover{

    transform:scale(1.15);

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

}


/* ==========================================================================
   Active
   ========================================================================== */

.gs-icon-active{

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

}