// https://github.com/kazzkiq/balloon.css
// 1.0.3

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

$balloon-bg: fade-out(#101010, 0.05) !default;
$balloon-base-size: 12px !default;
$balloon-arrow-size: 5px !default;
$balloon-move: 4px !default;

//
// Mixins
// -----------------------------------------

@mixin arrow-down() {
    width: 0;
    height: 0;
    border: $balloon-arrow-size solid transparent;
    border-top-color: var(--balloon-color);
}

@mixin base-effects() {
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease-out 0.18s;
}

@mixin normalized-text() {
    text-indent: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
        'Helvetica Neue', sans-serif;
    font-weight: normal;
    font-style: normal;
    text-shadow: none;
    font-size: var(--balloon-font-size);
}

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

:root {
    --balloon-color: #{$balloon-bg};
    --balloon-font-size: #{$balloon-base-size};
    --balloon-move: #{$balloon-move};
}

// IE 11 button bugfix
button[aria-label] {
    &[data-balloon-pos] {
        overflow: visible;
    }
}

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

        // Fixing iOS Safari event issue.
        // More info at: https://goo.gl/w8JF4W
        cursor: pointer;

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

            background: var(--balloon-color);
            border-radius: 2px;
            color: #fff;
            content: attr(aria-label);
            padding: 0.5em 1em;
            position: absolute;
            white-space: nowrap;
            line-height: 1.2;
            z-index: 10;
        }

        &:before {
            @include arrow-down();
            @include base-effects();

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

        &:hover {
            &:before,
            &:after {
                opacity: 1;
                pointer-events: none;
            }
        }

        &[data-balloon-pos='up'] {
            &:after {
                bottom: 100%;
                left: 50%;
                margin-bottom: $balloon-arrow-size + 5px;
                transform: translate(-50%, var(--balloon-move));
                transform-origin: top;
            }
            &:before {
                bottom: 100%;
                left: 50%;
                transform: translate(-50%, var(--balloon-move));
                transform-origin: top;
            }

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

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