@mixin tooltip($top : 0, $left : 28px, $right: initial) {
    position: relative;
    width: auto;
    height: auto;

    &__icon {
        background: color('background');
        width: auto;
        height: auto;
    }

    &__text {
        @include font('IntervalNextReg');
        font-size: em(14px);
        position: absolute;
        left: $left;
        right: $right;
        line-height: 1.29;
        top: $top;
        visibility: hidden;
        padding: 16px 20px 20px 20px;
        background: color('background', 'negative');
        color: color('text', 'highlight');
        box-shadow: 0 8px 10px 0 color('modal', 'shadow');
    }

    &--active &__text, 
    &:hover &__text {
        visibility: visible;
    }

    &--negative &__text {
        background: color('background');
        color: color('text');
        border: 2px solid color('borders');
    }

    &--alternative &__text {
        width: 100%;
        max-width: 210px;
        box-shadow: none;

        &:before {
            position: absolute;
            content: '';
            top: calc(35% - 10px);
            left: -5px;
            border-style: solid;
            border-width: 10px 10px 10px 0;
            border-color: transparent color('background', 'negative') transparent transparent;
        }
    }
}