/*
 * Navigation Group
 */
.nav-group {
    position: relative;

    display: grid;
    gap: 2px;
}

/*
 * Parent Button
 */
.nav-parent {
    width: 100%;
    min-height: 42px;

    margin: 0;
    padding: 9px 11px;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: var(--sidebar-text);

    display: flex;
    align-items: center;
    gap: 11px;

    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    box-shadow: none;
}

/*
 * Parent Hover
 */
.nav-group:not(.has-active-child):not(.parent-active)
> .nav-parent:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-strong);
}

/*
 * Parent Icon
 */
.nav-parent .ui-icon {
    flex: 0 0 auto;

    color: currentColor;

    opacity: 0.9;
}

/*
 * Chevron
 */
.nav-chevron {
    margin-left: auto;

    flex: 0 0 auto;

    display: inline-grid;
    place-items: center;

    color: currentColor;

    opacity: 0.55;

    transition:
        transform 0.18s ease,
        opacity 0.15s ease;
}

.nav-group.open .nav-chevron {
    transform:
        rotate(180deg);
}

/*
 * Active Parent
 */
.nav-group.has-active-child
> .nav-parent,
.nav-group.parent-active
> .nav-parent {
    background:
        var(--sidebar-active-bg);

    color:
        var(--sidebar-active-text);

    font-weight: 700;
}

.nav-group.has-active-child
> .nav-parent::before,
.nav-group.parent-active
> .nav-parent::before {
    content: "";

    position: absolute;

    top: 8px;
    bottom: 8px;
    left: 0;

    width: 3px;

    border-radius:
        0
        4px
        4px
        0;

    background:
        var(--sidebar-active-text);
}

/*
 * Submenu
 */
.nav-submenu {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    display: grid;
    gap: 2px;

    background:
        var(--sidebar-sub-bg);

    transition:
        max-height 0.2s ease,
        opacity 0.15s ease;
}

.nav-group.open
.nav-submenu {
    max-height: 600px;

    padding:
        5px
        0
        7px;

    opacity: 1;
}

/*
 * PC에서는 Flyout 제목 숨김
 */
.nav-submenu-title {
    display: none;
}

/*
 * Submenu Item
 */
.nav-subitem {
    position: relative;

    min-height: 36px;

    padding:
        8px
        26px
        8px
        43px;

    border-radius: 8px;

    display: flex;
    align-items: center;
    gap: 9px;

    background: transparent;
    color: var(--sidebar-text);

    font-size: 13px;
    font-weight: 400;

    text-decoration: none;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.nav-subitem:hover {
    background:
        var(--sidebar-sub-hover-bg);

    color:
        var(--sidebar-text-strong);
}

.nav-subitem.active {
    background:
        var(--sidebar-sub-active-bg);

    color:
        var(--sidebar-active-text);

    font-weight: 700;
}

/*
 * Dot
 */
.nav-sub-dot {
    width: 5px;
    height: 5px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--sidebar-dot);
}

.nav-subitem.active
.nav-sub-dot {
    background:
        var(--sidebar-active-text);

    transform:
        scale(1.3);
}

/*
 * Active Indicator
 */
.nav-subitem.active::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 11px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--sidebar-active-text);

    transform:
        translateY(-50%);
}

/*
 * Keyboard
 */
.nav-parent:focus-visible,
.nav-subitem:focus-visible {
    outline:
        2px solid
        var(--sidebar-active-text);

    outline-offset: 2px;
}


/* ==================================================
 * Tablet
 * 721px ~ 1100px
 *
 * 아이콘 클릭 → 오른쪽 Flyout Menu
 * ================================================== */
@media (
    max-width: 1100px
) and (
    min-width: 721px
) {
    .nav-group {
        position: relative;
    }

    /*
     * 부모 메뉴는 아이콘 중앙 정렬
     */
    .nav-parent {
        min-height: 44px;

        padding:
            10px
            8px;

        justify-content: center;
    }

    /*
     * 기존 Chevron 숨김
     */
    .nav-parent
    .nav-chevron {
        display: none;
    }

    /*
     * 평상시 Submenu 숨김
     */
    .nav-group
    .nav-submenu {
        position: absolute;

        top: 0;
        left: calc(100% + 10px);

        z-index: 100;

        width: 210px;
        max-height: none;

        padding: 8px;

        border:
            1px solid
            var(--sidebar-border);

        border-radius: 12px;

        background:
            var(--sidebar-bg);

        box-shadow:
            0 12px 36px
            rgba(
                0,
                0,
                0,
                0.16
            );

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        overflow: visible;

        transform:
            translateX(-4px);

        transition:
            opacity 0.15s ease,
            transform 0.15s ease,
            visibility 0.15s ease;
    }

    /*
     * Desktop의 open 상태는
     * 태블릿 Flyout을 자동으로 열지 않는다.
     */
    .nav-group.open
    .nav-submenu {
        opacity: 0;
        visibility: hidden;

        pointer-events: none;
    }

    /*
     * 태블릿에서 실제 클릭한 경우만 표시
     */
    .nav-group.tablet-open
    .nav-submenu {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform:
            translateX(0);
    }

    /*
     * Flyout Title
     */
    .nav-submenu-title {
        min-height: 36px;

        padding:
            8px
            10px
            9px;

        border-bottom:
            1px solid
            var(--sidebar-divider);

        display: flex;
        align-items: center;

        color:
            var(--sidebar-text-strong);

        font-size: 13px;
        font-weight: 700;
    }

    /*
     * Flyout 안에서는
     * 일반적인 좌측 패딩 사용
     */
    .nav-subitem {
        min-height: 38px;

        padding:
            9px
            12px;

        border-radius: 8px;
    }

    .nav-subitem.active::after {
        right: 10px;
    }

    /*
     * Flyout가 열린 아이콘
     */
    .nav-group.tablet-open
    > .nav-parent {
        background:
            var(--sidebar-active-bg);

        color:
            var(--sidebar-active-text);
    }
}


/* ==================================================
 * Mobile
 * ================================================== */
@media (max-width: 720px) {
    .nav-parent {
        min-height: 46px;

        padding:
            11px
            12px;
    }

    .nav-subitem {
        min-height: 42px;

        padding-left: 46px;
    }
}


/*
 * Motion
 */
@media (
    prefers-reduced-motion: reduce
) {
    .nav-chevron,
    .nav-submenu {
        transition: none;
    }
}