%menu {
    background-color: bg_color(2);
    border-radius: rem(6px);
    color: $fg-color;

    arrow {
        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
        min-height: 16px;
        min-width: 16px;

        &:dir(rtl) {
            -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
        }

        &.top {
            border-bottom: 1px solid #{"@menu_separator"};
            margin-top: -6px;
            -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
        }

        &.bottom {
            border-top: 1px solid #{"@menu_separator"};
            margin-bottom: -18px;
            margin-top: 16px;
            -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
        }

        &.left {
            -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
        }

        &:disabled {
            color: $insensitive-fg-color;
        }
    }
}

%menuitem {
    // Make sure we don't inherit changes from parent widgets
    color: $fg-color;
    font-weight: initial;
    letter-spacing: initial;
    min-width: rem(150px);
    padding: rem(6px) rem(12px);

    &:disabled {
        color: $insensitive-fg-color;

        .keycap {
            opacity: 0.7;
        }
    }

    &:hover {
        box-shadow: none;
        background-color: rgba($fg_color, 0.15);
    }

    &.destructive-action {
        color: $error-color;

        &:hover {
            background-color: rgba($error-color, 0.2);
        }
    }

    .keycap {
        background: rgba(black, 0.08);
        border: none;
        // Intentionally not in ems since it's used as a stroke
        box-shadow: 0 1px 0 0 rgba(black, 0.15);
        color: #{'alpha(@fg_color, 0.78)'};
        margin: 0 0 1px;
        // We trim off 1px on the bottom to account for box-shadow
        padding: rem(3px) rem(6px) calc(#{rem(3px)} - 1px);
    }

    check,
    radio {
        &.left {
            margin-right: rem(6px);
        }

        &.right {
            margin-left: rem(6px);
        }
    }

    switch slider {
        min-height: rem(20px);
        min-width: rem(20px);
    }
}

menu,
window.menu,
window.popup {
    @extend %menu;
    box-shadow: outset-highlight();
    padding: rem(6px) 0;

    &.context-menu {
        // This stops monospace fonts from propogating for example
        font: initial;
    }

    decoration {
        border-radius: rem(6px);
        box-shadow:
            0 0 0 1px $toplevel-border-color,
            shadow(2);
    }

    window.popup decoration {
        box-shadow:
            0 0 0 1px $toplevel-border-color,
            shadow(3);
    }

    menuitem,
    .menuitem {
        @extend %menuitem;

        &:dir(ltr) {
            image:first-child {
                // Off-by-one for some reason. Maybe optical illusion?
                margin-left: rem(-23px);
                padding-left: 0;
                padding-right: rem(5px);
            }

            > check,
            > radio {
                margin-right: rem(6px);
                margin-left: rem(-6px);
            }
        }

        &:dir(rtl) {
            image:first-child {
                // Off-by-one for some reason. Maybe optical illusion?
                margin-right: rem(-23px);
                padding-left: rem(5px);
                padding-right: 0;
            }

            > check,
            > radio {
                margin-left: rem(6px);
                margin-right: rem(-6px);
            }
        }
    }

    separator {
        border-top: 1px solid #{'@menu_separator'};
        border-bottom: 1px solid #{'@menu_separator_shadow'};
        margin: rem(3px) 0;
    }
}
