$_base_bg_color: $panel_bg_color;
$_base_fg_color:  $panel_fg_color;
$_backdrop_base_bg_color: lighten($panel_bg_color, 3%);
$_backdrop_base_fg_color:  transparentize($panel_fg_color, 0.3);
$_base_border_color: if($variant=='light', $borders_color, lighten(#323030, 8%));
$_base_hover_color: if($variant=='light', darken($panel_bg_color, 4%), lighten($panel_bg_color, 4%));
$_base_active_color: if($variant=='light', darken($panel_bg_color, 4%), darken($panel_bg_color, 4%));
$_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
$_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
$_wm_shadow: 0 3px 9px 1px transparentize(black, 0.5), 0 0 0 1px $_wm_border; //doing borders with box-shadow;

/**************
 * Mate-Panel *
 **************/

/* the panel bar itself */
#PanelPlug,
.mate-panel-menu-bar,
PanelToplevel.background {
    background-color: $_base_bg_color;
    background-image: none;
    color: $fg_color;
    text-shadow: none;
    menu {
      border-radius: $menu_radius;
      padding: 4px 0px;
      .csd & {
        border: none; // axes borders in a composited env
        border-radius: $menu_radius;
      }
    }
}
// Axe the border under panel menubars
#PanelPlug menubar { box-shadow: none; }

/* workaround to avoid unwanted black frames behind menus if switching compositor on/off */
.mate-panel-menu-bar .window-frame.csd.popup {
    box-shadow: none;
}

// Force round menus for MATE, because they are populated from the top/bottom panels
// And thus for MATE not just "legacy" menus used in "old" applications
menubar,
.menubar {
  
  > menuitem {
    
    menu {
      &:dir(rtl), &:dir(ltr) { // specificity bump
        border-radius: $menu_radius;
      }
    }    
  }
  
  .csd.popup decoration { border-radius: $menu_radius; }
}

/* hide buttons */
PanelToplevel > widget > button {
    border-image: none;
    background-image: none;
    background: transparent;
    border-style: none;
    border-radius: 0px;
    padding: 0px;
    box-shadow: none;
    color: $_base_fg_color;
}

#PanelApplet {
    border-radius: $menu_radius;
}

PanelWidget > PanelSeparator {
    border-width: 0;
    background-color: transparent;
    color: $_base_border_color;
}

/* the grid left from wnckpager and wncktasklist */
MatePanelAppletFrameDBus > MatePanelAppletFrameDBus {
    background-image: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left;
}

/* this makes text readable with all kind of wallpapers if using a transparent panel */
#PanelApplet label,
.mate-panel-menu-bar menubar > menuitem {
    color: $_base_fg_color;
    text-shadow: none;
    &:hover {
      color: $_base_fg_color;
      box-shadow: inset 0 -3px 0 0 $selected_bg_color;
    }
}

/* outlines */
window.background, /* selector where outlines are writen on GtkTrayIcon */
.mate-panel-menu-bar menubar,
// .mate-panel-menu-bar button,
.mate-panel-menu-bar PanelApplet {
    outline-style: solid;
    outline-offset: -2px;
    outline-color: $focus_border_color;
}

// Hide focus outline on menu-bar buttons
.mate-panel-menu-bar button {
  outline-color: transparent;
}

PanelApplet.wnck-applet .wnck-pager {
    outline-style: solid;
    outline-offset: -1px;
    outline-color: $focus_border_color;
}

/* main menu */
/* set normal menubar menuitem */
.mate-panel-menu-bar menubar > menuitem {
    background-image: none;
    box-shadow: none;
}

/* set selected menubar menuitem */
.mate-panel-menu-bar menubar > menuitem:hover {
    background-color: transparent;
    background-clip: border-box;
    background-image: image($_base_hover_color);
}

/* set normal menubar menu menuitem */
.mate-panel-menu-bar menubar > menuitem > .popup.csd > menu > menuitem {
    padding: 4px 5px 4px 5px;
    border-width: 0px;
}

/* set Mate menu menuitem */
.mate-panel-menu-bar menu menuitem {
    padding: 4px 5px 4px 5px;
    border-width: 0px;
}

/* all applets */
.mate-panel-menu-bar #PanelApplet button {
  &, &.flat {
    &.toggle {
      background-image: none;
      background-color: transparent;
      color: $_base_fg_color;
      padding: 2px;
      border-radius: 0;
      border-image: none;
      text-shadow: none;

      &:hover, &:active:hover, &:checked:hover {
        background-image: image(if($variant=='light', darken($_base_bg_color, 12%), lighten($_base_bg_color, 15%)));
      }
      &:checked {
        background-image: image(if($variant=='light', darken($_base_bg_color, 5%), lighten($_base_bg_color, 8%)));
      }
    }
  }
}

/* clock window */
#MatePanelPopupWindow {
	border-radius: $button_radius;
}

/* Weird, this sets the border color of the clockmap */
#MatePanelPopupWindow > frame > box > box > box > widget {
    color: $borders_color;
}

/* volume applet */
.mate-panel-applet-slider,
.mate-panel-applet-slider.background {
  border-radius: $menu_radius;
  border: 1px solid $_wm_border;
  background: transparent;

  frame {
    background-color: $bg_color;
    border-radius: $menu_radius;
    padding: 1px;
    margin: 1px;

    border {
      border-image: none;
      border-style: none;
      border-radius:2px;
    }

    frame {
      background-color:transparent;
      padding: 3px;
    }

    /* brightness applet */
    button {
      padding: 4px 5px 4px 0px;
      background-image: none;
      background-color: transparent;
      border-style: none;
      border-image: none;
      color: $_base_fg_color;
      margin: 0px;
      &:checked {
        box-shadow: inset 0 -3px 0 0 $selected_bg_color;
      }
    }
  }
}

/* mate-indicator-applet */
/* needed for a transparent panel */
#fast-user-switch-applet > #fast-user-switch-menubar {
    background-color: transparent;
}

/* Classic icon style */
.mate-panel-menu-bar {
    -PanelMenuBar-icon-visible: true;
}

/* system-monitor-applet, kill light frame border */
.multiload-applet > box.horizontal > box.vertical > frame > border {
    border-color: transparent;
}

.multiload-applet > box.horizontal > box.vertical > frame {
    box-shadow: $_wm_shadow;
}

