@use "sass:list";
@use "../../../bulma/sass/utilities" as bulma-utilities;
@use "../../../bulma/sass/utilities/derived-variables" as bulma-vars;
@use "../../../bulma/sass/components/navbar" as bulma-navbar;

$sidebar-background: var(--modal-background-background-color) !default;
$sidebar-shadow-color: rgba(var(--scheme-invert-rgb), 0.1) !default;
$sidebar-box-shadow: 5px 0 13px 3px $sidebar-shadow-color !default;
$sidebar-width: 260px !default;
$sidebar-mobile-width: 80px !default;
$sidebar-mobile-breakpoint: bulma-vars.$tablet !default;
$sidebar-colors: bulma-navbar.$navbar-colors !default;

// Map Local variables
$-css-vars-map: (
    "sidebar-background": $sidebar-background,
    "sidebar-shadow-color": $sidebar-shadow-color,
    "sidebar-box-shadow": $sidebar-box-shadow,
    "sidebar-width": $sidebar-width,
    "sidebar-mobile-width": $sidebar-mobile-width,
    "sidebar-mobile-breakpoint": $sidebar-mobile-breakpoint,
);

// Register & Export CSS Variabless
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("b-sidebar", $-css-vars-map);

.b-sidebar {
    .sidebar-content {
        z-index: 39;
        width: var(--sidebar-width);
        background-color: var(--background);
        box-shadow: var(--sidebar-box-shadow);

        @each $name, $pair in $sidebar-colors {
            $color: list.nth($pair, 1);
            &.is-#{$name} {
                background-color: var(--#{$name});
            }
        }

        &.is-fixed {
            position: fixed;
            top: 0;
            left: 0;

            &.is-right {
                right: 0;
                left: auto;
            }
        }

        &.is-absolute {
            position: absolute;
            top: 0;
            left: 0;

            &.is-right {
                right: 0;
                left: auto;
            }
        }

        &.is-mini {
            width: var(--sidebar-mobile-width);

            &.is-mini-expand:hover:not(.is-mini-delayed) {
                transition: width calc(var(--speed) * 2) var(--easing);

                &:not(.is-fullwidth) {
                    width: var(--sidebar-width);

                    &.is-mini-expand-fixed {
                        position: fixed;
                    }
                }
            }
        }

        &.is-static {
            position: static;
        }

        &.is-absolute, &.is-static {
            transition: width calc(var(--speed) * 2) var(--easing);
        }

        &.is-fullwidth {
            width: 100%;
            max-width: 100%;
        }

        &.is-fullheight {
            display: flex;
            flex-direction: column;
            align-content: stretch;
            height: 100%;
            max-height: 100%;
            overflow: hidden;
            overflow-y: auto;
        }

        @include bulma-utilities.until($sidebar-mobile-breakpoint) {
            &.is-mini-mobile {
                width: var(--sidebar-mobile-width);

                &.is-mini-expand:hover {
                    &:not(.is-fullwidth-mobile) {
                        width: var(--sidebar-width);

                        &.is-mini-expand-fixed {
                            position: fixed;
                        }
                    }
                }
            }

            &.is-hidden-mobile {
                width: 0;
                height: 0;
                overflow: hidden;
            }

            &.is-fullwidth-mobile {
                width: 100%;
                max-width: 100%;
            }
        }
    }

    .sidebar-background {
        @extend %overlay;

        position: fixed;
        z-index: 38;
        background: var(--sidebar-background);
    }
}