//
// Variables
// -----------------------------------------

$balloon-bg: fade-out(#111, .1);
$balloon-base-size: 10px;
$balloon-arrow-height: 6px;

//
// Styles
// -----------------------------------------

[data-balloon] {
    position: relative; // alt. absolute or fixed

    &:after {
        @include base-effects();

        position: absolute;
        z-index: 10;
        padding: .5em 1em;
        border-radius: 4px;
        background: $balloon-bg;
        color: #fff;
        content: attr(data-balloon);
        white-space: nowrap;
        font-size: $balloon-base-size + 2;
    }

    &:before {
        @include svg-arrow($balloon-bg);
        @include base-effects();

        position: absolute;
        z-index: 10;
        content: '';
    }

    &:hover {
        &:before,
        &:after {
            @include opacity(1);
            pointer-events: auto;
        }
    }

    &[data-balloon-break] {
        &:after {
            white-space: normal;
        }
    }

    &[data-balloon-pos="up"] {
        &:after {
            bottom: 100%;
            left: 50%;
            margin-bottom: 5px + $balloon-arrow-height;
            @include transform(translate(-50%, 10px));
            @include transform-origin(top);
        }

        &:before {
            bottom: 100%;
            left: 50%;
            margin-bottom: 5px;
            @include transform(translate(-50%, 10px));
            @include transform-origin(top);
        }

        &:hover {
            &:after {
                @include transform(translate(-50%, 0));
            }

            &:before {
                @include transform(translate(-50%, 0));
            }
        }

    }

    &[data-balloon-pos='down'] {
        &:after {
            top: 100%;
            left: 50%;
            margin-top: 5px + $balloon-arrow-height;
            @include transform(translate(-50%, -10px));
        }

        &:before {
            @include svg-arrow($balloon-bg, 'down');

            top: 100%;
            left: 50%;
            margin-top: 5px;
            @include transform(translate(-50%, -10px));
        }

        &:hover {
            &:after {
                @include transform(translate(-50%, 0));
            }

            &:before {
                @include transform(translate(-50%, 0));
            }
        }
    }

    &[data-balloon-pos='left'] {
        &:after {
            top: 50%;
            right: 100%;
            margin-right: 5px + $balloon-arrow-height;
            @include transform(translate(10px, -50%));
        }

        &:before {
            @include svg-arrow($balloon-bg, 'left');

            top: 50%;
            right: 100%;
            margin-right: 5px;
            @include transform(translate(10px, -50%));
        }

        &:hover {
            &:after {
                @include transform(translate(0, -50%));
            }

            &:before {
                @include transform(translate(0, -50%));
            }
        }

    }

    &[data-balloon-pos='right'] {
        &:after {

            top: 50%;
            left: 100%;
            margin-left: 5px + $balloon-arrow-height;
            @include transform(translate(-10px, -50%));
        }

        &:before {
            @include svg-arrow($balloon-bg, 'right');

            top: 50%;
            left: 100%;
            margin-left: 5px;
            @include transform(translate(-10px, -50%));
        }

        &:hover {
            &:after {
                @include transform(translate(0, -50%));
            }

            &:before {
                @include transform(translate(0, -50%));
            }
        }
    }

    &[data-balloon-length='small'] {
        &:after {
            width: 80px;
            white-space: normal;
        }
    }

    &[data-balloon-length='medium'] {
        &:after {
            width: 150px;
            white-space: normal;
        }
    }

    &[data-balloon-length='large'] {
        &:after {
            width: 260px;
            white-space: normal;
        }
    }

    &[data-balloon-length='xlarge'] {
        &:after {
            width: 380px;
            white-space: normal;

            @media screen and (max-width: 768px) {
                white-space: normal;
                width: 90vw;
            }
        }
    }

    &[data-balloon-length='fit'] {
        &:after {
            width: 100%;
            white-space: normal;
        }
    }
}
