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

    display: none;
    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: 10px;
    text-align: center;
    line-height: 1;
    color: #fff;

    &: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;
    }

    &--fixed {
        display: block;
    }

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

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

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

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

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

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

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

.has-tooltip {
    position: relative;

    &--active {
        .c-tooltip {
            display: block;
            animation: show-tooltip--top .4s;

            &--right {
                animation-name: show-tooltip--right;
            }

            &--left {
                animation-name: show-tooltip--left;
            }

            &--bottom {
                @media (min-width: $screen--md) {
                    animation-name: show-tooltip--bottom;
                }
            }
        }
    }
}

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;
        }
    }
}