Badge: User

.c-badge {
    background-color: $color-grey-light;
    color: $color-white;
    display: inline-block;
    font-size: rem-calc(13);
    line-height: rem-calc(14);
    margin: 0 .2em 0 0;
    padding: 1px .4em;
    position: relative;

    &--user {
        background-color: $color-yellow;
        text-shadow: 0 0 4px #cc9900;
    }

    &--prop {
        background-color: $color-grey;
        font-family: $body-font-family;

        // Font Awesome migration
        &::before {
            content: '';
            display: inline-block;
            font-family: "Font Awesome 5 Free", sans-serif;
            font-size: rem-calc(13);
            font-style: normal;
            font-variant: normal;
            font-weight: 900;
            margin-right: .2em;
            text-rendering: auto;
        }
    }

    &--user,
    &--prop {
        border-radius: rem-calc(2);
        font-weight: 700;
    }

    &--outline {
        border: 1px solid $color-white;
    }

    // Icons (See /node_modules/@fortawesome/fontawesome-free/css/fontawesome.css)
    &--prop-gallery::before {
        // Camera
        content: '\f030';
    }

    &--prop-video::before {
        // Video
        content: '\f03d';
    }

    &.c-badge--large {
        font-size: rem-calc(24);
        font-weight: 600;
        line-height: 1;
        padding: .2em .4em;
    }
}