/* Copyright (C) 2016 NooBaa */

.expandable {
    overflow: hidden;
    opacity: 0;
    transition: all 250ms linear;
    padding: 0;

    &.expanding, &.expanded {
        opacity: 1;
    }

    &.expanded {
        overflow: visible;
    }
}

.tooltip {
    @bg-color: rgb(var(--color15));
    @arrow-size: 14px;
    @arrow-offset: 10px;

    background: transparent;
    position: fixed;
    z-index: 999;
    animation: fade-in 400ms;
    max-width: 20em;
    color: rgb(var(--color02));

    .break-words > .tooltip-box > .tooltip-content {
        word-wrap: break-word;
        word-break: break-all;
    }

     > .tooltip-box {
        @shadow: 0px 0px 2px rgb(var(--shadow1));

        position: relative;
        padding: @gutter/2;
        margin: 0;
        font-size: @font-size1;
        background-color: @bg-color;
        text-align: left;
        box-shadow: @shadow;

        &::before, &::after {
            content: '';
            position: absolute;
            width:  @arrow-size;
            height:  @arrow-size;
            background: inherit;
            transform-origin: center;
            transform: rotate(45deg);
        }

        &::before {
            z-index: -1;
            box-shadow: @shadow;

        }

        > .tooltip-content {
            overflow-x: hidden;
            overflow-y: auto;
            max-height: 300px;

            &::-webkit-scrollbar-thumb  {
                border: 3px solid @bg-color;
            };
        }
    }

    &.above {
        padding-bottom: @arrow-size;

        > .tooltip-box{
            &::before, &::after {
                bottom: -(@arrow-size/2);
            }
        }

        &.left-pos {
            &.start {
                transform: translate(0, -100%);
            }

            &.center {
                transform: translate(-50%, -100%);
            }

            &.end {
                transform: translate(-100%, -100%);
            }
        }

        &.right-pos {
            &.start {
                transform: translate(100%, -100%);
            }

            &.center {
                transform: translate(50%, -100%);
            }

            &.end {
                transform: translate(0, -100%);
            }
        }
    }

    &.below {
        padding-top: @arrow-size;

        > .tooltip-box {
            &::before, &::after {
                top: -(@arrow-size/2);
            }
        }

        &.left-pos {
            &.start {
                transform: translate(0, 0);
            }

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

            &.end {
                transform: translate(-100%, 0);
            }
        }

        &.right-pos {
            &.start {
                transform: translate(100%, 0);
            }

            &.center {
                transform: translate(50%, 0);
            }

            &.end {
                transform: translate(0, 0);
            }
        }
    }

    &.before {
        padding-right: @arrow-size;

        > .tooltip-box {
            &::before, &::after {
                right: -(@arrow-size/2);
            }
        }


        &.start {
            transform: translate(-100%, 0);
        }

        &.center {
            transform: translate(-100%, -50%);
        }

        &.end {
            transform: translate(-100%, -100%);
        }
    }

    &.after {
        padding-left: @arrow-size;

        > .tooltip-box {
            &::before, &::after {
                left: -(@arrow-size/2);
            }
        }

        &.start {
            transform: translate(0, 0);
        }

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

        &.end {
            transform: translate(0, -100%);
        }
    }

    &.above, &.below {
        @offset: (@arrow-offset + (@arrow-size / 2));

        &.start {
            &.left-pos {
                margin-left: -@offset;
            }

            &.right-pos {
                margin-right: @offset;
            }

            > .tooltip-box {
                &::before, &::after {
                    left: @arrow-offset;
                }
            }
        }

        &.center {
            > .tooltip-box {
                &::before, &::after {
                    left: 50%;
                    margin-left: -@arrow-size/2;
                }
            }
        }

        &.end {
            &.left-pos {
                margin-left: @offset;
            }

            &.right-pos {
                margin-right: -@offset;
            }

            > .tooltip-box {
                &::before, &::after {
                    right: @arrow-offset;
                }
            }
        }
    }

    &.before, &.after {
        &.start {
            margin-top: -(@arrow-offset + (@arrow-size / 2));

            > .tooltip-box {
                &::before, &::after {
                    top: @arrow-offset;
                }
            }
        }

        &.center > .tooltip-box{
            &::before, &::after {
                top: 50%;
                margin-top: -@arrow-size/2;
            }
        }

        &.end {
            margin-top: @arrow-offset + (@arrow-size / 2);

             > .tooltip-box {
                &::before, &::after {
                    bottom: @arrow-offset;
                }
            }
        }
    }

    /* Tooltip templates styles */
    svg-icon {
        fill: rgb(var(--color02));
    }

    .highlight {
        color: rgb(var(--color02));
    }

    .prop-sheet .prop-name {
        color: rgb(var(--color02));
        width: 110px;
    }

    chart-legend {
        color: rgb(var(--color02));
    }


}
