@use "bulma/sass/utilities/extends" as extends;
@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/derived-variables.scss" as dv;
@use "bulma/sass/utilities/mixins" as mixins;
@use "bulma/sass/components/dropdown" as dropdown;

$dropdown-mobile-breakpoint: calc(iv.$desktop - 1px) !default;
$dropdown-background-color: rgba(dv.$scheme-invert, 0.86) !default;
$dropdown-disabled-opacity: 0.5 !default;

.#{iv.$class-prefix}dropdown {
    @include cv.register-vars(
    (
        "dropdown-background-color": #{$dropdown-background-color},
        "dropdown-disabled-opacity": #{$dropdown-disabled-opacity}
    )
);
}

.#{iv.$class-prefix}dropdown {
    & + .dropdown {
        margin-left: 0.5em;
    }
    .background {
        @extend %overlay;
        position: fixed;
        background-color: #{cv.getVar('dropdown-background-color')};
        z-index: 10;
        cursor: pointer;
        @media screen and (min-width: $dropdown-mobile-breakpoint) {
            display: none;
        }
    }
    &.dropdown-menu-animation {
        .dropdown-menu {
            display: block;
            transition-property: opacity, visibility, transform;
        }
    }
    .dropdown-menu {
        .dropdown-item {
            &.is-disabled {
                cursor: not-allowed;
                &:hover {
                    background: inherit;
                    color: inherit;
                }
            }
            &.is-paddingless {
                padding: 0;
            }
        }
        .has-link a {
            @extend .dropdown-item;
            padding-right: 3rem;
            white-space: nowrap;
        }
    }
    &.is-hoverable:not(.is-active) {
        .dropdown-menu {
            display: none;
        }
    }
    &.is-hoverable:not(.is-touch-enabled) {
        &:hover {
            .dropdown-menu {
                display: inherit;
            }
        }
    }
    &.is-expanded {
        width: 100%;
        .dropdown-trigger {
            width: 100%;
            input {
                cursor: pointer;
            }
        }
        .dropdown-menu {
            width: 100%;
        }
        &.is-mobile-modal {
            .dropdown-menu {
                max-width: 100%;
            }
        }
    }
    &:not(.is-disabled) {
        .dropdown-menu {
            .dropdown-item {
                &.is-disabled {
                    opacity: cv.getVar('dropdown-disabled-opacity');
                }
            }
        }
    }
    .navbar-item {
        height: 100%;
    }
    &.is-disabled {
        opacity: cv.getVar('dropdown-disabled-opacity');
        cursor: not-allowed;
        .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 {
            top: auto;
            bottom: 100%;
            right: 0;
            left: auto;
        }
    }
    &.is-bottom-left {
        .dropdown-menu {
            right: 0;
            left: auto;
        }
    }
    @media screen and (max-width: $dropdown-mobile-breakpoint) {
        /* prevents modal on hover unless it is on touch devices */
        &.is-mobile-modal:not(.is-hoverable),
        &.is-mobile-modal.is-touch-enabled {
            > .dropdown-menu {
                position: fixed !important;
                width: calc(100vw - 40px);
                max-width: 460px;
                max-height: calc(100vh - 120px);
                top: 25% !important;
                left: 50% !important;
                bottom: auto !important;
                right: auto !important;
                transform: translate3d(-50%, -25%, 0);
                white-space: normal;
                overflow-y: auto;
                z-index: 50 !important;
                > .dropdown-content {
                    > .dropdown-item, > .has-link a {
                        padding: 1rem 1.5rem;
                    }
                }
            }
        }
    }
}

html.is-clipped-touch {
    @include mixins.touch {
        overflow: hidden !important;
    }
}