/* ===========================================
   RIBBON CLASSES - BOOTSTRAP CUSTOM THEME
   =========================================== */

/* Base Ribbon Class */
.ribbon {
    position: absolute;
    top: 10px;
    left: -11px;
    z-index: 999;
    display: inline-block;
    font-family: "HK Grotesk", sans-serif;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .3em;
    padding: 3px 15px 5px;
    color: #fff;
    text-align: center;
}

/* Multiple Ribbons Positioning */
.ribbon + .ribbon {
    top: 60px;
}

.ribbon + .ribbon + .ribbon {
    top: 110px;
}

.ribbon + .ribbon + .ribbon + .ribbon {
    top: 160px;
}

/* Base Ribbon Before Element */
.ribbon::before {
    content: '';
    border-left: 12px solid transparent;
    border-right: 0 solid transparent;
    border-top: 14px solid #6227c3;
    position: absolute;
    bottom: -14px;
    left: 0;
}

/* ===========================================
   RIBBON COLOR VARIANTS
   =========================================== */

/* Primary Ribbon */
.ribbon-primary {
    background-color: #9a6ee2 !important;
}

.ribbon-primary::before {
    border-top-color: #6227c3;
}

/* Secondary Ribbon */
.ribbon-secondary {
    background-color: #868e96 !important;
}

.ribbon-secondary::before {
    border-top-color: #555b61;
}

/* Success Ribbon */
.ribbon-success {
    background-color: #28a745 !important;
}

.ribbon-success::before {
    border-top-color: #145523;
}

/* Info Ribbon */
.ribbon-info {
    background-color: #17a2b8 !important;
}

.ribbon-info::before {
    border-top-color: #0c525d;
}

/* Warning Ribbon */
.ribbon-warning {
    background-color: #ffd65a !important;
}

.ribbon-warning::before {
    border-top-color: #f3b700;
}

/* Danger Ribbon */
.ribbon-danger {
    background-color: #dc3545 !important;
}

.ribbon-danger::before {
    border-top-color: #921925;
}

/* Light Ribbon */
.ribbon-light {
    background-color: #f8f9fa !important;
}

.ribbon-light::before {
    border-top-color: #bdc6d0;
}

/* Dark Ribbon */
.ribbon-dark {
    background-color: #343a40 !important;
}

.ribbon-dark::before {
    border-top-color: #060708;
}

/* ===========================================
   GRAY SCALE RIBBON VARIANTS
   =========================================== */

/* Gray 100 */
.ribbon-gray-100 {
    background-color: #f8f9fa !important;
}

.ribbon-gray-100::before {
    border-top-color: #bdc6d0;
}

/* Gray 200 */
.ribbon-gray-200 {
    background-color: #e9ecef !important;
}

.ribbon-gray-200::before {
    border-top-color: #aeb9c4;
}

/* Gray 300 */
.ribbon-gray-300 {
    background-color: #dee2e6 !important;
}

.ribbon-gray-300::before {
    border-top-color: #a4afba;
}

/* Gray 400 */
.ribbon-gray-400 {
    background-color: #ced4da !important;
}

.ribbon-gray-400::before {
    border-top-color: #94a1ae;
}

/* Gray 500 */
.ribbon-gray-500 {
    background-color: #adb5bd !important;
}

.ribbon-gray-500::before {
    border-top-color: #748290;
}

/* Gray 600 */
.ribbon-gray-600 {
    background-color: #868e96 !important;
}

.ribbon-gray-600::before {
    border-top-color: #555b61;
}

/* Gray 700 */
.ribbon-gray-700 {
    background-color: #495057 !important;
}

.ribbon-gray-700::before {
    border-top-color: #1a1d20;
}

/* Gray 800 */
.ribbon-gray-800 {
    background-color: #343a40 !important;
}

.ribbon-gray-800::before {
    border-top-color: #060708;
}

/* Gray 900 */
.ribbon-gray-900 {
    background-color: #212529 !important;
}

.ribbon-gray-900::before {
    border-top-color: #000;
}

/* ===========================================
   CONTEXT SPECIFIC RIBBON STYLES
   =========================================== */

/* Detail Carousel Context */
.detail-carousel .ribbon {
    position: absolute;
    top: 20px;
    left: 4px;
    z-index: 999;
}

.detail-carousel .ribbon + .ribbon {
    top: 80px;
}

.detail-carousel .ribbon + .ribbon + .ribbon {
    top: 145px;
}

/* Quickview Context */
.quickview .ribbon {
    position: absolute;
    top: 30px;
    left: -12px;
    z-index: 999;
}

.quickview .ribbon + .ribbon {
    top: 80px;
}

.quickview .ribbon + .ribbon + .ribbon {
    top: 145px;
}