@mixin number-card {
    padding: var(--size-2-1) var(--size-4-1);
    border-radius: var(--radius-s);
    background-color: var(--color-base-30);
    font-size: var(--font-ui-small);

    &.good {
        background-color: rgba(var(--color-green-rgb), 0.35);
    }

    &.bad {
        background-color: rgba(var(--color-red-rgb), 0.35);
    }
}

.status-description {
    margin: var(--p-spacing) 0;

    .number {
        @include number-card;
        font-family: var(--font-monospace);
        font-weight: var(--bold-weight);
    }

    .error {
        color: rgb(var(--color-red-rgb));
    }

    .warning {
        color: rgb(var(--color-yellow-rgb));
    }
}