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

.itsec-admin-bar__admin-notices {
    margin-left: auto;

    & .itsec-admin-bar-admin-notices__trigger > .components-button {
        color: $main-blue;
        border: none;
        background: transparent;

        &:hover {
            color: lighten($main-blue, 20%);
        }

        & svg {
            margin-right: .5em
        }
    }

    & .itsec-admin-bar-admin-notices__trigger .components-button {
        position: relative;
    }

    & .itsec-admin-bar-admin-notices__trigger .components-button::before {
        content: '';
        background: #d8514f;
        height: 5px;
        width: 5px;
        border-radius: 5px;
        vertical-align: middle;
        border: 1px solid #f1f1f1;
        z-index: 1;
        position: absolute;
        left: 4px;
        top: 3px;
        opacity: 0;
        transition: opacity 1000ms ease-in-out;
    }

    & .itsec-admin-bar-admin-notices__trigger--has-notices .components-button::before {
        opacity: 1;
    }
}

.itsec-admin-bar-admin-notices__content .components-popover__content {
    box-shadow: rgba(0, 0, 0, 0.19) 0 4px 5px;
}

@media screen and (max-width: $small) {
    .itsec-admin-bar .itsec-admin-bar__admin-notices {
        margin-left: 0;
    }
}
