@import "includes/variables";
@import "includes/mixins";

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

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

[aria-label] {
    &[data-balloon-pos] {
        position: relative;
        cursor: pointer;

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

            background: var(--balloon-color);
            color: var(--balloon-text-color);
            border-radius: var(--balloon-border-radius);
            content: attr(aria-label);
            padding: 10px 15px;
            position: absolute;
            white-space: nowrap;
            z-index: 10;
        }

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

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

        &:hover, &[data-balloon-visible], &:not([data-balloon-nofocus]):focus {
            &:before,
            &:after {
                opacity: 1;
                pointer-events: none;
            }
        }

        &.font-awesome:after {
            font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

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

            &[data-balloon-length] {
                &:after {
                    white-space: pre-line;
                    word-break: break-word;
                }
            }
        }

        &[data-balloon-blunt] {
            &:before,
            &:after {
                @include no-effects();
            }
        }

        &[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,
            &[data-balloon-visible] {
                &:after {
                    transform: translate(-50%, 0);
                }

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

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

            &:before {
                bottom: 100%;
                left: 5px;
                transform: translate(0, var(--balloon-move));
                transform-origin: top;
            }

            &:hover, &[data-balloon-visible] {
                &:after {
                    transform: translate(0, 0);
                }

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

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

            &:before {
                bottom: 100%;
                right: 5px;
                transform: translate(0, var(--balloon-move));
                transform-origin: top;
            }

            &:hover, &[data-balloon-visible] {
                &:after {
                    transform: translate(0, 0);
                }

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

        &[data-balloon-pos="down"] {
            &:after {
                left: 50%;
                margin-top: $balloon-arrow-size + 5px;;
                top: 100%;
                transform: translate(-50%, calc(var(--balloon-move) * -1));
            }

            &:before {
                @include arrow-up();

                left: 50%;
                top: 100%;
                transform: translate(-50%, calc(var(--balloon-move) * -1));
            }

            &:hover, &[data-balloon-visible] {
                &:after {
                    transform: translate(-50%, 0);
                }

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

        &[data-balloon-pos="down-left"] {
            &:after {
                left: 0;
                margin-top: $balloon-arrow-size + 5px;;
                top: 100%;
                transform: translate(0, calc(var(--balloon-move) * -1));
            }

            &:before {
                @include arrow-up();

                left: 5px;
                top: 100%;
                transform: translate(0, calc(var(--balloon-move) * -1));
            }

            &:hover, &[data-balloon-visible] {
                &:after {
                    transform: translate(0, 0);
                }

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

        &[data-balloon-pos="down-right"] {
            &:after {
                right: 0;
                margin-top: $balloon-arrow-size + 5px;;
                top: 100%;
                transform: translate(0, calc(var(--balloon-move) * -1));
            }

            &:before {
                @include arrow-up();

                right: 5px;
                top: 100%;
                transform: translate(0, calc(var(--balloon-move) * -1));
            }

            &:hover, &[data-balloon-visible] {
                &:after {
                    transform: translate(0, 0);
                }

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

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

            &:before {
                @include arrow-right();

                right: 100%;
                top: 50%;
                transform: translate(var(--balloon-move), -50%);
            }

            &:hover, &[data-balloon-visible] {
                &:after {
                    transform: translate(0, -50%);
                }

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

        }

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

                left: 100%;
                margin-left: $balloon-arrow-size + 5px;;
                top: 50%;
                transform: translate(calc(var(--balloon-move) * -1), -50%);
            }

            &:before {
                @include arrow-left();

                left: 100%;
                top: 50%;
                transform: translate(calc(var(--balloon-move) * -1), -50%);
            }

            &:hover, &[data-balloon-visible] {
                &:after {
                    transform: translate(0, -50%);
                }

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

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

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

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

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

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

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