.metrics-container {

    background: var(--aisera-uicomponents-metrics-bgcolor);
    color: var(--aisera-uicomponents-metrics-color);
    display: inline-flex;
    padding: 0 0.5rem;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 4px;
    line-height: 1.5rem;

    &.metric {
        &-success {
            --aisera-uicomponents-metrics-bgcolor: #36C9A91A;
            --aisera-uicomponents-metrics-color: #319B84;
        }

        &-warning {
            --aisera-uicomponents-metrics-bgcolor: #FF99001A;
            --aisera-uicomponents-metrics-color: #C97A03;
        }

        &-error {
            --aisera-uicomponents-metrics-bgcolor: #FF5D5F1A;
            --aisera-uicomponents-metrics-color: #DF3D3F;
        }

        &-neutral {
            --aisera-uicomponents-metrics-bgcolor: #838B9C1A;
            --aisera-uicomponents-metrics-color: #5F6878;
        }
    }
}