.insight-button {
    display: flex;

    &__wrapper {
        position: relative;
    }

    &__notification-counter {
        position: absolute;
        cursor: pointer;
        &_counter {
            top: -7px;
            left: calc(100% - 10px);
        }
        &_dot {
            top: -4px;
            left: calc(100% - 10px);
        }
    }

    &__slot-content {
        width: 100%;
    }

    &__badge-text {
        margin-left: var(--space-inline-xs);
    }
}
.insight-button__item {
    position: relative;
    cursor: pointer;
    padding: var(--insight-button-padding);
    border-radius: var(--insight-button-border-radius);
    background: var(--insight-button-background);
    color: var(--insight-button-color);
    & us-icon {
        pointer-events: none;
    }

    &-content {
        display: flex;
        align-items: center;
        gap: var(--space-inline-m);
        margin-top: var(--space-inline-m);
    }

    &-link {
        flex-shrink: 0;
        font: var(--text-link-m);
        color: var(--color-primary-600);
        text-decoration: underline;
    }

    &-action {
        display: flex;
        min-width: 0;
    }

    &-action-text {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    

    &:hover,
    &:focus-visible,
    &.insight-button__item_focused {
        background: var(--insight-button-hover-background);
        color: var(--insight-button-hover-color);
    }
    &:active {
        background: var(--insight-button-pressed-background);
        color: var(--insight-button-pressed-color);
    }
    &:focus-visible {
        outline: 0;
    }

    &_shake {
        .insight-button__item-icon {
            animation: icon-wiggle 2.5s ease-out 1s infinite;
            transform-origin: center bottom;
        }
    }
}

.insight-button__alert {
    width: 100%;

    &.horizontal-small,
    &.horizontal-medium,
    &.horizontal-large {
        .insight-button__alert-description {
            -webkit-line-clamp: 1;
        }
    }

    &.horizontal-medium,
    &.horizontal-large, {
        .insight-button__alert-content {
            display: flex;
        }

        .insight-button__item-link {
            margin-left: var(--space-inline-s);
        }
    }

    &-description {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }
}

@keyframes icon-wiggle {
    0% {
        transform: rotate(0deg)
    }

    4% {
        transform: rotate(10deg)
    }

    8% {
        transform: rotate(-10deg)
    }

    12% {
        transform: rotate(10deg)
    }

    16% {
        transform: rotate(-10deg)
    }

    20%,to {
        transform: rotate(0deg)
    }
}