.list-with-menu {
    $main: &;

    &__wrapper {
        $wrapper: &;

        display: flex;
        flex: 1;
        align-items: center;
        overflow: hidden;

        &_icon-on-hover {
            &#{$wrapper}_active #{$main}__controls,
            &:hover #{$main}__controls {
                visibility: visible;
            }
        }
    }

    &__item {
        display: flex;
        min-width: 0;
        align-items: center;
        height: 36px;
        width: 100%;
        cursor: pointer;
        justify-content: space-between;
    }

    &__item-text {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 160px;
    }

    &__item-content {
        display: flex;
        align-items: center;
        width: 100%;
    }

    &__controls {
        display: flex;
        margin-left: 5px;
        visibility: hidden;
    }

    &__delete-button {
        color: var(--g-color-text-danger);
    }

    &__menu-button {
        color: var(--g-color-text-complementary);
    }
}
