.service-status {
    display: flex;
    align-items: center;
}

.service-status__indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
}


.service-status--success .service-status__indicator {
    background-color: green;
}

.service-status--minor .service-status__indicator {
    background-color: gold;
}

.service-status--major .service-status__indicator {
    background-color: orange;
}

.service-status--critical .service-status__indicator {
    background-color: red;
}

.service-status--unknown .service-status__indicator {
    background-color: gray;
}

.service-status__description {
    text-transform: lowercase;
}

.service-status__description::first-letter {
    text-transform: uppercase;
}