@use "../../../bulma/sass/utilities" as bulma-utilities;
@use "../../../bulma/sass/utilities/derived-variables" as bulma-vars;

$dropdown-mobile-breakpoint: bulma-vars.$desktop - 1px !default;
$dropdown-background-color: rgba(var(--scheme-invert-rgb), 0.86) !default;
$dropdown-disabled-opacity: 0.5 !default;

// Map Local variables
$-css-vars-map: (
    "dropdown-background-color": $dropdown-background-color,
    "dropdown-disabled-opacity": $dropdown-disabled-opacity,
);

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

.dropdown {
    & + .dropdown {
        margin-left: 0.5em;
    }

    .background {
        @extend %overlay;

        position: fixed;
        z-index: 40;
        cursor: pointer;
        background-color: var(--dropdown-background-color);

        @include bulma-utilities.from($dropdown-mobile-breakpoint) {
            display: none;
        }
    }

    &.dropdown-menu-animation {
        .dropdown-menu {
            display: block;
        }
    }

    .dropdown-menu {
        .dropdown-item {
            &.is-disabled {
                cursor: not-allowed;

                &:hover {
                    color: inherit;
                    background: inherit;
                }
            }
        }

        .has-link a {
            @extend .dropdown-item;

            padding-right: 3rem;
            white-space: nowrap;
        }
    }

    &.is-hoverable:not(.is-active) {
        .dropdown-menu {
            display: none;
        }
    }

    &.is-hoverable {
        &:hover {
            .dropdown-menu {
                display: inherit;
            }
        }
    }

    &.is-expanded {
        width: 100%;

        .dropdown-trigger {
            width: 100%;
        }

        .dropdown-menu {
            width: 100%;
        }

        &.is-mobile-modal {
            .dropdown-menu {
                max-width: 100%;
            }
        }
    }

    &:not(.is-disabled) {
        .dropdown-menu {
            .dropdown-item {
                &.is-disabled {
                    opacity: var(--dropdown-disabled-opacity);
                }
            }
        }
    }

    .navbar-item {
        height: 100%;
    }

    &.is-disabled {
        cursor: not-allowed;
        opacity: var(--dropdown-disabled-opacity);

        .dropdown-trigger {
            pointer-events: none;
        }
    }

    &.is-inline {
        .dropdown-menu {
            position: static;
            display: inline-block;
            padding: 0;
        }
    }

    &.is-top-right {
        .dropdown-menu {
            top: auto;
            bottom: 100%;
        }
    }

    &.is-top-left {
        .dropdown-menu {
            inset: auto 0 100% auto;
        }
    }

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

    @include bulma-utilities.until($dropdown-mobile-breakpoint) {
        &.is-mobile-modal {
            > .dropdown-menu {
                position: fixed !important;
                inset: 25% auto auto 50% !important;
                z-index: 50 !important;
                width: calc(100vw - 40px);
                max-width: 460px;
                max-height: calc(100vh - 120px);
                overflow-y: auto;
                white-space: normal;
                transform: translate3d(-50%, -25%, 0);

                > .dropdown-content {
                    > .dropdown-item, > .has-link a {
                        padding: 1rem 1.5rem;
                    }
                }
            }
        }
    }
}