html {
    --nav-placeholder-bg: #DBDCDE;
    --nav-scrollbar-track: #F1F1F1;
    --nav-scrollbar-thumb: #C1C1C1;
    --nav-scrollbar-thumb-hover: #A8A8A8;
    --nav-scrollbar-thumb-active: #B8B8B8;

    &.dark-mode {
        --nav-placeholder-bg: #2A2B2E;
        --nav-scrollbar-track: #424242;
        --nav-scrollbar-thumb: #686868;
        --nav-scrollbar-thumb-hover: #7B7B7B;
        --nav-scrollbar-thumb-active: #A1A1A1;
    }
}

.navigation-container {
    height: 100%;
    position: inherit;
    width: 280px;
    background-color: var(--ds-surface, #FFF);
    display: flex;

    &.placeholder nav {
        background-color: var(--nav-placeholder-bg);
    }

    &.hidden-container {
        width: 32px !important;
        box-shadow: none !important;

        .navigation {
            display: none;
        }

        & ~ .gutter.gutter-horizontal {
            display: none;
        }
    }
}

body:has(.nav-header) .navigation-container {
    .nav-toggle {
        display: none;
    }

    .navigation {
        height: calc(100% - 50px);
    }

    &.hidden-container {
        display: none;
    }
}

#navigation-container {
    visibility: hidden;
    position: fixed;

    .nav-toggle {
        padding-top: 16px;
        padding-left: 10px;
    }
}

.navigation {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
}

.navigation-items {
    overflow-x: auto;
}

.nav-toggle {
    .header-app-icon {
        margin-left: 10px;
    }

    span {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 4px;
        border-radius: 3px;
        width: 32px;

        &:hover {
            background-color: var(--ds-background-neutral-subtle-hovered);
        }
    }

    .nav-expand[aria-label]:after,
    .nav-collapse[aria-label]:after {
        left: 180%;
    }
}

#nav-container .nav-toggle {
    display: flex;
    align-items: center;
}

.gutter.gutter-horizontal {
    position: fixed;
    margin-left: 270px;
    cursor: ew-resize;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition-delay: 0.2s;
    transition-duration: 0.2s;
    transition-property: background-color;

    &:hover,
    &:active {
        background-color: var(--ds-text-selected, #1868DB);
    }
}

.pagetree-item {
    display: flex;
}

.tree-item {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding-right: 10px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        inset-block-start: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 12px;
        border-radius: 1px;
        background-color: transparent;
    }

    &:has(.link-active) {
        background-color: var(--ds-background-selected, #E9F2FE);

        &:hover {
            background-color: var(--ds-background-selected-hovered, #CFE1FD);
        }
    }
}

.tree-item-text, .tree-item a {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;

    > span:not(.navigation-icon-container) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.tree-item-empty-folder {
    color: var(--ds-text-subtlest, #626F86);
    margin-left: 24px;
    font-weight: 300;
}

.clickable-tree-item,
.non-clickable-tree-item {
    align-items: center;
    display: flex;
    margin-right: 4px;
    margin-left: 4px;
}

.clickable-tree-item:hover {
    cursor: pointer;
}

.not-clickable {
    cursor: auto !important;
}

.dot-icon {
    width: 24px;
    line-height: 12px;
}

.tree-navigation-expanded,
.tree-navigation-collapsed {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;

    &:hover {
        background-color: var(--ds-background-neutral-subtle-hovered);
    }
}

.children {
    margin-left: 12px;
    display: none;
}

.navigation-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: var(--ds-space-050, 4px);
    width: 24px;
    height: 24px;
    flex-shrink: 0;

    > span {
        line-height: 1;
        flex-shrink: 0;
        box-sizing: border-box;
        display: inline-block;
    }
}

.navigation-icon {
    vertical-align: bottom;
}

.nav-space-header {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
}

.nav-space-icon-wrapper {
    height: 24px;
    width: 24px;
    min-width: 24px;
}

.nav-space-icon {
    background-size: cover !important;
    border-radius: 8px;
    display: flex;
    height: 100%;
    width: 100%;
}

.nav-space-name {
    padding-left: 5px;
    font-weight: 500;
    color: var(--ds-text-subtle, #505258);
}

.nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-section-title {
    display: flex;
    align-items: center;
    font-weight: 500;
    gap: 4px;
}

.nav-sort {
    height: 24px;
    width: 24px;
    position: relative;
}

.nav-sort-btn {
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    border-radius: 3px;

    svg {
        flex-grow: 0;
        flex-shrink: 0;
    }
}

.nav-sort-dropdown {
    background-color: var(--ds-surface-overlay, #FFF);
    display: none;
    flex-direction: column;
    position: absolute;
    right: 0;
    box-shadow: var(--ds-shadow-overlay, 0 8px 9pt #1E1F2126, 0 0 1px #1E1F214F);
    border-radius: 3px;
    z-index: 1000;
    min-width: 225px;
    padding-block: 7px;
}

.nav-sort-dropdown-label {
    font-size: 12px;
    margin-block-start: 14px;
    margin-block-end: 6px;
    font-weight: 650;
    line-height: 16px;
    padding: 0 16px;
}

.nav-sort-option {
    display: flex;
    align-items: center;
    white-space: nowrap;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    width: 100%;
    text-align: center;
    min-height: 40px;
    padding-block-end: 8px;
    padding-block-start: 8px;
    padding-inline-end: 16px;
    padding-inline-start: 16px;
}

.nav-sort-option-inner {
    display: flex;
    align-items: center;
    column-gap: 12px;
    justify-content: space-between;
    padding-bottom: 0;
    text-align: center;
    width: 100%;
}

.nav-sort-option-check {
    display: inline-flex;
    min-width: 24px;
    min-height: 24px;
    flex-shrink: 0;
}

.nav-sort-option-label {
    text-align: left;
    outline: currentColor none medium;
    flex-grow: 1;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    display: flex;
    margin: 0;
    padding: 0;
    font-family: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-sort-option-badge {
    min-width: 24px;
    min-height: 24px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 1px;
    font-weight: 650;
    background-color: var(--ds-background-neutral, #0515240F);
    color: var(--ds-text, #292A2E);
    border-radius: 3px;
    font-size: 12px;
}

.nav-search {
    margin-top: var(--ds-space-100, 8px);
    margin-bottom: var(--ds-space-100, 8px);
}

.nav-search-inner {
    display: flex;
    box-sizing: border-box;
    column-gap: var(--ds-space-100, 8px);
}

.nav-search-bar {
    max-width: 100%;
    border-width: 1px;
    border-radius: 4px;
    box-sizing: border-box;
    padding-inline-end: 0;
    padding-inline-start: 0;
    padding-block-end: var(--ds-border-width, 1px);
    padding-block-start: var(--ds-border-width, 1px);
    cursor: text;
    flex-basis: 100%;
    background-color: var(--ds-background-input, #FFF);
    pointer-events: auto;
    vertical-align: top;
    word-wrap: break-word;
    overflow-y: hidden;
    overflow-x: hidden;
    flex-shrink: 1;
    justify-content: space-between;
    flex-grow: 1;
    color: var(--ds-text, #292A2E);
    display: flex;
    align-items: center;
    border-color: var(--ds-border, #0B120E24);
    border-style: solid;

    &:hover {
        background-color: var(--ds-background-input-hovered, #F8F8F8);
        border-color: var(--ds-border-input, #8C8F97);
    }

    &:has(input:focus) {
        box-shadow: inset 0 0 0 var(--ds-border-width, 1px) var(--ds-border-focused, #4688EC);
        background-color: var(--ds-background-input-pressed, #FFF);
        border-color: var(--ds-border-focused, #388BFF);
    }
}

.nav-search-icon-wrapper {
    padding-inline-start: 4px;
    height: 24px;
    width: 24px;
}

.nav-search-icon {
    box-sizing: border-box;
    padding-inline-start: var(--ds--button--new-icon-padding-start, 0);
    padding-inline-end: var(--ds--button--new-icon-padding-end, 0);
    line-height: 1;
    flex-shrink: 0;
    display: inline-block;
    color: var(--ds-icon-subtle, #505258);
}

.nav-search-icon-search {
    color: var(--ds-icon-accent-gray, #7D818A);
}

.nav-search-icon-clear {
    vertical-align: bottom;
}

.nav-search-input {
    box-sizing: border-box;
    cursor: inherit;
    padding-inline-end: var(--ds-space-075, 6px);
    padding-inline-start: var(--ds-space-075, 6px);
    padding-block-end: var(--ds-space-050, 4px);
    padding-block-start: var(--ds-space-050, 4px);
    color: inherit;
    outline: currentColor none medium;
    min-width: 0;
    background-color: initial;
    width: 100%;
    border: 0;

    &[data-compact] {
        padding-inline-start: var(--ds-space-075, 6px);
        padding-inline-end: var(--ds-space-075, 6px);
        padding-block-start: var(--ds-space-025, 2px);
        padding-block-end: var(--ds-space-025, 2px);
    }

    &:placeholder-shown {
        text-overflow: ellipsis;
    }
}

.nav-search-info {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 0;
    height: 1px;
    position: absolute;
    white-space: nowrap;
    border: 0;
}

.nav-search-clear-btn {
    background-color: initial;
    border: none;
}

.no-results-info {
    color: var(--ds-text, #292A2E);
}

@media (min-width: 30rem) {
    .nav-search-input {
        font-size: inherit;
        line-height: 20px;

        &[data-compact] {
            padding-inline-start: var(--ds-space-075, 6px);
            padding-inline-end: var(--ds-space-075, 6px);
            padding-block-start: var(--ds-space-050, 4px);
            padding-block-end: var(--ds-space-050, 4px);
        }
    }
}

#view-more-pages {
    display: block;
    margin: 8px 0;

    .view-more-pages-button {
        align-items: baseline;
        border-width: 0;
        border-radius: 3px;
        box-sizing: border-box;
        display: inline-flex;
        font-size: inherit;
        font-style: normal;
        font-family: inherit;
        font-weight: var(--ds-font-weight-medium, 500);
        max-width: 100%;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
        white-space: nowrap;
        cursor: pointer;
        height: 24px;
        line-height: 24px;
        padding: 0;
        vertical-align: middle;
        width: 100%;
        justify-content: center;
        background: var(--ds-background-neutral-subtle, #00000000);
        color: var(--ds-text, #292A2E);

        &:hover span {
            background: var(--ds-background-neutral-hovered, #0B120E24);
        }

        &::after {
            border-radius: inherit;
            inset: var(--ds-space-0, 0px);
            border-style: solid;
            border-width: var(--ds-border-width, 1px);
            pointer-events: none;
            position: absolute;
            content: "";
            border-color: var(--ds-border, #0B120E24);
        }
    }

    .view-more {
        opacity: 1;
        transition: opacity 0.3s;
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.nav-page-list {
    font-weight: 500;
    margin-bottom: 50px;

    &::-webkit-scrollbar {
        background-color: var(--nav-scrollbar-track);
        width: 10px;
        border-radius: 7px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: var(--nav-scrollbar-thumb);
        border-radius: 7px;

        &:hover {
            background-color: var(--nav-scrollbar-thumb-hover);
        }

        &:active {
            background-color: var(--nav-scrollbar-thumb-active);
        }
    }
}

.skeleton-nav {
    height: 100%;
    overflow: hidden;
    background-color: var(--ds-surface, #FAFBFC);
    color: var(--ds-text-subtle, #42526E);
}

.skeleton-bone {
    background-color: #0000001A;
}

.skeleton-space-header {
    display: flex;
    align-items: center;
    padding: 30px 8px 30px 18px;
    width: 214px;
}

.skeleton-space-icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    margin-right: 18px;
    flex-shrink: 0;
}

.skeleton-space-name {
    width: 150px;
    height: 16px;
    border-radius: 4px;
}

.skeleton-items {
    padding: 0 8px 26px 8px;
}

.skeleton-item {
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 10px;
    padding-right: 8px;
}

.skeleton-item-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 16px;
    flex-shrink: 0;
}

.skeleton-item-text {
    width: 120px;
    height: 16px;
    border-radius: 4px;
}

@media screen and (max-width: 500px) {
    .navigation-container {
        display: none;

        &.mobile {
            display: flex;
            width: 100%;
            margin-top: 0;

            .navigation {
                width: 100%;
            }
        }
    }

    .gutter.gutter-horizontal {
        display: none;
    }

    #nav-container .nav-toggle {
        display: none;
    }

    main.main-content-navigable .navigation-container {
        position: initial;
        height: initial;
    }

    .navigation {
        height: initial;
    }
}

.navigation-error-flag {
    position: fixed;
    bottom: 50px;
    left: 70px;
    z-index: 10000;
    display: flex;
    align-items: start;
    width: 400px;
    padding: 16px;
    border-color: var(--ds-text);
    border-radius: 3px;
    background-color: var(--ds-surface-overlay, #fff);
    box-shadow: var(--ds-shadow-overlay, 0 8px 9pt #1e1f2126, 0 0 1px #1e1f214f);
    color: var(--ds-text, #292a2e);
    font-size: 14px;
    font-weight: 400;
    animation: flag-slide-in 0.3s ease-out;

    &.navigation-error-flag-slide-out {
        animation: flag-slide-out 0.3s ease-in forwards;
    }

    .navigation-error-flag-icon {
        flex-shrink: 0;
        margin-right: 12px;
        color: var(--ds-icon-danger, #C9372C);
    }

    .navigation-error-flag-content {
        flex: 1;
        min-width: 0;
        margin-top: 5px;
    }

    .navigation-error-flag-header {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 650;
    }

    .navigation-error-flag-details {
        margin-bottom: 4px;
    }

    .navigation-error-flag-id {
        margin-bottom: 10px;
        font-size: 12px;
    }

    .navigation-error-flag-footer {
        font-size: 12px;

        a {
            color: var(--ds-link, #3572b0);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .navigation-error-flag-close {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: none;
        border-radius: 3px;
        background: none;
        color: var(--ds-text-subtle, #505258);
        cursor: pointer;

        &:hover {
            background-color: var(--ds-background-neutral-subtle-hovered, #0515240f);
        }
    }
}

@keyframes flag-slide-in {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes flag-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.nav-tooltip {
    display: none;
    position: fixed;
    z-index: 10000;
    width: 400px;
    min-height: 50px;
    border-radius: 8px;
    box-shadow: var(--ds-shadow-raised, 0 1px 1px #1e1f2140, 0 0 1px #1e1f214f);
    color: var(--ds-text, #333);
    background-color: var(--ds-surface, #fff);
    border: var(--ds-border-width, 1px) solid var(--ds-border, #0b120e24);
    align-items: flex-start;
    padding: 12px 16px;
    box-sizing: border-box;
    pointer-events: none;
}

.nav-tooltip-icon-wrapper {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
    border: 1px solid var(--ds-border, #0B120E24);
    border-radius: 3px;
    color: var(--ds-text, #333);
}

.nav-tooltip-icon-wrapper svg {
    width: 24px;
    height: 24px;
}

.nav-tooltip-icon-wrapper img {
    width: 16px;
    height: 16px;
}

.nav-tooltip-title {
    font-size: 16px;
    font-weight: 650;
    color: var(--ds-text, #333);
    min-height: 32px;
    display: flex;
    align-items: center;
}