/* ===== Navigation Component ===== */

.ui-navigation-wrapper {
    display: flex;
}

.ui-navigation {
    display: flex;
}

/* --- Nav item --- */

.nav-item {
    padding: 8px 12px;
    text-decoration: none;
    color: var(--navigation-foreground, var(--meb-text-sidenav, var(--meb-text-default)));
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    line-height: var(--font-lineheight-body);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.nav-item:hover {
    background: var(--navigation-background-hover, var(--meb-surface-sidenav-hover, var(--meb-surface-input-filled)));
}

.nav-item.active {
    background: var(--navigation-border-focus, var(--meb-surface-sidenav-active, var(--meb-surface-input-filled)));
    color: var(--navigation-foreground-active, var(--meb-text-sidenav-active, var(--meb-text-default)));
}

/* --- Focus ring --- */

.nav-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-shadow);
}

/* --- Disabled item --- */

.nav-item.disabled {
    opacity: 0.5;
    pointer-events: none;
    color: var(--navigation-text-disabled, var(--meb-text-sidenav-disabled, var(--meb-text-muted)));
}

/* --- Disabled wrapper --- */

.ui-navigation-wrapper.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* --- Variant: Default --- */

.ui-navigation-wrapper.variant-default .nav-item.active {
    background: var(--navigation-border-focus, var(--meb-surface-sidenav-active, var(--meb-surface-input-filled)));
    color: var(--navigation-foreground-active, var(--meb-text-sidenav-active, var(--meb-text-default)));
}

/* --- Variant: Outlined --- */

.ui-navigation-wrapper.variant-outlined .nav-item.active {
    background: transparent;
    border: 1px solid var(--navigation-border, var(--meb-border-sidenav-active, var(--meb-border-subtle)));
    color: var(--navigation-foreground, var(--meb-text-sidenav, var(--meb-text-default)));
}

/* --- Variant: Filled --- */

.ui-navigation-wrapper.variant-filled .nav-item.active {
    background: var(--navigation-background, var(--meb-surface-sidenav-active, var(--meb-surface-input-filled)));
    color: var(--navigation-foreground, var(--meb-text-sidenav, var(--meb-text-default)));
}