@import "common/var";

.c-inline-status {
    display: flex;
    font-size: 1em;
}

.c-inline-status__indicator {
    border-radius: 50%;
    margin-right: .3em;
    width: .5em;
    height: .5em;
}

.c-inline-status__indicator--success {
    background-color: $color-success-dark;
}

.c-inline-status__indicator--fail {
    background-color: $color-danger-dark;
}

.c-inline-status__indicator--warning {
    background-color: $color-warning;
}

.c-inline-status__indicator--info {
    background-color: $color-info-dark;
}

.c-inline-status__label-container {
    display: flex;
}

.c-inline-status__label {
    font-size: .9em;
}
.c-inline-status__secondary-label {
    font-size: .7em;
    color: $color-gray--050;
    display: block;
}

.c-inline-status--label-direction-vertical {
    flex-direction: column;
}
.c-inline-status--label-direction-horizontal {
    flex-direction: row;
    align-items: center;
    .c-inline-status__secondary-label {
        margin-left: .5rem;
        position: relative;
        top: 1px;
    }
}

.c-inline-status--lg {
    font-size: 1.3em;
}

.c-inline-status--direction-horizontal {
    align-items: center;
}

.c-inline-status--direction-vertical {
    align-items: baseline;
}