@keyframes fIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.5;
    }
}

.entryTooltipBG {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9990;
    top: 0;
    left: 0;
    cursor: pointer;
    animation-name: fIn;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}

@keyframes stretch {
    0% {
        opacity: 0;
        transform: translate(0, -10px);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.entryTooltipWrapper {
    position: absolute;
    z-index: 9999;
    animation-name: stretch;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    .transition(opacity 0.4s ease-in-out);
}

.hideTooltip > .entryTooltipWrapper {
    opacity: 0;
}

@balloon-arrow-width: 25px;
@balloon-arrow-height: 11px;

.mixin-svg-arrow(@width, @height, @degrees) {
    @svg-arrow: ~'<svg xmlns="http://www.w3.org/2000/svg" width="@{width}" height="@{height}"><path fill="@{color}" transform="rotate(@{degrees})" d="M0,0 l10,10 c2.5 1.5 2.5 1.5 5 0 l10,-10 Z"/></svg>';
    @-svg-code: escape(~'@{svg-arrow}');
    background: url('data:image/svg+xml;charset=utf-8,@{-svg-code}') no-repeat;
    background-size: 100% auto;
    height: @height;
    width: @width;
}

.svg-arrow(@color, @position) {
    & when (@position = down) {
        @width: @balloon-arrow-width;
        @height: @balloon-arrow-height;
        @degrees: 180 12.5 5.5;
        .mixin-svg-arrow(@width, @height, @degrees);
    }
    & when (@position = up) {
        @width: @balloon-arrow-width;
        @height: @balloon-arrow-height;
        @degrees: 0;
        .mixin-svg-arrow(@width, @height, @degrees);
    }
    & when (@position = right) {
        @width: @balloon-arrow-height;
        @height: @balloon-arrow-width;
        @degrees: 90 5.5 5.5;
        .mixin-svg-arrow(@width, @height, @degrees);
    }
    & when (@position = left) {
        @width: @balloon-arrow-height;
        @height: @balloon-arrow-width;
        @degrees: -90 12.5 12.5;
        .mixin-svg-arrow(@width, @height, @degrees);
    }
}

.entryTooltip {
    position: absolute;
    white-space: nowrap;
    padding: 25px;
    background-color: #ffffff;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-family: EntryFont, NanumGothic;
    color: #3b3b3b;
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.19);
    &:before {
        position: absolute;
        content: '';
    }
}

.entryTooltip.up {
    .transform(translate(-50%, -100%));
    margin-top: -11px;
    &:before {
        .svg-arrow('#FFF', up);
        top: 100%;
        left: 50%;
        margin-left: -@balloon-arrow-width * 0.5;
    }
}

.entryTooltip.down {
    margin-top: 11px;
    .transform(translate(-50%, 0));
    &:before {
        .svg-arrow('#FFF', down);
        top: -@balloon-arrow-height;
        left: 50%;
        margin-left: -@balloon-arrow-width * 0.5;
    }
}

.entryTooltip.left {
    margin-left: -11px;
    .transform(translate(-100%, -50%));
    &:before {
        .svg-arrow('#FFF', left);
        left: 100%;
        margin-left: -1px;
        top: 50%;
        margin-top: -@balloon-arrow-width * 0.5;
    }
}

.entryTooltip.right {
    margin-left: 11px;
    .transform(translate(0, -50%));
    &:before {
        .svg-arrow('#FFF', right);
        top: 50%;
        left: -@balloon-arrow-height;
        margin-top: -@balloon-arrow-width * 0.5;
    }
}

@keyframes IndicatorPop {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    75% {
        opacity: 0;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

.entryTooltipIndicator {
    position: absolute;
    padding-top: 25px;
}

.entryTooltipIndicator > div {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    margin: -100% -50%;
    border-radius: 100%;
    position: relative;
    z-index: 9999;
    animation-name: IndicatorPop;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    transform: scale(0);
}

.entryTooltipIndicator > div:nth-child(2) {
    animation-delay: 0.3s;
}

.entryTooltipIndicator > div:nth-child(3) {
    animation-delay: 0.6s;
}

//special

.entryTooltip.left.edge_up {
    .transform(translate(-100%, -25px));
    &:before {
        top: 25px;
    }
}

.entryTooltip.left.edge_down {
    .transform(translate(-100%, -100%));
    margin-top: 25px;
    &:before {
        top: 100%;
        margin-top: -37.5px;
    }
}

.entryTooltip.right.edge_up {
    .transform(translate(0, -25px));
    &:before {
        top: 25px;
    }
}

.entryTooltip.right.edge_down {
    .transform(translate(0, -100%));
    margin-top: 25px;
    &:before {
        top: 100%;
        margin-top: -37.5px;
    }
}

.entryTooltip.up.edge_left {
    .transform(translate(-25px, -100%));
    &:before {
        left: 25px;
    }
}

.entryTooltip.up.edge_right {
    .transform(translate(-100%, -100%));
    margin-left: 25px;
    &:before {
        left: 100%;
        margin-left: -37.5px;
    }
}

.entryTooltip.down.edge_left {
    .transform(translate(-25px, 0));
    &:before {
        left: 25px;
    }
}

.entryTooltip.down.edge_right {
    left: 0;
    margin-left: 25px;
    .transform(translate(-100%, 0));
    &:before {
        left: 100%;
        margin-left: -37.5px;
    }
}