@use 'sass:math';
@use "../../theme/bootstrap" as *;

$action-menu-breakpoint: md !default;

// menu animation
.show > .dropdown-menu,
.dropdown-menu.sq-show {
	opacity: 1;
	animation-name: dropdownMenuOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.25s;
}

@keyframes dropdownMenuOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/* for submenus in bootstrap 4.x */
.dropdown-submenu {
    position: relative;
    user-select: none;

    &.show > .dropdown-menu {
        display: block;
    }

    /* see button-groups.less - .btn-group.open .dropdown-toggle */
    .btn-group.open & .dropdown-toggle {
        @include box-shadow(none);
    }

    // left means the menu is going to be on the left side of the screen and therefore the submenu should open on the right hand side of its parent
    // right means the menu is going to be on the right side of the screen and therefore the submenu should open on the left hand side of its parent

    @mixin menu-left() {
        top: 0;
        left: 100%;
        transform: translate(0, 0); // in case left overrides right
        margin-top: 0;
        margin-left: 0;
    }

    @mixin caret-left() {
        display: inline-block;
        content: "";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: $caret_width 0 $caret_width $caret_width;
        border-left-color: $dropdown-border-color;
        margin-top: 0.5rem;
	    margin-right: -2 * $caret_width;
    }

    @mixin left() {
        > .dropdown-menu {
            @include menu-left();
        }

        > a:before {
            @include caret-left();
        }

        > a:after {
            content: none;
        }

        &:hover > a:before {
            border-left-color: $dropdown-link-hover-color;
        }
    }

    @mixin menu-right() {
        top: 1rem;
        left: 1rem;
        right: auto;
        transform: translate(-100%, 0);
        margin-top: 0;
        margin-left: 0;
    }

    @mixin caret-right() {
	    display: inline-block;
	    content: "";
	    float: left;
	    width: 0;
	    height: 0;
	    border-color: transparent;
	    border-style: solid;
	    border-width: $caret_width $caret_width $caret_width 0;
	    border-right-color: $dropdown-border-color;
	    margin-top: 0.5rem;
	    margin-right: 2 * $caret_width;
    }

    @mixin right() {
        > .dropdown-menu {
            @include menu-right();
        }

        > a:before {
            @include caret-right();
        }

        > a::after {
            content: none;
        }

        &:hover > a:before {
            border-right-color: $dropdown-link-hover-color;
        }
    }

    .btn-toolbar.ms-auto &, .btn-toolbar.ms-auto ~ .btn-toolbar.ms-auto {
        @include right();
    }

    // first, so later rules win when specicifity the same - we want explicit .dropdown-menu-left to beat .navbar-right
    /* not phone */
    @include media-breakpoint-up($action-menu-breakpoint) {
        .navbar-right & {
            @include right();
        }
    }

    @include left();

    .dropdown-menu-start & {
        @include left();
    }

    &.dropdown-submenu-left {
        @include left();
    }

    .dropdown-menu-end & {
        @include right();
    }

    &.dropdown-submenu-right {
        @include right();
    }

    > .dropdown-menu-focus {
        display: block;
    }
}

.no-overflow {
    overflow: hidden;
}

.no-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    word-wrap: break-word; // Edge doesn't know overflow-wrap
    word-break: break-word; // WebKit needs this
}

.no-text-overflow-nowrap {
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    word-wrap: break-word; // Edge doesn't know overflow-wrap
    word-break: break-word; // WebKit needs this
    white-space: nowrap;
}

.dropdown-menu {
    padding: 0;

    &[role="combobox"]{
        top: 2.9rem;
        overflow: visible;

        .dropdown-item {
            display: flex;
            align-items: baseline;
            gap: .5rem;
        }
    }

    > li:not(.dropdown-divider) {
        border-radius: 0.25rem;
    }

    > li.dropdown-divider {
        margin: 0;
    }

    .dropdown-item {
        margin: .25rem;
        border-radius: 0.25rem;
        width: inherit;
    }
}

/* so dropdown menu item keeps its highlight when showing submenu - see .nav .open > a rule in navs.less */
.dropdown-menu > li.open > a {
    background-color: $dropdown-link-hover-bg;
}

/* scroll menu */
li.sq-scroll-menu-item {
    margin: 0;
}

@function sq-px2rem($size) {
    @return (math.div($size, 16px) * 1rem);
}

@function scroll-menu-max-height($items) {
    @return ($items * ($line-height-base * 1rem + 2 * $dropdown-item-padding-y)) + 2 * $dropdown-padding-y + sq-px2rem($dropdown-border-width);
}

ul.sq-scroll-menu {
    position: relative !important;
    display: inherit !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-height: 20rem;
    margin: 0;
    padding: 0;
    border: none;
    @include box-shadow(none);

    &.dropdown-menu {
        > li {
            border-radius: 0.25rem;
            margin: 0;
        }
    }
}

ul.sq-scrollable-menu {
    max-height: scroll-menu-max-height(10);
    overflow-y: auto;
}

@include media-breakpoint-down($action-menu-breakpoint) {
    .navbar-expand-#{$action-menu-breakpoint} .navbar-collapse.collapse.show ul.sq-scroll-menu {
        max-height: scroll-menu-max-height(5);
    }
}

@include media-breakpoint-up($action-menu-breakpoint) {
    .navbar-right {
        .dropdown-menu {
            right: 0;
            left: auto; // Reset the default from `.dropdown-menu`
        }
    }
}

/* dropdown-menu arrow indicator */
*:not(.dropdown-submenu) > .dropdown-menu::before {
	position: absolute;
	display: inline-block;
	content: "";

	border: 9px solid transparent;
	border-bottom-color: var(--bs-dropdown-border-color, white);
	top: -18px;

	right: auto;
	left: 9px;
}
*:not(.dropdown-submenu) > .dropdown-menu[data-popper-placement^="top"]::before {
	top: unset;
	bottom: -8px;
	border-width: 8px 8px 0;
	border-color: transparent;
	border-style: solid;
	border-top-color: var(--bs-dropdown-border-color, white);
}
*:not(.dropdown-submenu) > .dropdown-menu.dropdown-menu-end::before {
	right: 9px;
	left: auto;
}

*:not(.dropdown-submenu) > .dropdown-menu::after {
	position: absolute;
	display: inline-block;
	content: "";

	border: 8px solid transparent;
	border-bottom-color: var(--bs-dropdown-bg, white);
	top: -16px;

	right: auto;
	left: 10px;

	z-index: 1000;
}
*:not(.dropdown-submenu) > .dropdown-menu[data-popper-placement^="top"]::after {
	top: unset;
	bottom: -7px;
	border-width: 7px 7px 0;
	border-style: solid;
	border-color: transparent;
	border-top-color: var(--bs-dropdown-bg, white);
}
*:not(.dropdown-submenu) > .dropdown-menu.dropdown-menu-end::after {
	right: 10px;
	left: auto;
}