/*
AUTHOR:				Sheen Justin, Trusted Mission Solutions, Inc., for the US Small Business Administration. 
DATE:				11/03/2015. 
DESCRIPTION:		CSS classes for the Home Page's use of the SBA "Button Bar". 
NOTES:				These override /library/css/buttonbar.css on the Home Page, both before and after login. 
INPUT:				None. 
OUTPUT:				CSS classes for the Home Page's use of the SBA "Button Bar". 
REVISION HISTORY:	05/28/2021, SMJ:  OPSMDEV-2586: CAFS Landing page changes, made use of new CSS variables.
                  04/27/2016, SRS:	When a div.icon is *NOT* a menu control, allowed it be an a.icon instead. 
										Just added some selectors to existing classes. (Changes in buttonbar.css 
										necessitated analogous changes here.) Also added this SBA standard 
										"comment header" and inferred the Revision History from checkin/checkout. 
										Added special top offset for phone/email combo icon designed by SL. 
                  04/20/2016, SMJ:	Made this file entirely about controlling the button bar. (There's still 
                            some buttonbar code in /cls/cafs/css/cafs-header.css, however.) 
                  11/03/2015, SMJ:	Original implementation. 
*/

/*
The following were generated by a call to <cf_buttonbar ... IconColor="##f1f1f1" IconSize="18" OffsetRight="-230" OffsetTop="20" Spacing="16">
Note that div.menu's top is calculated as 11/12ths of the IconSize attribute so that every menu's top edge will overlap ever-so-slightly
with the bottom of its icon. That keeps the menu from closing while mousing down from the icon to the menu.
*/

div.buttonbar div.icon span.icon,
div.buttonbar a.icon span.icon {
  color: var(--clr-link);
}

div.buttonbar div.icon.spacer {
  width: 22px;
  height: 24px;
}

div.buttonbar div.icon:not(.spacer),
div.buttonbar a.icon:not(.spacer) {
  width: 24px;
  height: 24px;
}

body:not(.th6) div.buttonbar div.icon:not(.spacer) span.icon,
body:not(.th6) div.buttonbar a.icon:not(.spacer) span.icon {
  font-size: 24px;
}

div.buttonbar:hover div.menu {
  top: 24px;

  height: auto;
  padding: 1rem;

  border: none;
  border-radius: 2px;
  background-color: var(--clr-bg);
  box-shadow: var(--sba-shadow);
  z-index: 999;
}

.buttonbar .menu .menuitem {
  text-decoration: none;

  color: var(--clr-text);
}

.buttonbar .menu span.menuitem {
  cursor: default;
}

/*media all*/

div:not(.left).buttonbar {
  position: static !important;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}


/*
The following was manually entered, based on a :hover selector in cafs-header.css:
*/

body:not(.th6) div.buttonbar div.icon:not(.spacer) span.icon:hover,
body:not(.th6) div.buttonbar a.icon:not(.spacer) span.icon:hover {
  color: var(--sba-red);
}

body:not(.th6) div.buttonbar div.icon:not(.spacer) span.icon:hover::before,
body:not(.th6) div.buttonbar div.icon:not(.spacer) span.icon:hover::after,
body:not(.th6) div.buttonbar a.icon:not(.spacer) span.icon:hover::before, 
body:not(.th6) div.buttonbar a.icon:not(.spacer) span.icon:hover::after {
  color: var(--sba-red);
}
body:not(.th6) div.buttonbar a.icon:not(.spacer):hover,
body:not(.th6) div.buttonbar a.icon:not(.spacer):focus {
  box-shadow: none;
}

body:not(.th6)	div.buttonbar	div.icon:not(.spacer):hover
	{/* Make it a little easier for the user to keep a menu up. Almost unnoticeable because of the 0.1 opacity: */
	background-color:										inherit;
	}

/*
The following was manually entered, based on Sheen's desire to have the Settings menu display as the user icon:
*/

div.buttonbar div.icon.settings span.icon:before {
  content: "\f007";
}

/*
Sherry Liu designed a combo icon that included both phone and email icons. On home page, it needs "top:-1px;": 
*/

body:not(.th6)	div.buttonbar	span.icon.phone		{
  top:2px;
}

body:not(.th6)	div.buttonbar	span.icon.phone::after		{
  top:2px;
}

/* .fa-user */

.buttonbar .menu {
  border-radius: 0 !important;
}