.navigation-wrapper {
    width: $navigation-width;
    margin-left: -$navigation-width;
    transform: translate3d(0, 0, 0);
    transition: margin-left $navigation-toggle-duration ease-in-out;
    will-change: transform;
}

.navigation-wrapper-opened {
    margin-left: 0;
}

.navigation {
    min-width: $navigation-width;
    max-width: $navigation-width;
    overflow: auto overlay;
    background-color: $navigation-background-color;
    user-select: none;

    @include slim-scroll(var(--grey-20), var(--grey-40));

    &::-webkit-scrollbar,
    ::-webkit-scrollbar {
        width: $slim-scroll-bar-width + $navigation-border-for-scroll-bar * 2;
        height: $slim-scroll-bar-width + $navigation-border-for-scroll-bar * 2;
    }

    *,
    *::before,
    *::after {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
    }

    .tooltip {
        &.right {
            .tooltip-arrow {
                border-right-color: var(--deprecated-orange);
            }
        }

        .tooltip-inner {
            background-color: var(--deprecated-orange);
        }
    }

    .navigation-menu {
        position: relative;
        height: 100%;
        padding-top: 0;
        overflow-x: hidden;
        color: var(--navy-blue-80);
        background-color: $navigation-background-color;

        .navigation-menu-sections {
            .navigation-menu-section {
                .navigation-menu-section-link {
                    border-left: $navigation-active-border-width solid transparent;

                    &:hover {
                        background-color: var(--grey-20);
                        opacity: 1;
                    }

                    &.state-active {
                        background-color: var(--grey-20);
                        border-left-color: var(--digital-blue-80);
                        opacity: 1;
                    }
                }

                .navigation-menu-section-header {
                    position: relative;
                    display: flex;
                    align-items: center;
                    height: 55px;
                    color: var(--navy-blue-80);
                    font-weight: var(--main-font-bolder);
                    font-size: $navigation-section-font-size;
                    cursor: pointer;

                    &.no-collapse {
                        cursor: default;
                    }

                    &.no-icon + .navigation-menu-section-items .navigation-menu-section-item-link {
                        padding-left: $navigation-horizontal-space-no-icon;
                    }

                    .navigation-menu-section-header-icon {
                        width: $navigation-section-icon-size;
                        height: $navigation-section-icon-size;
                        margin: 0 $navigation-section-icon-margin-right 0 $navigation-section-icon-margin-left;

                        &.mod-fill {
                            fill: var(--navy-blue-80);
                        }

                        &.mod-stroke {
                            fill: none;
                            stroke: var(--navy-blue-80);
                        }
                    }

                    .navigation-menu-section-header-no-icon {
                        height: $navigation-menu-section-height;
                        padding-left: $sidenavigation-padding-left + $navigation-active-border-width;
                    }
                }

                .navigation-menu-section-items {
                    overflow-x: visible;

                    &:not(.mb0) {
                        margin-bottom: 1em;
                    }

                    .navigation-menu-section-item {
                        font-weight: var(--main-font-regular);
                        border-left: $navigation-active-border-width solid transparent;
                        cursor: pointer;

                        &.disabled {
                            cursor: default;

                            .navigation-menu-section-item-link {
                                color: var(--grey-60);
                            }

                            &:hover {
                                background: none;
                            }
                        }

                        .navigation-menu-section-item-link {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            height: $navigation-menu-section-height;
                            margin-right: $navigation-right-margin;
                            padding-right: 2px;
                            padding-left: $sidenavigation-padding-left;
                            color: var(--navy-blue-80);
                            font-size: $default-font-size;
                            letter-spacing: 0.05em;
                            border: 2px solid transparent; // transparent border needed for outline
                            border-radius: 8px;

                            &:focus-visible {
                                @include focus-border(var(--navy-blue-10), 0, 2px);
                            }

                            &.state-locked {
                                color: $navigation-locked-color;
                            }

                            .navigation-menu-section-item-link-name,
                            .navigation-menu-section-item-link-icon {
                                opacity: 1;
                            }
                        }

                        &.state-locked {
                            .icon-folder-locked {
                                display: inline-block;
                                visibility: visible;
                            }
                        }

                        &.state-closed {
                            .icon-folder-closed {
                                display: inline-block;
                                visibility: visible;
                            }
                        }

                        &.state-opened {
                            .icon-folder-opened {
                                display: inline-block;
                                visibility: visible;
                            }
                        }

                        &.state-active {
                            background-color: var(--grey-20);
                            border-left-color: var(--digital-blue-80);

                            .navigation-menu-section-item-link-name,
                            .navigation-menu-section-item-link-icon {
                                opacity: 1;
                            }
                        }

                        &:hover {
                            background-color: var(--grey-20);

                            .navigation-menu-section-item-link-name,
                            .navigation-menu-section-item-link-icon {
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
    }
}

.navigation-menu-section-item-link-icon,
.navigation-tag {
    float: right;
    margin-left: $default-margin;
}

.navigation-tag {
    display: inline-block;
    padding: $navigation-tag-padding;
    font-size: $navigation-tag-font-size;
    text-transform: none;
    word-break: keep-all;
    border-radius: $border-radius;
}

.collapsible-arrow {
    position: absolute;
    top: 50%;
    right: $navigation-section-arrow-margin;
    display: block;
    font-size: 13px;
    transform: translateY(-50%);
    transform-origin: center center;

    &.open {
        transform: translateY(-50%) rotate(180deg);
    }
}