// (C) 2007-2021 GoodData Corporation
@import "mixins";

/* ==========================================================================
   Bubble
   ========================================================================== */

.bubbleArrowShift {
    width: 7px;
    height: 12px;
}

// TODO: rename after removing of silver theme
.inlineBubbleHelp {
    display: inline-block;
    font: 14px/1 "Indigo", sans-serif;
    vertical-align: middle;
    color: $bubble-help-color;

    &::before {
        content: "\E60B"; // icon-circle-question
    }

    @include active-states-and-self {
        text-decoration: none;
    }

    @include active-states {
        color: $bubble-help-color-hover;
        cursor: help;
    }
}

.bubble {
    position: absolute;
    max-width: $bubble-max-width;

    @include transition(opacity, 0.2s, ease-in-out);

    &.bubble-small {
        max-width: $bubble-small-max-width;
    }

    &.gd-bubble {
        position: relative;
    }

    &.isActive {
        opacity: 1;
    }

    .helper {
        position: absolute;
        background: white;

        @include opacity(0.01);
    }

    .bubble-content {
        position: relative;
        overflow: visible;
        padding: 7px 10px;
        border-radius: 3px;

        .content {
            display: block;
            overflow: hidden;
            max-width: 100%;
            word-wrap: break-word;

            a {
                color: $gd-color-text-light;
                opacity: 0.8;
                text-decoration: underline;

                @include transition(all, 0.25s, ease-in-out);

                // refactor
                // stylelint-disable-next-line max-nesting-depth
                &:hover {
                    opacity: 1;
                }
            }

            &,
            p,
            a {
                font: 400 12px/18px $gd-font-primary;
            }

            p {
                margin: 0;
            }

            p + p {
                margin-top: 0.5em;
            }
        }
    }

    @each $skin in $bubble-skins {
        $bubble-borderWidth: $bubble-primary-borderWidth;
        $bubble-color: $bubble-primary-color;
        $bubble-borderColor: $bubble-primary-borderColor;
        $bubble-arrowColor: $bubble-primary-arrowColor;
        $bubble-arrowBorderColor: $bubble-primary-arrowBorderColor;
        $bubble-bgcolor: $bubble-primary-bgcolor;

        @if $skin == negative {
            $bubble-borderWidth: $bubble-negative-borderWidth;
            $bubble-color: $bubble-negative-color;
            $bubble-borderColor: $bubble-negative-borderColor;
            $bubble-arrowColor: $bubble-negative-arrowColor;
            $bubble-arrowBorderColor: $bubble-negative-arrowBorderColor;
            $bubble-bgcolor: $bubble-negative-bgcolor;
        } @else if $skin == secondary {
            $bubble-borderWidth: $bubble-secondary-borderWidth;
            $bubble-color: $bubble-secondary-color;
            $bubble-borderColor: $bubble-secondary-borderColor;
            $bubble-arrowColor: $bubble-secondary-arrowColor;
            $bubble-arrowBorderColor: $bubble-secondary-arrowBorderColor;
            $bubble-bgcolor: $bubble-secondary-bgcolor;
        } @else if $skin == light {
            $bubble-borderWidth: $bubble-light-borderWidth;
            $bubble-color: $bubble-light-color;
            $bubble-borderColor: $bubble-light-borderColor;
            $bubble-arrowColor: $bubble-light-arrowColor;
            $bubble-arrowBorderColor: $bubble-light-arrowBorderColor;
            $bubble-bgcolor: $bubble-light-bgcolor;
        }

        &.bubble-#{$skin} {
            padding: 0;
            border-radius: 3px;
            border-style: solid;
            border-width: $bubble-borderWidth;
            border-color: $bubble-borderColor;

            @include box-shadow($bubble-boxShadow);
        }

        // do not wanna to touch it
        // stylelint-disable-next-line no-duplicate-selectors
        &.bubble-#{$skin} {
            @if $bubble-borderWidth == 0 {
                // refactor
                // stylelint-disable-next-line max-nesting-depth
                .arrow-border {
                    display: none;
                }
            }
        }

        // do not wanna to touch it
        // stylelint-disable-next-line no-duplicate-selectors
        &.bubble-#{$skin} {
            color: $bubble-color;
            background: $bubble-bgcolor;

            .arrow-border,
            .arrow {
                border-color: transparent;
            }
        }

        &.bubble-#{$skin}.arrow-bottom-direction {
            .arrow-border {
                border-top-color: $bubble-arrowBorderColor;
            }

            .arrow {
                border-top-color: $bubble-arrowColor;
            }
        }

        &.bubble-#{$skin}.arrow-top-direction {
            .arrow-border {
                border-bottom-color: $bubble-arrowBorderColor;
            }

            .arrow {
                border-bottom-color: $bubble-arrowColor;
            }
        }

        &.bubble-#{$skin}.arrow-left-direction {
            .arrow-border {
                border-right-color: $bubble-arrowBorderColor;
            }

            .arrow {
                border-right-color: $bubble-arrowColor;
            }
        }

        &.bubble-#{$skin}.arrow-right-direction {
            .arrow-border {
                border-left-color: $bubble-arrowBorderColor;
            }

            .arrow {
                border-left-color: $bubble-arrowColor;
            }
        }
    }
    // end of for
    .arrow-position,
    .arrow-border,
    .arrow {
        position: absolute;
        z-index: 2;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 7px;
    }

    .arrow-position {
        border-width: 0;
    }

    .arrow {
        z-index: 4;
        border-width: 6px;
    }

    &.arrow-top-direction,
    &.arrow-bottom-direction {
        .arrow-position {
            margin: 0 12px;
        }

        .arrow {
            left: -6px;
        }

        .arrow-border {
            top: 1px;
            left: -7px;
        }

        .helper {
            right: 0;
            left: 0;
            height: $bubble-helper-size;
        }

        &.arrow-tl,
        &.arrow-bl {
            .arrow-position {
                left: 0;
            }
        }

        &.arrow-tr,
        &.arrow-br {
            .arrow-position {
                right: 0;
            }
        }

        &.arrow-tc,
        &.arrow-bc {
            .arrow-position {
                right: 0;
                left: 0;
                margin: 0 auto;
            }
        }
    }

    &.arrow-top-direction {
        .arrow-position {
            top: -15px;
        }

        .arrow {
            top: 3px;
        }

        .helper {
            top: -$bubble-helper-size;
        }
    }

    &.arrow-bottom-direction {
        .arrow-position {
            bottom: 0;
        }

        .arrow-border {
            top: 0;
        }

        .helper {
            bottom: -$bubble-helper-size;
        }
    }

    &.arrow-left-direction,
    &.arrow-right-direction {
        .arrow-position {
            margin: 10px 0;
        }

        .arrow {
            top: -5px;
        }

        .arrow-border {
            top: -6px;
            left: 2px;
        }

        .helper {
            top: 0;
            bottom: 0;
            width: $bubble-helper-size;
        }

        &.arrow-tl,
        &.arrow-tr {
            .arrow-position {
                top: 0;
            }
        }

        &.arrow-bl,
        &.arrow-br {
            .arrow-position {
                bottom: 3px;
            }
        }

        &.arrow-cl,
        &.arrow-cr {
            .arrow-position {
                top: 0;
                bottom: 0;
                margin: auto 0;
            }
        }
    }

    &.arrow-left-direction {
        .arrow-position {
            left: -16px;
        }

        .arrow {
            left: 4px;
        }

        .helper {
            left: -$bubble-helper-size;
        }
    }

    &.arrow-right-direction {
        .arrow-position {
            right: 0;
        }

        .arrow-border {
            left: 0;
        }

        .helper {
            right: -$bubble-helper-size;
        }
    }

    &.arrow-none .arrow-position {
        display: none;
    }
}

.gecko .bubble-chart,
.chrome .bubble-chart,
.safari .bubble-chart {
    @include opacity(0);
}

.gecko .bubble-anim,
.chrome .bubble-anim,
.safari .bubble-anim {
    @include opacity(1);
    @include transition((opacity, transform), 0.2s, ease-in-out);
}

.gecko .bubble-anim.yui3-overlay-hidden,
.chrome .bubble-anim.yui3-overlay-hidden,
.safari .bubble-anim.yui3-overlay-hidden {
    // overwrite
    // stylelint-disable-next-line declaration-no-important
    visibility: visible !important;
    -moz-transition-duration: 0s;

    @include opacity(0);
}

.bubble-none {
    display: none;
}