.#{$tooltip-class-name} {

    display: inline-block;
    position: relative;

    & > .content {
        background: $tooltip-background-color;
        padding: $tooltip-padding;
        @include border-radius ($tooltip-border-radius);
        font-size: $tooltip-font-size;
        color: $tooltip-text-color;
    }

    & > .arrow {

        position: absolute;

        &.up, &.down, &.left, &.right {
            width: 0; 
            height: 0;
        }

        &.up {           
            border-left: $tooltip-arrow-size solid transparent;
            border-right: $tooltip-arrow-size solid transparent;
            border-bottom: $tooltip-arrow-size solid $tooltip-background-color;
            top: -$tooltip-arrow-size;
            left: 50%;
            margin-left: -($tooltip-arrow-size / 2);
        }

        &.down {             
            border-left: $tooltip-arrow-size solid transparent;
            border-right: $tooltip-arrow-size solid transparent;
            border-top: $tooltip-arrow-size solid $tooltip-background-color;
            bottom: -($tooltip-arrow-size/1.1);
            left: 50%;
            margin-left: -($tooltip-arrow-size / 2);
        }

        &.right {            
            border-top: $tooltip-arrow-size solid transparent;
            border-bottom: $tooltip-arrow-size solid transparent;
            border-left: $tooltip-arrow-size solid $tooltip-background-color;
            top: 50%;
            right: -($tooltip-arrow-size/1.1);
            margin-top: -($tooltip-arrow-size);
        }

        &.left {             
            border-top: $tooltip-arrow-size solid transparent;
            border-bottom: $tooltip-arrow-size solid transparent; 
            border-right:$tooltip-arrow-size solid $tooltip-background-color; 
            top: 50%;
            left: -($tooltip-arrow-size/1.1);
            margin-top: -($tooltip-arrow-size);
        }
    }
    
    &.blue { 
        & > .content { 
            background: $blue;
            color: $white;
        }
        & > .arrow {
            &.up { border-bottom-color: $blue; }
            &.down { border-top-color: $blue; }
            &.left { border-right-color: $blue; }
            &.right { border-left-color: $blue; }
        }
    }
    &.red { 
        & > .content { 
            background: $red;
            color: $white;
        }
        & > .arrow {
            &.up { border-bottom-color: $red; }
            &.down { border-top-color: $red; }
            &.left { border-right-color: $red; }
            &.right { border-left-color: $red; }
        }
    }
    &.orange { 
        & > .content { 
            background: $orange;
            color: $white;
        }
        & > .arrow {
            &.up { border-bottom-color: $orange; }
            &.down { border-top-color: $orange; }
            &.left { border-right-color: $orange; }
            &.right { border-left-color: $orange; }
        }
    }
    &.green { 
        & > .content { 
            background: $green;
            color: $white;
        }
        & > .arrow {
            &.up { border-bottom-color: $green; }
            &.down { border-top-color: $green; }
            &.left { border-right-color: $green; }
            &.right { border-left-color: $green; }
        }
    }
    &.black { 
        & > .content { 
            background: $black;
            color: $white;
        }
        & > .arrow {
            &.up { border-bottom-color: $black; }
            &.down { border-top-color: $black; }
            &.left { border-right-color: $black; }
            &.right { border-left-color: $black; }
        }
    }

    &.grey { 
        & > .content { 
            background: $grey-20;
            color: $grey-80;
        }
        & > .arrow {
            &.up { border-bottom-color: $grey-20; }
            &.down { border-top-color: $grey-20; }
            &.left { border-right-color: $grey-20; }
            &.right { border-left-color: $grey-20; }
        }
    }

}