.nassi-navigation {
    display: block;
    margin: var(--nn-margin, 0 0 18px 0);
    padding: var(--nn-padding, 10px 0);
    background: var(--nn-bg, transparent);
    border: 1px solid var(--nn-border, transparent);
    border-radius: var(--nn-radius, 14px);
    box-shadow: var(--nn-shadow, none);
    font-family: inherit;
    line-height: 1.4;
}

.nassi-navigation__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nn-gap, 8px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nassi-navigation__home,
.nassi-navigation__item {
    display: inline-flex;
    align-items: center;
    gap: var(--nn-gap, 8px);
    min-width: 0;
}

.nassi-navigation__home {
    color: var(--nn-home-icon, #009933);
}

.nassi-navigation__home-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    color: inherit;
}

.nassi-navigation__home-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.nassi-navigation__link,
.nassi-navigation__text {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    border-radius: 999px;
    transition: color .16s ease, background-color .16s ease;
    text-underline-offset: 3px;
}

/* Normal clickable breadcrumb items. Keep these explicit so theme link styles do not override the plugin settings. */
.nassi-navigation .nassi-navigation__item:not(.is-current) .nassi-navigation__link,
.nassi-navigation .nassi-navigation__item:not(.is-current) .nassi-navigation__text {
    color: var(--nn-link, #111827) !important;
    font-weight: var(--nn-link-weight, 400) !important;
    font-style: var(--nn-link-style, normal) !important;
    text-decoration: var(--nn-link-decoration, underline) !important;
}

.nassi-navigation .nassi-navigation__item:not(.is-current) .nassi-navigation__link:hover,
.nassi-navigation .nassi-navigation__item:not(.is-current) .nassi-navigation__link:focus {
    color: var(--nn-link-hover, #009933) !important;
    text-decoration: var(--nn-link-decoration, underline) !important;
}

/* Current item. This also covers the edge case where current_link is enabled. */
.nassi-navigation .nassi-navigation__item.is-current .nassi-navigation__link,
.nassi-navigation .nassi-navigation__item.is-current .nassi-navigation__text {
    color: var(--nn-current, #111827) !important;
    font-weight: var(--nn-current-weight, 700) !important;
    font-style: var(--nn-current-style, normal) !important;
    text-decoration: var(--nn-current-decoration, none) !important;
}

.nassi-navigation__separator {
    color: var(--nn-separator, #94a3b8);
    user-select: none;
}

.nassi-navigation--scroll .nassi-navigation__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.nassi-navigation--scroll .nassi-navigation__home,
.nassi-navigation--scroll .nassi-navigation__item {
    flex: 0 0 auto;
}