.catalog-menu-list-item .catalog-menu-list-item__title {
    display: flex;
    gap: var(--space);
    align-items: center;
}

.catalog-menu-list-item .catalog-menu-list-item__subtitle {
    font-weight: var(--theme-font-weight-light);
    color: var(--theme-text-20);
}

.catalog-menu-list-item[disabled] .catalog-menu-list-item__title,
.catalog-menu-list-item[disabled] .catalog-menu-list-item__subtitle {
    color: var(--theme-text-30);
}

.catalog-menu-list-item[t-variant="warning"] .catalog-menu-list-item__title,
.catalog-menu-list-item[t-variant="warning"] .catalog-menu-list-item__subtitle {
    color: var(--theme-warning-text);
}

/** This is needed so we can show an ellipsis on the title and subtitle */
.catalog-menu-list-item .ui-row {
    display: block;
    width: 100%;
}

/** Show an ellipsis on the title and subtitle */
.catalog-menu-list-item .ui-row .ui-row__label div .catalog-menu-list-item__title,
.catalog-menu-list-item .ui-row .ui-row__label div .catalog-menu-list-item__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}