%menuitem {
    // Make sure we don't inherit changes from parent widgets
    background: transparent;
    border: none;
    border-radius: 0;
    border-spacing: rem(6px);
    box-shadow: none;
    color: $fg-color;
    font: initial;
    letter-spacing: initial;
    min-width: rem(150px);
    outline-style: none;
    padding: rem(6px) rem(12px);

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

        accelerator,
        .keycap {
            opacity: 0.7;
        }
    }

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

    &.destructive-action {
        color: $error-color;
        text-shadow: none;

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

    accelerator,
    .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 {
        margin: 0;
    }

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

popover.background {
    background: transparent;
    // This stops monospace fonts from propogating for example
    font: initial;

    > arrow,
    > contents {
        background-clip: padding-box;
        background-color: bg_color(2);
        border: 1px solid $toplevel-border-color;
        box-shadow:
            outset-highlight(),
            shadow(2);
        color: $fg-color;
    }

    > contents {
        border-radius: rem(6px);

        header,
        label.h4 {
            margin: 0 rem(12px);
        }

        separator {
            &.horizontal {
                border-top: 1px solid #{'@menu_separator'};
                border-bottom: 1px solid #{'@menu_separator_shadow'};
                margin-bottom: -1px;
            }

            &.vertical {
                border-left: 1px solid #{'@menu_separator'};
                border-right: 1px solid #{'@menu_separator_shadow'};
                margin-right: -1px;
            }
        }

        undershoot {
            &.top {
                background:
                    linear-gradient(
                        bg_color(2) 0%,
                        rgba(bg_color(2), 0) 50%
                    );
            }

            &.bottom {
                background:
                    linear-gradient(
                        rgba(bg_color(2), 0) 50%,
                        bg_color(2) 100%
                    );
            }
        }

        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;
            }
        }
    }

    &.entry-completion > contents treeview {
        margin: rem(6px) 0;

        &.view.cell {
            padding: rem(6px) rem(12px);
        }
    }

    &.menu > contents {
        box-shadow:
            outset-highlight(),
            shadow(2);
        padding: rem(6px) 0;

        label.heading {
            margin: 0 rem(12px);
        }

        // Don't double indent labels in Granite.HeaderLabel
        header label.heading {
            margin: 0;
        }

        popover {
            box-shadow:
                outset-highlight(),
                shadow(3);
        }

        listview {
            background: none;
        }

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

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

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

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

        separator {
            margin: rem(3px) 0;
        }

        // ModelMenu
        box.circular-buttons,
        box.horizontal-buttons,
        widget > scale {
            margin: rem(6px) rem(12px);
        }

        widget:dir(ltr) > scale {
            margin: rem(6px) rem(12px) rem(6px) rem(32px);
        }

        box.circular-buttons button.circular.image-button {
            padding: rem(9px);
        }

        box.inline-buttons {
            margin: rem(3px) rem(12px);

            > box {
                border-spacing: rem(6px);
            }
        }

        .title {
            font-weight: 700;

            &.separator {
                margin: rem(6px) rem(32px);
                opacity: 0.8;
            }
        }
    }

    &.menu > contents row,
    modelbutton,
    .menuitem {
        @extend %menuitem;

        // Fixes extra padding in switch modelbuttons
        &.heading label,
        &.h4 label,
        &.title-4 label {
            padding: 0;
        }
    }
}
