/*
 * @author: Peter Slagter
 * @author: Geert Romijn
 */

/**
 * Defaults, container
 */

.pbuic-quicklinks-bar {
	margin-bottom: 1em;
	clear: both;
    color: #222;
}

.pbuic-quicklinks-bar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pbuic-quicklinks-bar > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    max-width: 100%;
}

/**
 * First level
 */

/** List-item settings (various cases) */
.pbuic-quicklinks-bar li {
    flex: 0 1 auto;
    min-width: 1em;
	margin: 0 -1px 0 0;
	line-height: 18px;
    vertical-align: top;
	border: 1px solid rgba(0,0,0,0.1);
	border-right-width: 0;
    border-radius: 1px;
}

.pbuic-quicklinks-bar .qb-item-separator-before {
	margin-right: 1em;
}

.qb-is-initialized li {
	transition: width ease 0.25s;
}

.pbuic-quicklinks-bar > ul > li:hover {
	box-shadow: 0 2px 2px -2px rgba(0,0,0,0.4);
    border-color: rgba(0,0,0,0.15);
}

/** Primary action */
.pbuic-quicklinks-bar .qb-item-primary,
.pbuic-quicklinks-bar .qb-item-primary:hover {
    border-color: #4091bf;
    background: #4091bf;
}

.pbuic-quicklinks-bar .qb-item-primary:hover {
    border-color: #00749f;
    text-shadow: 1px 1px 0 #00749f;
    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.8);
}

.pbuic-quicklinks-bar .qb-item-primary a,
.pbuic-quicklinks-bar .qb-item-primary:hover a{
	color: #fff;
    color-scheme: dark;
}

/** Items with children */
.pbuic-quicklinks-bar .qb-item-has-children {
	position: relative;
	cursor: pointer;
}

.pbuic-quicklinks-bar .qb-item-has-children:not(.qb-item-noname) > span {
	padding-right: 16px;
	background: transparent url(quicklinks-chevron.svg) no-repeat right center;
    background-size: 12px 4px;
}

/** Inactive buttons */
.pbuic-quicklinks-bar .qb-item-is-inactive * {
	opacity: .65;
}

.pbuic-quicklinks-bar .qb-item-is-inactive:hover {
	box-shadow: none;
	border-color: #dcdcdc;
	cursor: default;
}

/** Link settings */
.pbuic-quicklinks-bar a,
.pbuic-quicklinks-bar span {
	display: block;
	padding: 0.4em 0.7em;
	color: #222;
	text-decoration: none;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.pbuic-quicklinks-bar .icon {
	vertical-align: top;
	margin-right: 3px;
    opacity: .8;
}

.pbuic-quicklinks-bar > ul:not(.qb-children-container) > li > * > .icon {
    width: auto;
    max-width: 20px;
    height: 16px;
}

.qb-item-primary .icon[src*='.svg'] {
    filter: invert(1);
}

.pbuic-quicklinks-bar li:hover a {
	color: #000;
}

.pbuic-quicklinks-bar li:hover .icon {
	opacity: 1;
}

.pbuic-quicklinks-bar .qb-first-item,
.pbuic-quicklinks-bar .qb-item-separator-after {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.pbuic-quicklinks-bar .qb-item-separator-before {
	margin-right: 10px;
}

.pbuic-quicklinks-bar .qb-last-item,
.pbuic-quicklinks-bar .qb-item-separator-before {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
    border-right-width: 1px;
}

/**
 * Second level
 */

.qb-children-container {
	position: absolute;
	overflow: auto;
	left: -999em;
	max-height: 300px; /** To prevent long menus from breaking out of the module-interface (Zendesk: #18260) */
	border-radius: 4px;
	list-style: none;
	background: #fff;
	box-shadow: var(--mi-shdw-4, 0 6px 11px -3px #00000040);
	z-index: 10000;
}

.qb-children-container ul {
	padding: 10px 0;
	background: #fff;
}

.qb-children-container li {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
}

.qb-children-container li:hover {
	box-shadow: none;
}

.qb-children-container li a,
.qb-children-container li span,
.qb-menu-open .qb-children-container li a,
.qb-menu-open .qb-children-container li span {
	padding: 4px 20px;
	white-space: nowrap;
	text-decoration: none;
	color: inherit;
}

.pbuic-quicklinks-bar li li a:hover {
	background: #eee;
}

.qb-children-container .icon {
	margin-inline: -6px 12px;
	vertical-align: text-bottom;
}

/** Show & hide behavior */
.pbuic-quicklinks-bar li:hover .qb-children-container,
.pbuic-quicklinks-bar li:focus .qb-children-container,
.pbuic-quicklinks-bar li:focus-within .qb-children-container {
	left: 0;
}

.qb-has-addEventListener li:hover .qb-children-container {
	left: -999em;
}

.qb-has-addEventListener .qb-menu-open:hover .qb-children-container,
.pbuic-quicklinks-bar .qb-menu-open .qb-children-container {
	left: 0;
}

.qb-has-addEventListener .qb-menu-open:hover .qb-menu-right-aligned,
.pbuic-quicklinks-bar .qb-menu-open .qb-menu-right-aligned,
.pbuic-quicklinks-bar .qb-menu-open:hover .qb-menu-right-aligned,
.pbuic-quicklinks-bar .qb-menu-open:focus .qb-menu-right-aligned,
.pbuic-quicklinks-bar .qb-menu-open:focus-within .qb-menu-right-aligned {
	left: auto;
	right: 0;
}

/** Child without icon */
.pbuic-quicklinks-bar .qb-contains-child-with-icon .qb-item-has-no-icon span,
.pbuic-quicklinks-bar .qb-contains-child-with-icon .qb-item-has-no-icon span {
	padding-left: 25px;
}

/** Reset special cases */
.pbuic-quicklinks-bar li .qb-item-separator-before {
    position: relative;
	margin: 0;
	padding-bottom: 7px;
    border-radius: 0;
}

.pbuic-quicklinks-bar li .qb-item-separator-before:after {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.pbuic-quicklinks-bar li .qb-item-separator-after {
	padding-top: 6px;
}

.pbuic-quicklinks-bar li:hover .qb-item-is-inactive span,
.pbuic-quicklinks-bar li .qb-item-is-inactive span {
	opacity: .65;/** same as .pbuic-quicklinks-bar .qb-item-is-inactive */
}