Badge: Top Centered

.badge {
    position: absolute;
    top: $spacer--1;
    left: $spacer--1;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: initial;
    height: $spacer--15;
    z-index: 1;
    border-radius: 4px;
    padding: 0 $spacer--05;
    font-family: $font-family-sans-serif;
    font-size: $font-size-base;
    font-weight: $font-weight-bold;
    color: $white;
    text-transform: none;
    background: $gray;

    &--red {
        background: $red;
    }

    &--green {
        background: $green;
    }

    &--top-centered {
        position: initial;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        grid-area: badge;
        justify-self: center;
        align-items: center;
    }
}