md-list-item {
  display: block;
}

.md-list-item {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-3xs);
  width: 100%;
  border: none;
  border-radius: var(--md-radius-xs);
  background-color: var(--md-background-primary);
  color: var(--md-content-secondary);
  text-align: left;
  cursor: pointer;
}

.md-list-item > .md-list-item__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* sizes: sm 32px · mn 40px · lg 48px */

.md-list-item.md-list-item--sm,
.md-list-item.md-list-item--mn {
  font-family: var(--md-text-label-lg-font-family);
  font-size: var(--md-text-label-lg-font-size);
  line-height: var(--md-text-label-lg-line-height);
  letter-spacing: var(--md-text-label-lg-letter-spacing);
}

.md-list-item.md-list-item--sm {
  padding: var(--md-spacing-3xs) var(--md-spacing-2xs);
}

.md-list-item.md-list-item--mn {
  padding: var(--md-spacing-2xs);
}

.md-list-item.md-list-item--lg {
  padding: var(--md-spacing-2xs) var(--md-spacing-xs);
  font-family: var(--md-text-body-mn-font-family);
  font-size: var(--md-text-body-mn-font-size);
  line-height: var(--md-text-body-mn-line-height);
  letter-spacing: var(--md-text-body-mn-letter-spacing);
}

/* Icon slot: 12px in sm, 16px above; FMD is a font, so it is sized with the font-size ramp. */
.md-list-item > .md-list-item__icon {
  font-size: var(--md-font-size-4);
  line-height: var(--md-line-height-1);
}

.md-list-item.md-list-item--sm > .md-list-item__icon {
  font-size: var(--md-font-size-2);
}

/* states: default variant */

.md-list-item.md-list-item--default:hover:not([disabled]) {
  background-color: var(--md-background-hover);
  color: var(--md-content-primary);
}

.md-list-item.md-list-item--default.md-list-item--selected {
  background-color: var(--md-background-secondary);
  color: var(--md-content-primary);
}

/* states: destructive variant */

.md-list-item.md-list-item--destructive {
  color: var(--md-content-negative);
}

.md-list-item.md-list-item--destructive:hover:not([disabled]) {
  background-color: var(--md-background-hover);
}

.md-list-item.md-list-item--destructive.md-list-item--selected {
  background-color: var(--md-background-negative-subtle);
  color: var(--md-content-negative-bold);
}

/* states shared by every variant */

.md-list-item:focus-visible:not([disabled]) {
  outline: var(--md-border-width-mn) solid var(--md-border-focus);
  outline-offset: 0;
}

.md-list-item[disabled] {
  background-color: var(--md-background-disabled);
  color: var(--md-content-disabled);
  cursor: not-allowed;
}