/* ==========================================================================
   "New market documents" picto in the main menu.
   Menu item generated by Inetum\CustomMenu\Plugin\Topmenu (class "new-documents").
   Displays a blue bell (menu color: #0096de) with a red badge showing the
   number of new documents.
   ========================================================================== */

/* The item sits on the white line, like help_user / market_info */
.navigation .level0.new-documents {
    background-color: #ffffff !important;
    border: 0 !important;
}

.navigation .level0.new-documents > a {
    position: relative;
    display: inline-block;
    border: 0 !important;
    padding: 0 10px;
    margin: 0;
}

/* Blue bell (SVG) vertically centered on the theme line height */
.navigation .level0.new-documents > a::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url("../images/bell.svg") no-repeat center center;
    background-size: contain;
    vertical-align: middle;
    /* Lowered a bit so the bell sits lower on the menu line */
    margin-top: 17px;
}

/* The node name holds the number of new documents:
   shown in a red bubble (SVG) placed over the bell */
.navigation .level0.new-documents > a > span {
    position: absolute;
    /* Follows the bell downwards (bell margin-top increased) */
    top: 7px;
    right: -3px;
    min-width: 22px;
    height: 24px;
    /* bottom padding tuned to vertically center the number inside the
       bubble body (the SVG has a downward tip at the bottom) */
    padding: 0 4px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../images/badge-bubble.svg") no-repeat center center;
    background-size: contain;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
}

/* Neutralize any pseudo-element (bubble tip/"tail")
   possibly inherited from the theme on the badge */
.navigation .level0.new-documents > a > span::before,
.navigation .level0.new-documents > a > span::after {
    display: none !important;
    content: none !important;
}

/* No new documents: hide the badge, the bell stays visible */
.navigation .level0.new-documents > a > span:empty {
    display: none;
}