@import "colors.scss";
@import "breakpoints.scss";

#wpadminbar #wp-admin-bar-itsec_admin_bar_menu .ab-sub-wrapper {
    background: transparent;
    box-shadow: none;
}

#wpadminbar .itsec-admin-notices-toolbar-bubble {
    display: inline-block;
    vertical-align: top;
    margin: 8px 0 0 5px;
    padding: 0 5px;
    min-width: 7px;
    height: 17px;
    border-radius: 11px;
    font-size: 9px;
    line-height: 17px;
    text-align: center;
    z-index: 26;
    background-color: #ca4a1f;
    color: #fff;
    animation: itsec-admin-notices-toolbar-bubble-fade-in 400ms;

    & .itsec-admin-notices-toolbar-bubble__count {
        line-height: 17px;
        font-size: 9px;
    }
}

@keyframes itsec-admin-notices-toolbar-bubble-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#itsec-admin-notices-root .itsec-admin-notice-panel {
    border: 1px solid #e2e4e7;
    box-shadow: 0 3px 30px rgba(25, 30, 35, .1);
}

#itsec-admin-notices-root .components-popover:not(.is-mobile).is-bottom {
    z-index: 99999;
}

#itsec-admin-notices-root .itsec-admin-notices-toolbar__popover .components-popover__content {
    box-shadow: rgba(0, 0, 0, 0.19) 0 4px 5px;
}

#wp-admin-bar-itsec_admin_bar_menu .components-button {
    cursor: pointer;
}

#wp-admin-bar-itsec_admin_bar_menu .it-icon-itsec {
    display: none;
    margin-top: 8px;
    color: rgba(240, 245, 250, 0.6);
    height: 20px;
    width: 52px;
    line-height: 32px;
    font-size: 32px;
    text-align: center;
}

@media screen and (max-width: 782px) {
    #wp-toolbar > ul > li#wp-admin-bar-itsec_admin_bar_menu {
        display: list-item;

        & .it-icon-itsec {
            display: inline-block;
        }

        & .itsec-toolbar-text {
            display: none;
        }

        & .itsec-admin-notices-toolbar-bubble {
            display: none;
        }

        & .itsec-admin-notices-toolbar--has-notices {
            position: relative;

            &::before {
                content: '';
                background: #d8514f;
                height: 5px;
                width: 5px;
                border-radius: 5px;
                vertical-align: middle;
                border: 1px solid #23282d;
                z-index: 1;
                position: absolute;
                left: 4px;
                top: 3px;
                animation: itsec-admin-notices-toolbar-bubble-fade-in 400ms;
            }
        }
    }
}
