/**
 * Menus and lists.
 *
 * These classes are used in claro-toolbar-menu and any list items.
 */

.item-list,
.menu-item {
  --item-list-spacing-l: var(--space-l);
  --item-list-spacing-m: var(--space-m);
}

.item-list ul {
  margin-block: 4px;
  margin-inline: var(--item-list-spacing-l) 0;
  list-style: disc;
}

.item-list ul li,
.menu-item {
  list-style: disc;
}

.menu-item {
  margin: 0;
}

.item-list ul li.collapsed,
.menu-item--collapsed {
  list-style: disc;
}

.item-list ul li.expanded,
.menu-item--expanded {
  list-style: circle;
}

ul {
  &.links li,
  &.inline li {
    padding-inline-end: var(--item-list-spacing-m);
  }

  &.inline li {
    display: inline;
  }
}