.badge-group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.badge { --transition-speed: var(--ts-15); --font-size: 1.2rem; --line-height: 1; --padding: .45rem .9rem; --color: #ffffff; --bg-color: var(--clr-text); --border-radius: 0 0 .5rem .5rem; --border: none; --box-shadow: none; --hover-color: var(--color); --hover-bg-color: var(--bg-color); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow);
    display: inline-flex; align-items: center; column-gap: .2rem; font-size: var(--font-size); line-height: var(--line-height); padding: var(--padding); color: var(--color); background-color: var(--bg-color); border-radius: var(--border-radius); border: var(--border); box-shadow: var(--box-shadow); text-align: center; font-weight: 600; text-decoration: none; vertical-align: middle; user-select: none; transition-property: color, background-color, border-color, box-shadow; transition-duration: var(--transition-speed); transition-timing-function: ease;
    
    > .wpb-icon { width: 1.2rem; height: 1.2rem; font-size: 1.2rem; margin-right: 3px;
        &.wpb-icon--favicon { --width: 1.2rem; --height: 1.2rem; }
    }

    &:hover { color: var(--hover-color); background-color: var(--hover-bg-color); border: var(--hover-border); box-shadow: var(--hover-box-shadow); }
    
    /* Sizes */
    &.badge--small { min-height: 1.9rem; font-size: 1.2rem; padding: 0 .8rem; }
    &.badge--medium { min-height: 2.5rem; }
    &.badge--large { min-height: 3.2rem; }
    
    /* Variations */
    &.badge--rounded { border-radius: 2rem; }
    &.badge--primary { --color: #ffffff; --bg-color: var(--clr-primary); }
    &.badge--green { --color: #ffffff; --bg-color: var(--clr-green); }
    &.badge--red { --color: #ffffff; --bg-color: var(--clr-red); }
    &.badge--blue { --color: #ffffff; --bg-color: var(--clr-blue); }
    &.badge--lightred {--color: var(--clr-red); --bg-color: #f7dce0;}
    &.badge--lightgreen {--color: var(--clr-green); --bg-color: #e6f1de;}
    &.badge--outline { --color: var(--clr-text); --border: 1px solid var(--clr-border); --bg-color: transparent;
        &:hover { --hover-color: #ffffff; --bg-color:var(--clr-blue); --border: 1px solid var(--clr-blue); }
    }
    
    @media (min-width: 768px) {
        column-gap: .3rem; --padding: .55rem 1rem;
    }
}


/*** ---------- Pill ---------- ***/
.pill { --transition-speed: var(--ts-15); --font-size: 1.4rem; --line-height: 1; --padding: .3rem .5rem; --color: #ffffff; --bg-color: var(--clr-text); --border-radius: 2rem; --border: none; --box-shadow: none; --hover-color: var(--color); --hover-bg-color: var(--bg-color); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow); display: inline-block; font-size: var(--font-size); line-height: var(--line-height); padding: var(--padding); color: var(--color); background-color: var(--bg-color); border-radius: var(--border-radius); border: var(--border); box-shadow: var(--box-shadow); text-align: center; font-weight: 600; text-decoration: none; vertical-align: middle; user-select: none; transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease; 
    &.pill--white { --color: var(--clr-green); --bg-color: #ffffff; }
}