.Status {
    $variant-colors: (
        error: --danger,
        warning: --warning,
        success: --success,
        info: --info,
        revision: --revision,
        neutral: --gray-600,
    );

    display: flex;
    align-items: center;

    @each $status-type, $variant-value in $variant-colors {
        &.variant-#{$status-type} {
            .GlyphIcon {
                color: var(#{$variant-value});
            }
        }
    }

    &.size-small {
        @include text-body-small;
    }

    &-body {
        display: flex;
        margin-left: var(--padding-small);
        flex-direction: row;
        gap: var(--padding-small);
        align-items: center;
    }

    &-subtext {
        color: var(--text-secondary);
    }

    &-table {
        flex-direction: column;
        gap: 0;
        align-items: start;

        .Status-subtext {
            @include text-body-small;
        }
    }
}