.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: 14px;
                    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: var(--oc-toolbar-hover-bg);
                    }
                }

                &.separator {
                    border-top: var(--oc-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-left-radius: 0;
                        border-top-right-radius: 0;
                    }
                }

                &:last-child {
                    > a, > button {
                        border-bottom-left-radius: 0;
                        border-bottom-right-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: calc(var(--oc-zindex-dropdown) - 1);
    user-select: none;
}

@media (max-width: 414px) {
    .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: 0 0 10px rgba(0, 0, 0, 0.1);

                > li {
                    &.submenu-header {
                        display: block;
                        border-bottom: var(--oc-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;
                            font-size: 0;
                            color: transparent;

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

                        button.close-link {
                            float: right;
                            width: 30px;
                            margin-right: 10px;
                            padding: 0;
                            font-size: 0;
                            color: transparent;

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

                    > a, > button {
                        font-size: 16px;
                        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-left-radius: 8px;
                            border-top-right-radius: 8px;
                        }
                    }

                    &.submenu-header + li.first {
                        > a, > button {
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                        }
                    }

                    &:last-child {
                        > a, > button {
                            border-bottom-left-radius: 8px;
                            border-bottom-right-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 {
        transform: translate(0, 100%);
    }
}