.op3-element[data-op3-element-type^="megamenuitem"] {
    pointer-events: all;

    .op3-element-megamenuitem__container {
        position: relative;
        display: flex;
        padding: 1em;
        align-items: center;
        justify-content: center;
        gap: 1em;
        line-height: 1;
        color: inherit;
        text-decoration: none;
        overflow: visible;
        transition: inherit;
    }

    .op3-element-megamenuitem__icon,
    .op3-element-megamenuitem__alticon,
    .op3-element-megamenuitem__dropdownicon,
    .op3-element-megamenuitem__contenteditable {
        position: relative;
        display: block;
        transition: inherit;
    }

    .op3-element-megamenuitem__icon,
    .op3-element-megamenuitem__alticon,
    .op3-element-megamenuitem__dropdownicon {
        user-select: none;
    }

    .op3-element-megamenuitem__icon-wrapper {
        display: grid;
        transition: inherit;
        order: 2;

        > * {
            grid-area: 1 / 1 / 1 / 1;
        }
    }

    .op3-element-megamenuitem__icon {
        opacity: 1;
    }
    .op3-element-megamenuitem__container:has( + :where(.op3-element-megamenuitem__children) > :where(.jquery-megamenu__dropdown--active)) .op3-element-megamenuitem__icon {
        opacity: 0;
    }

    .op3-element-megamenuitem__alticon {
        opacity: 0;
    }
    .op3-element-megamenuitem__container:has( + :where(.op3-element-megamenuitem__children) > :where(.jquery-megamenu__dropdown--active)) .op3-element-megamenuitem__alticon {
        opacity: 1;
    }

    .op3-element-megamenuitem__contenteditable {
        order: 4;
    }

    .op3-element-megamenuitem__dropdownicon {
        display: none;
        order: 6;
    }

    .jquery-megamenu__link:has( + .op3-element-megamenuitem__children > .jquery-megamenu__dropdown--active) .op3-element-megamenuitem__dropdownicon {
        transform: scaleY(-1);
    }

    // Hover background is usually defined by hovering container element, this
    // element is a bit different (we want hover over children change the
    // background).
    &:hover > .op3-element-megamenuitem__container > .op3-element-megamenuitem__canvas > .op3-element-megamenuitem__background::after {
        opacity: 1;
    }
}