@layer component {
  .miz-nav {
    --nav-background-color: var(--component-mode-background-color, transparent);
    --nav-text-color: var(--component-mode-text-color, rgb(0, 0, 0));
    --nav-text-color-selection: var(--component-mode-text-color-selection, rgb(0, 0, 0));
    --nav-text-background-color-selection: var(--component-mode-text-background-color-selection, rgb(255, 209, 125));
    --nav-font-size: var(--component-mode-font-size, medium);
    --nav-list-display: var(--component-mode-nav-list-display, auto);
    --nav-list-flex-direction: var(--component-mode-nav-list-flex-direction, row);
    --nav-list-padding: var(--component-mode-nav-list-padding, 0);
    --nav-list-margin: var(--component-mode-nav-list-margin, 0);
    --nav-list-background-color: var(--component-mode-nav-list-background-color, transparent);
    --nav-list-list-style: var(--component-mode-nav-list-list-style, none);
    --nav-link-display: var(--component-mode-link-display, flex);
    --nav-link-display-flex-gap: var(--component-mode-link-display-flex-gap, 0.75rem);
    --nav-link-display-flex-align-items: var(--component-mode-link-display-flex-align-items, normal);
    --nav-link-space-padding: var(--component-mode-link-space-padding, 1rem 1rem 1rem 1rem);
    --nav-link-background-color: var(--component-mode-link-background-color, transparent);
    --nav-link-background-color-hover: var(--component-mode-link-background-color-hover, #e5e5e5);
    --nav-link-font-weight: var(--component-mode-link-font-weight, normal);
    --nav-link-font-size: var(--component-mode-link-font-size, medium);
    --nav-link-text-align: var(--component-mode-link-text-align, left);
    --nav-link-text-decoration: var(--component-mode-link-text-decoration, none);
    --nav-link-text-decoration-hover: var(--component-mode-link-text-decoration-hover, underline);
    --nav-link-text-color: var(--component-mode-link-text-color, rgb(0, 0, 0));
    --nav-link-text-color-hover: var(--component-mode-link-text-color-hover, rgb(0, 0, 0));
    display: var(--component-mode-display, var(--nav-display));
    position: relative;
    font-size: var(--component-mode-font-size, var(--nav-font-size));
    color: var(--component-mode-text-color, var(--nav-text-color));
    background-color: var(--component-mode-background-color, var(--nav-background-color));
  }
  .miz-nav ::selection {
    background-color: var(--nav-text-background-color-selection);
    color: var(--nav-text-color-selection);
  }
}
@layer component {
  .miz-nav__list {
    /* Display/Box Model */
    display: var(--component-mode-nav-list-display, var(--nav-list-display));
    flex-direction: var(--component-mode-nav-list-flex-direction, var(--nav-list-flex-direction));
    padding: var(--component-mode-nav-list-padding, var(--nav-list-padding));
    margin: var(--component-mode-nav-list-margin, var(--nav-list-margin));
    background-color: var(--component-mode-nav-list-background-color, var(--nav-list-background-color));
    /* Style */
    list-style: var(--component-mode-nav-list-list-style, var(--nav-list-list-style));
  }
}
@layer component {
  .miz-nav__list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
@layer modifier {
  .miz-nav--compact {
    --nav-link-space-padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  }
  .miz-nav--inline {
    --nav-list-display: flex;
  }
}