/**
 * Navigation Menu - Tiny State Styles
 * Styles for the minimal sticky mode when scrolled
 */

/* Sticky Sentinel */
navigation-menu-sticky-sentinel {
    position: relative;
    width: 1px;
    height: 1px;
    visibility: hidden;
    pointer-events: none;
    margin-bottom: -1px;
    /* Prevent affecting layout */
    display: block;
}

/* Tiny Layout */
navigation-menu[tiny] {
    width: min-content;
    cursor: default;
    --width-icons-header: 1.5rem;
    --padding-icons: 0;
}

navigation-menu[tiny] navigation-menu-header {
    padding: 0.25rem 0.75rem;
}

/* Image container transition for smooth resize */
navigation-menu [entry="home"] [image-container] {
    transition: width var(--timing-decoration-double) ease, height var(--timing-decoration-double) ease;
}

/* Header transition */
navigation-menu navigation-menu-header {
    transition: padding var(--timing-navigation-menu-active) ease;
}

/* Hide body and trigger in tiny mode */
navigation-menu[tiny] navigation-menu-body {
    height: 0;
    overflow: hidden;
}

navigation-menu[tiny] navigation-menu-body,
navigation-menu[tiny] navigation-menu-trigger {
    /* display: none; */
    /* opacity: 0; */
    position: absolute;
}

navigation-menu[tiny] navigation-menu-body > *,
navigation-menu[tiny] navigation-menu-trigger {
    transform: scale(0);
    opacity: 0;
}

/* Transition for showing/hiding body and trigger */
navigation-menu navigation-menu-body > *,
navigation-menu navigation-menu-trigger {
    transform: scale(1);
    opacity: 1;
    transition: transform var(--timing-decoration-double) ease, opacity var(--timing-decoration) ease;
}

/* Active overlay hidden in tiny */
navigation-menu[tiny] navigation-menu-active-overlay {
    opacity: 0;
    transform: scale(0);
    transition: opacity var(--timing-navigation-menu-active) ease, transform var(--timing-decoration) ease;
}

/* Show active entry name in tiny */
navigation-menu[tiny] navigation-menu-active-entry-name {
    display: flex;
    justify-content: center;
    align-items: center;
}
navigation-menu[tiny] navigation-menu-active-entry-name span,
navigation-menu[tiny] navigation-menu-active-entry-preview {
    max-width: 80vw;
}

/* Home entry not clickable in tiny */
navigation-menu[tiny] navigation-menu-header [entry] {
    pointer-events: none;
    margin-right: 0.5rem;
}