.link-active {
    .nav-icon {
        color: var(--bs-link-color);
    }

    @extend .gradient-text;
    @extend .fw-medium;
}

.rotate-90 {
    transform: rotate(90deg);
}

.app-sidebar {
    @extend .position-fixed;
    @extend .top-0;
    @extend .bottom-0;
    @extend .start-0;
    width: var(--bs-app-sidebar-width);
    height: 100vh;
    @extend .overflow-hidden;
    @extend .p-3;
    transition: $transition-base;
    z-index: 20;

    .app-sidebar-container {
        @extend .h-100;
        background-color: var(--bs-app-sidebar-bg);
        backdrop-filter: blur($spacer);
        @extend .rounded;
        @extend .border;
        @extend .border-secondary-subtle;
        @extend .d-flex;
        @extend .flex-column;

        .app-sidebar-header {
            @extend .position-relative;
            height: calc(#{$header-height} - 18px);
            @extend .d-flex;
            @extend .align-items-center;
            @extend .p-3;

            .app-brand-wrapper {
                @extend .mb-0;
                @extend .fw-bold;
                @extend .d-flex;
                @extend .align-items-center;
                @extend .gap-2;
                @extend .text-white;

                .app-brand {
                    @extend .position-relative;

                    &::before {
                        @extend .position-absolute;
                        content: "";
                        top: -2px;
                        left: -2px;
                        width: 54px;
                        height: 54px;
                        @extend .rounded-circle;
                        @extend .bg-white;
                        z-index: -1;
                    }

                    img {
                        @extend .object-fit-contain;
                        width: 50px;
                        height: 50px;
                    }
                }
            }

            .btn-toggle {
                @extend .position-absolute;
                @extend .top-50;
                @extend .start-100;
                @extend .translate-middle;
                width: 25px;
                height: 25px;
                background-color: var(--bs-primary);
                @extend .rounded-circle;
                @extend .flex-center;
                cursor: pointer;
            }
        }

        .app-sidebar-body {
            @extend .p-3;
            @extend .flex-fill;
            overflow-y: auto;
            overflow-x: hidden;

            .nav {
                .nav-heading {
                    &:not(:nth-child(1)) {
                        @extend .mt-4;
                    }

                    @extend .mb-1;
                    font-size: $spacer * 0.75;
                    color: $gray-400;
                }

                .nav-item {
                    padding: .15rem 0;

                    .nav-link {
                        color: $gray-500;
                        @extend .w-100;
                        @extend .d-flex;
                        @extend .align-items-center;
                        @extend .gap-2;
                        @extend .px-0;

                        &.active {
                            @extend .link-active;
                        }

                        &:hover {
                            @extend .link-active;
                        }

                        .nav-title {
                            @extend .flex-fill;
                            @extend .text-start;
                        }

                        .nav-arrow {
                            color: var(--bs-gray-500);
                            width: $spacer;
                            height: $spacer;
                        }

                        .nav-icon-children {
                            color: var(--bs-gray-500);
                            @extend .me-0;
                        }
                    }
                }

                .nav-children {
                    margin-left: $spacer * 0.5;

                    .nav-item {
                        @extend .p-0;

                        .nav-link {
                            font-size: $font-size-sm;
                            @extend .mb-0;
                            transition: $transition-base;

                            .nav-title {
                                transition: $transition-base;
                            }

                            &:hover {
                                .nav-title {
                                    @extend .link-active;
                                }
                            }
                        }
                    }

                    &.nav-nested-small {
                        margin-left: $spacer * 1.3;
                        font-size: $font-size-sm;
                    }
                }
            }
        }
    }

    &.sidebar-overlay-open {
        width: $sidebar-width;
        min-width: $sidebar-width;
    }
}

.app-sidebar-overlay {
    @extend .position-fixed;
    inset: 0;
    z-index: 19;
    background-color: rgba($black, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: opacity 0.25s ease-in-out, backdrop-filter 0.25s ease-in-out, -webkit-backdrop-filter 0.25s ease-in-out;
    @extend .d-block;

    @include media-breakpoint-down(lg) {
        display: none;
    }

    /* Fallback for browsers that don't support backdrop-filter */
    @supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
        background-color: rgba($black, 0.6);
    }
}

[data-bs-theme="dark"] {
    .app-sidebar {
        .app-sidebar-container {
            background-color: $black;

            .app-sidebar-body {
                .nav-heading {
                    color: $gray-600;
                }

                .nav-link {
                    color: $gray-600;
                }
            }
        }
    }
}

[data-sidebar-size="sm"] {
    .app-sidebar:not(.sidebar-overlay-open) {
        .app-sidebar-header {
            @extend .justify-content-center;

            .app-brand-wrapper {
                .app-title {
                    @extend .d-none;
                }
            }
        }

        .app-sidebar-body {
            .nav {
                .nav-heading {
                    @extend .text-center;

                    .nav-heading-title {
                        @extend .d-none;
                    }

                    &::after {
                        font-family: 'bootstrap-icons';
                        content: "\F5D4";
                        @extend .text-center;
                    }
                }

                .nav-link {
                    @extend .justify-content-center;
                    @extend .text-center;

                    .nav-icon {
                        @extend .mx-0;
                    }

                    .nav-title,
                    .nav-arrow {
                        @extend .d-none;
                    }
                }
            }
        }
    }
}

[data-mobile-view="true"] {
    .app-header {
        left: 0;
    }

    .app-sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s;

        &.sidebar-mobile-open {
            transform: translateX(0);
        }
    }

    .app-content {
        padding-left: 0;
    }
}