/**
 * All this custom properties are intended to be used with box-shadow
 */
:root {
  /** 
    * Dashboard tiles, Content panel, side nav hover, table row hover, list row hover, picker hover, button rest
    */
  --depth-1: 0px 2px 4px rgba(0, 0, 0, 0.12), 0px 0px 1px rgba(0, 0, 0, 0.18);

  /**
    * Command bar dropdowns, locked dropdown, slider knob hover, button hover
    */
  --depth-2: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.16);

  /**
    * Header search panel, tooltips, callouts, transient dropdowns (which moves based on content or mouse position)
    */
  --depth-3: 0 8px 16px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.14);

  /**
    * Right panel, dialog boxes
    */
  --depth-4: 0 24px 48px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.12);
}