@use "partials/variables" as *;
@use "partials/admin-notices";

#adminmenu {
    #toplevel_page_cache-autopilot-invalidator,
    #toplevel_page_cache-autopilot-warmup {
        > a .wp-menu-image {
            color: inherit;
            background-color: currentColor;
        }
    }

    #toplevel_page_cache-autopilot-invalidator > a .wp-menu-image {
        -webkit-mask: url("../../../../invalidator/assets/images/eci-logo-only.svg") center / 20px auto no-repeat;
        mask: url("../../../../invalidator/assets/images/eci-logo-only.svg") center / 20px auto no-repeat;
    }

    #toplevel_page_cache-autopilot-warmup > a .wp-menu-image {
        -webkit-mask: url("../../images/ecw-logo-only.svg") center / 20px auto no-repeat;
        mask: url("../../images/ecw-logo-only.svg") center / 20px auto no-repeat;
    }
}

#wpadminbar {
    #wp-admin-bar-ekesto-cache-warmup {

       /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

       Icon

       */
        > .ab-item {
            display: flex;
            align-items: center;
            height: 32px;

            .ecw-adminbar-icon-wrap {
                display: inline-flex;
                position: relative;
                align-items: center;
                justify-content: center;
                width: 20px;
                height: 20px;

                &::before {
                    content: "";
                    display: block;
                    width: 20px;
                    height: 20px;
                    background-color: currentColor;
                    -webkit-mask: url("../../images/ecw-logo-only.svg") center / 20px 20px no-repeat;
                    mask: url("../../images/ecw-logo-only.svg") center / 20px 20px no-repeat;
                }

                .ecw-adminbar-pause-indicator {
                    position: absolute;
                    top: -4px;
                    right: -4px;
                    width: 12px;
                    height: 12px;
                    background: #000;
                    border-radius: 50%;

                    &::before,
                    &::after {
                        content: "";
                        position: absolute;
                        top: 3px;
                        width: 2px;
                        height: 6px;
                        background: #fff;
                        border-radius: 1px;
                    }

                    &::before {
                        right: auto;
                        left: 3px;
                    }

                    &::after {
                        left: auto;
                        right: 3px;
                    }
                }
            }
        }


        /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

        State info

        */

        > .ab-sub-wrapper {
            > .ab-submenu {
                padding-top: 0;
            }
        }

    }

    #wp-admin-bar-ekesto-cache-warmup-state {
        background: white;
        padding: 8px 0;
        .ab-item {
            pointer-events: none;
            cursor: default;
            color: $color-element-dark !important;
            font-weight: bold;
        }
        + li {
            padding-top: 8px;
        }
    }

    #wp-admin-bar-ekesto-cache-warmup-run-full.ecw-adminbar-hidden {
        display: none;
    }

}
