/* List reset */
.mbl-list {
  --mbl-icon-size: 20px;
  --mbl-icon-gap: 8px;

  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* Gutenberg "Link color" support uses this CSS var */
.mbl-list a {
  color: var(--wp--style--color--link, inherit);
}

/* Item layout */
.mbl-list .mbl-list-item {
  display: flex;
  gap: var(--mbl-icon-gap, 8px);
  margin: 0.25rem 0;
  padding: 0.125rem 0;
  align-items: flex-start;
}

/* Vertical alignment options inherited from list or overridden per item */
.mbl-list[data-icon-vertical-align="top"] .mbl-list-item,
.mbl-list .mbl-list-item[data-icon-vertical-align="top"] {
  align-items: flex-start;
}

.mbl-list[data-icon-vertical-align="middle"] .mbl-list-item,
.mbl-list .mbl-list-item[data-icon-vertical-align="middle"] {
  align-items: center;
}

.mbl-list[data-icon-vertical-align="bottom"] .mbl-list-item,
.mbl-list .mbl-list-item[data-icon-vertical-align="bottom"] {
  align-items: flex-end;
}

/* Bullet base styling (data-icon ligature) */
.mbl-list .mbl-list-item::before {
  content: attr(data-icon);
  font-size: var(--mbl-icon-size, 20px);
  line-height: 1;
  color: var(--mbl-icon-color, currentColor);
  flex: 0 0 auto;
}

/* Font family switch by icon set */
.mbl-list .mbl-list-item[data-icon-set="icons"]::before {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.mbl-list .mbl-list-item[data-icon-set="symbols-outlined"]::before {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
}

.mbl-list .mbl-list-item[data-icon-set="symbols-rounded"]::before {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
}

.mbl-list .mbl-list-item[data-icon-set="symbols-sharp"]::before {
  font-family: "Material Symbols Sharp";
  font-weight: normal;
  font-style: normal;
}

/* Text wrapper */
.mbl-list .mbl-item-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Inspector preview fonts */
.components-panel__body .material-icons {
  font-size: 20px;
  vertical-align: middle;
}

.components-panel__body .material-symbols-outlined,
.components-panel__body .material-symbols-rounded,
.components-panel__body .material-symbols-sharp {
  font-size: 20px;
  vertical-align: middle;
}

@media (max-width: 600px) {
  .mbl-list .mbl-list-item::before {
    font-size: var(--mbl-icon-size, 18px);
  }
}