/* custom variables*/
$sidebar-spacer-x: 20px;
$sidebar-spacer-y: $spacer;
$font-size-xs: ($font-size-base * 0.8461538461538461);
$font-weight-semibold: 500;
$default-text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);

:root {
    --sidebar-width: 240px;
}

#sidebar-main {
    position: fixed;
    height: 100%;
    top: 0;
    width: var(--sidebar-width);
    margin-left: calc(var(--sidebar-width) * -1);
    padding-top: 0;
    padding-bottom: 0;
    z-index: 2;
    transition: margin-left 0.15s ease-in-out;
}

.sidebar-backdrop.fade {
    opacity: 0;
    &.show {
        opacity: var(--bs-backdrop-opacity);
    }
}
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}

#content-wrapper {
    width: 100%;
}

.sidebar-open {
    #sidebar-main {
        margin-left: 0;
    }
}

@include media-breakpoint-up(md) {
    .sidebar-backdrop {
        display: none;
    }
    #sidebar-main {
        position: sticky !important;
        height: 100vh !important;
        margin-left: 0;
    }

    .sidebar-collapsed {
        #sidebar-main {
            margin-left: calc(var(--sidebar-width) * -1);
        }
        #content-wrapper {
            width: 100%;
        }
    }

    #content-wrapper {
        width: calc(100% - var(--sidebar-width));
        transition: width 0.15s ease-in-out;
    }
}

.sidebar {
    vertical-align: top;
    border-radius: 0;
    h4,
    h5,
    h6,
    small,
    .category-title span,
    .sidebar-user span {
        display: block;
    }

    .sidebar-category {
        width: 100%;
    }

    .sidebar-toggler {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .category-title {
        position: relative;
        margin: 0;
        display: block;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        > a {
            display: block;
            text-decoration: none;
            padding: 12px 20px;
            font-weight: $font-weight-semibold;
            font-size: $font-size-xs;
            text-transform: uppercase;
        }
    }

    .category-content {
        position: relative;

        .navbar-nav {
            position: relative;
            margin: 0;
            padding: $sidebar-spacer-y 0;

            li {
                position: relative;
                list-style: none;

                span.nav-text {
                    display: inline-block;
                }

                > a {
                    font-size: $font-size-base;
                    padding: $sidebar-spacer-y $sidebar-spacer-x;
                    transition: background 0.15s linear, color 0.15s linear;

                    > [class*="svg-inline"] {
                        float: left;
                        top: 0;
                        margin-top: 2px;
                        margin-right: 15px;
                        transition: opacity 0.2s ease-in-out;
                    }
                }

                ul {
                    padding: 0;

                    > li a {
                        padding-left: $spacer * 2.75;
                    }
                }
            }

            > li > a {
                font-weight: $font-weight-semibold;
            }
        }
    }

    @each $dark-color-name in $theme-dark-colors {
        $dark-color: map-get($theme-colors, #{$dark-color-name});
        &.bg-#{$dark-color-name} {
            .sidebar-toggler {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{lighten($dark-color, 95)}'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
            }
            .sidebar-category.active {
                .category-title {
                    background-color: lighten($dark-color, 3);
                    > a {
                        color: lighten($dark-color, 90);
                    }
                }
            }
            .category-title {
                border-bottom-color: lighten($dark-color, 8);
                > a {
                    color: lighten($dark-color, 45);
                }
            }

            .category-content {
                color: lighten($dark-color, 45);
                .navbar-nav li a {
                    color: lighten($dark-color, 45);
                    &.active,
                    &[aria-expanded="true"],
                    &:hover,
                    &:focus {
                        color: $white;
                        background-color: lighten($dark-color, 12);
                    }
                }
                &.collapsing,
                &.show {
                    .navbar-nav {
                        border-bottom: 1px solid lighten($dark-color, 8);
                    }
                }
            }
        }
    }

    @if variable-exists(theme-light-colors) {
        @each $light-color-name in $theme-light-colors {
            $light-color: map-get($theme-colors, #{$light-color-name});
            &.bg-#{$light-color-name} {
                .sidebar-toggler {
                    .sidebar-toggler {
                        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{darken($light-color, 95)}'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
                    }
                }
                .sidebar-category.active {
                    .category-title {
                        background-color: darken($light-color, 4);
                        > a {
                            color: darken($light-color, 90);
                        }
                    }
                }
                .category-title {
                    border-bottom-color: darken($light-color, 8);
                    > a {
                        color: darken($light-color, 60);
                    }
                }

                .category-content {
                    color: darken($light-color, 60);
                    .navbar-nav li a {
                        color: darken($light-color, 60);
                        &.active,
                        &[aria-expanded="true"],
                        &:hover,
                        &:focus {
                            color: darken($light-color, 90);
                            background-color: darken($light-color, 8);
                        }
                    }
                    &.collapsing,
                    &.show {
                        .navbar-nav {
                            border-bottom: 1px solid darken($light-color, 8);
                        }
                    }
                }
            }
        }
    }
}
