@import "panel";

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

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

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

    MatePanelApplet .label,
    PanelMenuBar.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;
    }

    MatePanelApplet .button,
    MatePanelApplet .button.flat,
    MatePanelApplet .button.toggle
    MatePanelApplet .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;
    }

    MatePanelApplet .button:hover:active,
    MatePanelApplet .button:checked,
    MatePanelApplet .button:checked:hover,
    MatePanelApplet .button.flat:hover:active,
    MatePanelApplet .button.flat:checked,
    MatePanelApplet .button.flat:checked:hover,
    MatePanelApplet .button.toggle:hover:active,
    MatePanelApplet .button.toggle:checked,
    MatePanelApplet .button.toggle:checked:hover,
    MatePanelApplet .button.flat.toggle:hover:active,
    MatePanelApplet .button.flat.toggle:checked,
    MatePanelApplet .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;
    }

    MatePanelApplet .button:hover,
    MatePanelApplet .button.flat:hover,
    MatePanelApplet .button.toggle:hover,
    MatePanelApplet .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;
    }
}