@import "panel";

/****************
 ! MATE styles *
*****************/

@include exports("mate-applications") {
    .mate-panel-menu-bar {
        @extend %panel;

        border: 0;
        padding: 0;
        text-shadow: none;
    }

    #PanelApplet label,
    .mate-panel-menu-bar menubar > menuitem {
        color: $panel_fg_color;
    }

    PanelSeparator, MatePanelAppletFrameDBus {
        border-width: 0;
        color: transparent;
        background-image: -gtk-scaled(url("../assets/pane-handle.png"),
                                      url("../assets/pane-handle@2.png"));
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: left;
    }

    #PanelApplet button,
    #PanelApplet button.flat,
    #PanelApplet button.toggle
    #PanelApplet button.flat.toggle {
        background-image: none;
        background-color: transparent;
        border-color: transparent;
        border-style: solid;
        border-radius: 0;
        border-width: 1px;
        color: $panel_fg_color;
        text-shadow: none;
        box-shadow: none;
        padding: 2px;
    }

    #PanelApplet button:hover:active,
    #PanelApplet button:checked,
    #PanelApplet button:checked:hover,
    #PanelApplet button.flat:hover:active,
    #PanelApplet button.flat:checked,
    #PanelApplet button.flat:checked:hover,
    #PanelApplet button.toggle:hover:active,
    #PanelApplet button.toggle:checked,
    #PanelApplet button.toggle:checked:hover,
    #PanelApplet button.flat.toggle:hover:active,
    #PanelApplet button.flat.toggle:checked,
    #PanelApplet button.flat.toggle:checked:hover {
        background-image: none;
        background-color: darker($panel_bg_color);
        border-color: transparent;
        border-radius: 0;
        border-width: 1px;
        color: lighter($panel_fg_color);
        text-shadow: none;
        padding: 2px;
    }

    #PanelApplet button:hover,
    #PanelApplet button.flat:hover,
    #PanelApplet button.toggle:hover,
    #PanelApplet button.flat.toggle:hover {
        background-image: none;
        background-color: shade($panel_bg_color, 1.3);
        border-color: transparent;
        border-radius: 0;
        border-width: 1px;
        color: $selected_fg_color;
        text-shadow: none;
        padding: 2px;
    }

    .mate-panel-menu-bar menubar > menuitem {
        padding: 3px 7px;
    }
}
