.c-tooltip {
    $distance--main     = calc(100% + 6px);
    $center--v          = translate(0, -50%);
    $center--h          = translate(-50%, 0);
    $triangle--center   = calc(50% - 4px);

    display: inline-block;
    position: relative;

    &__box {
        position: absolute;
        bottom: $distance--main;
        left: 50%;
        z-index: 1;
        transform: $center--h;
        width: 140px;
        padding: 8px 10px;
        background-color: $color--main-dark;
        border-radius: 4px;
        font-size: 11px;
        text-align: center;
        line-height: 1;
        color: #fff;
        animation: show-tooltip--top .4s;

        &:after {
            content: '';
            display: block;
            position: absolute;
            bottom: -2px;
            left: $triangle--center;
            width: 7px;
            height: @width;
            transform: rotate(45deg);
            background-color: @background-color;
            border-radius: 2px;
        }

        &--right {
            bottom: auto;
            top: 50%;
            left: $distance--main;
            transform: $center--v;
            animation-name: show-tooltip--right;

            &:after {
                top: $triangle--center;
                left: -2px;
                bottom: auto;
            }
        }

        &--left {
            bottom: auto;
            top: 50%;
            right: $distance--main;
            left: auto;
            transform: $center--v;
            animation-name: show-tooltip--left;

            &:after {
                top: $triangle--center;
                right: -2px;
                left: auto;
                bottom: auto;
            }
        }

        &--bottom {
            @media (min-width: $screen--md) {
                bottom: auto;
                top: $distance--main;
                animation-name: show-tooltip--bottom;

                &:after {
                    bottom: auto;
                    top: -2px;
                }
            }
        }

        &--sm {
            width: auto;
            padding: 7px 17px;
        }
    }
}

for dir in top bottom left right {
    @keyframes show-tooltip--{dir} {
        $distance = calc(100% - 10px);

        0% {
            if dir == top {
                bottom: $distance;
            }

            if dir == bottom {
                top: $distance;
            }

            if dir == left {
                right: $distance;
            }

            if dir == right {
                left: $distance;
            }

            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
}