/**
 * Admin bar item and admin menu entry of POP.
 *
 * Loaded on every admin screen, because the admin bar and the menu are on every screen. It only
 * touches POP's own nodes (#wp-admin-bar-wc_el_inv_options, #toplevel_page_wc_el_inv-options-page
 * and the pills inside #wpadminbar). Everything else lives in wc-inv-admin.css, loaded only on the
 * screens that need it (see WcElectronInvoice\Functions\isPopAdminScreen()).
 */
#wpadminbar {
  --pop-color-primary:      #F26B5E;
  --pop-color-primary-dark: #C43E2C;
  --pop-color-accent:       #4AACAA;
  --pop-color-ink:          #1F2328;
}

/* Icons menu */
#wp-admin-bar-wc_el_inv_options {
  margin:        7px 5px !important;
  border-radius: 5px;
}

#toplevel_page_wc_el_inv-options-page a .wp-menu-image {
  background-size: 16px auto !important;
}

#toplevel_page_wc_el_inv-options-page ul.wp-submenu li.wp-first-item {
  display: none !important;
}

#wpadminbar .quicklinks ul li#wp-admin-bar-wc_el_inv_options > a.ab-item {
  display:        flex;
  align-items:    center;
  flex-direction: row;
  margin-top:     0;
  padding:        0px 5px;
  height:         18px;
  line-height:    17px;
  border-radius:  5px;
  font-size:      13px;
  background:     transparent !important;
  color:          #fff !important;
}

#wpadminbar .wc_el_inv-admin-bar-icon {
  flex-shrink:  0 !important;
  margin-right: 8px !important;
}

#wpadminbar .wc_el_inv-admin-bar-pill {
  display:       inline-block !important;
  font-size:     9px !important;
  font-weight:   600;
  line-height:   14px !important;
  letter-spacing: .3px;
  padding:       0 6px;
  border-radius: 3px;
  flex-shrink:   0;
}

#wpadminbar .wc_el_inv-admin-bar-pill.is-sandbox {
  background: var(--pop-color-primary);
  color:      var(--pop-color-ink);
}

#wpadminbar .wc_el_inv-admin-bar-pill.is-live {
  background: var(--pop-color-accent);
  color:      var(--pop-color-ink);
}

#wpadminbar .wc_el_inv-admin-bar-pill.is-disconnected {
  background: var(--pop-color-primary-dark);
  color:      #fff;
}

#wpadminbar .wc_el_inv-admin-bar-devbadge {
  display:        inline-block !important;
  font-size:      9px !important;
  font-weight:    600;
  line-height:    12px !important;
  letter-spacing: .3px;
  padding:        0 5px;
  margin-left:    4px;
  border-radius:  3px;
  border:         1px solid rgba(255, 255, 255, .5);
  color:          #fff;
  flex-shrink:    0;
}