:is(
    #admin-panel-lessons-button,
    #cabinetMenu .cabinet-menu-button[data-section="learning"]
) {
    position: relative;
}

:is(
    #admin-panel-lessons-button,
    #cabinetMenu .cabinet-menu-button[data-section="learning"]
).is-live-lesson-soon::after {
    position: absolute;
    z-index: 3;
    inset: -4px;
    padding: 3px;
    border-radius: inherit;
    background: linear-gradient(
        100deg,
        #ff3158 0%,
        #ffde59 18%,
        #48f58a 36%,
        #38d9ff 54%,
        #7b61ff 72%,
        #ff4fd8 88%,
        #ff3158 100%
    );
    background-size: 260% 100%;
    box-shadow:
        0 0 10px rgba(56, 217, 255, .72),
        0 0 18px rgba(255, 79, 216, .5);
    content: "";
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: app-shell-live-lesson-rgb-flow 1.8s linear infinite;
}

#cabinetMenu .cabinet-menu-button[data-section="learning"].has-live-lesson-attention::after {
    position: absolute;
    z-index: 4;
    top: 7px;
    right: 7px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e0002a;
    box-shadow:
        0 0 0 2px rgba(224, 0, 42, .2),
        0 0 12px rgba(255, 21, 64, .95);
    content: "";
    pointer-events: none;
}

@keyframes app-shell-live-lesson-rgb-flow {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 260% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        #admin-panel-lessons-button,
        #cabinetMenu .cabinet-menu-button[data-section="learning"]
    ).is-live-lesson-soon::after {
        animation: none;
        background-position: 50% 50%;
        box-shadow:
            -4px 0 12px rgba(255, 49, 88, .72),
            0 -4px 12px rgba(72, 245, 138, .64),
            4px 0 12px rgba(56, 217, 255, .76),
            0 4px 12px rgba(255, 79, 216, .68);
    }
}