@import "../../../../assets/less/core/boot.less";

.dropdown-menu.backend-dropdownmenu {
    display: block;
    top: auto;
    left: auto;

    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;

    .dropdown-container {
        > ul {
            overflow: visible; // Visible is required for submenus
            line-height: 34px;
            padding: 4px 0;

            &:before, &:after {
                display: none;
            }

            > li {
                &.submenu-header {
                    display: none;
                }

                > a, > button {
                    display: block;
                    position: relative;
                    font-size: @font-size-base;
                    padding: 0 10px;
                    width: 100%;
                    text-align: left;
                    -webkit-appearance: none;
                    border: none;
                    background: transparent;
                    outline: none;

                    i {
                        display: inline-block;
                        font-size: 16px;
                        position: absolute;
                        left: 10px;
                        top: 8px;

                        &.submenu-indicator {
                            left: auto;
                            right: 15px;
                            top: 13px;

                            &:before {
                                display: block;
                                width: 5px;
                                height: 9px;
                                background-position: -283px -22px;
                            }
                        }
                    }

                    &.has-submenu:not([disabled]) {
                        &:hover, &:active, &:focus:active {
                            i.submenu-indicator:before {
                                background-position: -293px -22px;
                            }
                        }
                    }

                    &[disabled] {
                        > i, span {
                            opacity: 0.5;
                        }
                    }

                    &:focus {
                        background-color: @toolbar-focus-bg;
                    }
                }

                &.separator {
                    border-top: @popup-border;
                }

                a[aria-checked=true][role="menuitemradio"],
                button[aria-checked=true][role="menuitemradio"] {
                    i {
                        width: 6px;
                        height: 6px;
                        left: 14px;
                        top: 13px;

                        &:before {
                            display: block;
                            width: 6px;
                            height: 6px;
                            background-position: -285px 0;
                        }
                    }

                    &:not([disabled]) {
                        &:hover, &:active, &:focus:active {
                            i:before {
                                background-position: -293px 0;
                            }
                        }
                    }
                }

                button[aria-checked=true][role="menuitemcheckbox"] {
                    i {
                        width: 9px;
                        height: 9px;
                        left: 13px;
                        top: 13px;

                        &:before {
                            display: block;
                            width: 9px;
                            height: 9px;
                            background-position: -281px -10px;
                        }
                    }

                    &:not([disabled]) {
                        &:hover, &:active, &:focus:active {
                            i:before {
                                background-position: -290px -10px;
                            }
                        }
                    }
                }

                &.first {
                    > a, > button {
                        .border-top-radius(0);
                    }
                }

                &:last-child {
                    > a, > button {
                        .border-bottom-radius(0);
                    }
                }
            }

            &.has-icons {
                > li {
                    > a, > button {
                        padding-left: 35px;
                    }
                }
            }

            &.has-submenus {
                > li {
                    > a, > button {
                        padding-right: 35px;
                    }
                }
            }
        }
    }
}

.backend-dropdownmenu-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.001);
    z-index: @zindex-dropdown - 1;
    user-select: none;
}

@media (max-width: @mobile-breakpoint-max) {
    .user-touch {
        .backend-dropdownmenu-overlay {
            background: rgba(0, 0, 0, 0.3);
        }

        .dropdown-menu.backend-dropdownmenu {
            .dropdown-container {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 15px;

                > ul {
                    position: static;
                    border: none;
                    padding: 0;
                    margin: 0;
                    border-radius: 8px;
                    box-shadow: @mobile-dropdown-shadow;

                    > li {
                        &.submenu-header {
                            display: block;
                            border-bottom: @popup-border;

                            button.go-back-link,
                            button.close-link {
                                position: relative;
                                height: 30px;
                                margin: 15px 0;
                                box-sizing: content-box;

                                &:hover, &:active, &:focus:active {
                                    background-color: transparent!important;
                                }

                                &:before {
                                    display: block;
                                    position: absolute;
                                }
                            }

                            button.go-back-link {
                                float: left;
                                width: 30px;
                                .backend-hide-text();

                                &:before {
                                    background-position: -52px -18px;
                                    width: 24px;
                                    height: 11px;
                                    top: 9px;
                                }
                            }

                            button.close-link {
                                float: right;
                                width: 30px;
                                margin-right: 10px;
                                padding: 0;
                                .backend-hide-text();

                                &:before {
                                    background-position: -80px -18px;
                                    width: 11px;
                                    height: 11px;
                                    top: 9px;
                                    left: 10px;
                                }
                            }
                        }

                        > a, > button {
                            font-size: @font-size-base + 2;
                            line-height: 50px;

                            i {
                                top: 17px;

                                &.submenu-indicator {
                                    top: 20px;
                                }
                            }

                            &[aria-checked=true] {
                                &[role="menuitemradio"],
                                &[role="menuitemcheckbox"] {
                                    i {
                                        top: 22px;
                                    }
                                }
                            }
                        }

                        &.first {
                            > a, > button {
                                .border-top-radius(8px);
                            }
                        }

                        &.submenu-header + li.first {
                            > a, > button {
                                .border-top-radius(0);
                            }
                        }

                        &:last-child {
                            > a, > button {
                                .border-bottom-radius(8px);
                            }
                        }
                    }

                    &.submenu-visible {
                        > li:not(.submenu-expanded) {
                            display: none;
                        }
                    }
                }
            }
        }

        .backend-dropdown-overlay-touch-screen-enter-active,
        .backend-dropdown-overlay-touch-screen-leave-active {
            transition: opacity .2s;
        }

        .backend-dropdown-overlay-touch-screen-enter,
        .backend-dropdown-overlay-touch-screen-leave-to {
            opacity: 0;
        }

        .backend-dropdown-menu-touch-screen-enter-active,
        .backend-dropdown-menu-touch-screen-leave-active {
            .transition-transform(~"0.2s ease-out");
        }

        .backend-dropdown-menu-touch-screen-enter,
        .backend-dropdown-menu-touch-screen-leave-to {
            .translate(0, 100%);
        }
    }
}