@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/mixins" as mixins;
@use "bulma/sass/components/navbar" as navbar;
@use "bulma/sass/components/modal" as modal;

$sidebar-overlay-background: modal.$modal-background-background-color !default;
$sidebar-box-shadow: 5px 0 13px 3px cv.getVar('background') !default;
$sidebar-width: 260px !default;
$sidebar-mobile-width: 80px !default;
$sidebar-mobile-breakpoint: iv.$tablet !default;
$sidebar-colors: navbar.$navbar-colors !default;
$sidebar-close-button-background: rgba(10,10,10,.3) !default;
$sidebar-close-button-dark-background: rgba(10,10,10,.86) !default;

.#{iv.$class-prefix}b-sidebar {
    @include cv.register-vars((
        "sidebar-overlay-background": #{$sidebar-overlay-background},
        "sidebar-box-shadow": #{$sidebar-box-shadow},
        "sidebar-width": #{$sidebar-width},
        "sidebar-mobile-width": #{$sidebar-mobile-width},
        "sidebar-mobile-breakpoint": #{$sidebar-mobile-breakpoint},
        "sidebar-close-button-background": #{$sidebar-close-button-background},
        "sidebar-close-button-dark-background": #{$sidebar-close-button-dark-background}
    ));

}

.#{iv.$class-prefix}b-sidebar {
    .sidebar-content {
        box-shadow: cv.getVar("sidebar-box-shadow");
        width: cv.getVar("sidebar-width");
        z-index: 39;
        &.is-fixed {
            position: fixed;
            left: 0;
            top: 0;
            &.is-right {
                left: auto;
                right: 0;
            }
        }
        &.is-absolute {
            position: absolute;
            left: 0;
            top: 0;
            &.is-right {
                left: auto;
                right: 0;
            }
        }
        &.is-mini {
            width: cv.getVar("sidebar-mobile-width");
            &.is-mini-expand:hover:not(.is-mini-delayed) {
                transition: width cv.getVar("speed-slow") cv.getVar("easing");
                &:not(.is-fullwidth) {
                    width: cv.getVar("sidebar-width");
                    &.is-mini-expand-fixed {
                        position: fixed;
                    }
                }
            }
        }
        &.is-static {
            position: static;
        }
        &.is-absolute, &.is-static {
            transition: width cv.getVar("speed-slow") cv.getVar("easing");
        }
        &.is-fullwidth {
            width: 100%;
            max-width: 100%;
        }
        &.is-fullheight {
            height: 100%;
            max-height: 100%;
            overflow: hidden;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            align-content: stretch;
        }
        @media screen and (max-width: calc(cv.getVar("sidebar-mobile-breakpoint") - 1px)) {
            &.is-mini-mobile {
                width: cv.getVar("sidebar-mobile-width");
                &.is-mini-expand:hover {
                    &:not(.is-fullwidth-mobile) {
                        width: cv.getVar("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-close {
            background: cv.getVar("sidebar-close-button-background");

            &:hover {
                background: cv.getVar("sidebar-close-button-dark-background");
            }
        }
    }
    .sidebar-background {
        @extend %overlay;
        background: cv.getVar("sidebar-overlay-background");
        position: fixed;
        z-index: 38;
    }
}