.icon-badge {
    position: relative;
    display: inline-block;

    --fill: var(--grey-80);
    --stroke: var(--grey-80);

    &::after {
        position: absolute;
        border-radius: 50%;
        content: '';
    }

    &.mod-24::after {
        top: 4px;
        right: 2px;
        width: 8px;
        height: 8px;
    }

    &.mod-navigation {
        svg.icon {
            fill: none;
            stroke: var(--white);
        }

        &::after {
            width: 10px;
            height: 10px;
            border: 2px solid var(--grape-purple-70);
        }
    }

    &.mod-new::after {
        background-color: var(--bright-turquoise-30);
    }

    &.mod-info::after {
        background-color: var(--navy-blue-20);
    }

    &.mod-warning::after {
        background-color: var(--turbo-yellow-50);
    }

    &.mod-major::after {
        background-color: var(--critical-70);
    }
}

.header-section.mod-icon.open,
.header-section.mod-icon:hover {
    .icon-badge.mod-navigation::after {
        border: 2px solid var(--navy-blue-100);
    }
}