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


/* ==========================================================================
   Base Badge
   ========================================================================== */

.gs-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 10px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

}


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

.gs-badge-primary{

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

    color:#fff;

}


/* ==========================================================================
   New
   ========================================================================== */

.gs-badge-new{

    background:#00C853;

    color:#fff;

}


/* ==========================================================================
   Trending
   ========================================================================== */

.gs-badge-trending{

    background:#FF6D00;

    color:#fff;

}


/* ==========================================================================
   Premium
   ========================================================================== */

.gs-badge-premium{

    background:#FFC107;

    color:#111;

}


/* ==========================================================================
   Kids
   ========================================================================== */

.gs-badge-kids{

    background:#42A5F5;

    color:#fff;

}


/* ==========================================================================
   Audio
   ========================================================================== */

.gs-badge-audio{

    background:#8E24AA;

    color:#fff;

}


/* ==========================================================================
   Video
   ========================================================================== */

.gs-badge-video{

    background:#E53935;

    color:#fff;

}


/* ==========================================================================
   Story
   ========================================================================== */

.gs-badge-story{

    background:#5F8F7B;

    color:#fff;

}


/* ==========================================================================
   Galaxy
   ========================================================================== */

.gs-badge-galaxy{

    background:#3949AB;

    color:#fff;

}


/* ==========================================================================
   Universe
   ========================================================================== */

.gs-badge-universe{

    background:#00897B;

    color:#fff;

}


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

.gs-badge-success{

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

    color:#fff;

}


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

.gs-badge-warning{

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

    color:#111;

}


/* ==========================================================================
   Error
   ========================================================================== */

.gs-badge-error{

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

    color:#fff;

}


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

.gs-badge-outline{

    background:transparent;

    border:var(--gs-border);

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

}