.ui-list
{

}

.ui-list-item
{
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 32px;
  gap: 6px;
  align-items: center;
  position: relative;
  padding: 0 32px;

  &.has-icon
  {
    grid-template-columns: 32px 1fr 32px;
  }

  &:hover, &.is-selected
  {
    background: var(--color-tree-selected);
  }
}

.ui-list-item-icon
{
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  position: relative;
  top: -2px;
  color: var(--color-text-dim);
  align-self: center;
}

.ui-list-item-image
{
  max-width: 32px;
  max-height: 34px;
  justify-self: center;
}

.ui-list-item-content
{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-list-item-text
{
  display: block;
}

.ui-list-item.is-selected .ui-list-item-text
{
  font-weight: 600;
}

.ui-list-item-description
{
  color: var(--color-text-dim);
  font-size: var(--font-size-xs);
}

.ui-list-item-selected-icon
{
  color: var(--color-primary);
  justify-self: center;
}