mwcpl/dist/collection/components/mwcpl-list-item/mwcpl-list-item.css

Master's Web Component Pattern Library

:host {
  display: block;
}

li {
  display: flex;
  align-items: center;
  list-style-type: none;
  padding: 1rem;
  transition: all 100ms ease;
  background-color: var(--mwcpl-list-item-background-color, #ffffff);
  border-radius: var(--mwcpl-list-border-radius, 4px);
  color: var(--mwcpl-list-item-color, #000000);
  cursor: pointer;
}
li .spacer {
  flex: 1 1 auto;
}

li:hover {
  background-color: var(--mwcpl-list-item-background-color-hover, #f5f5f5);
}

li:active {
  background-color: var(--mwcpl-list-item-background-color-active, #e9e9e9);
}

slot[name=trailing-icon]::slotted(*) {
  color: var(--mwcpl-list-item-trailing-icon-color, #808080);
  font-size: 1rem;
  margin-left: 1rem;
}

slot[name=leading-icon]::slotted(*) {
  color: var(--mwcpl-list-item-leading-icon-color, #808080);
  font-size: 1rem;
  margin-right: 1rem;
}