@import '../default/var';

@mixin arrow() {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.#{$prefix} {
    &-tooltip {
        display: inline-block;
        position: relative;
        &__popper {
            position: absolute;
            border-radius: 4px;
            max-width: 500px;
            padding: 16px;
            color: $tooltip-color-fore;
            box-sizing: border-box;
            text-align: left;
            background-color: $tooltip-color-back;
            box-shadow: 0 2px 8px 0 $tooltip-color-shadow;
            z-index: 999;
            &[placement^=top] {
                margin-bottom: 12px;
            }
            &[x-placement^=bottom] {
                margin-top: 12px;
            }
            &[placement^=left] {
                margin-right: 12px;
            }
            &[x-placement^=right] {
                margin-left: 12px;
            }
            .popper__arrow {
                border-width: 6px;
                @include arrow();
                &:after {
                    content: "";
                    @include arrow();
                    border-width: 5px;
                }
                &[placement^=top] {
                    bottom: -6px;
                    border-bottom-width: 0;
                    border-top-color: $tooltip-color-arrow;
                    &:after {
                        bottom: 1px;
                        margin-left: -5px;
                        border-top-color: $tooltip-color-back;
                        border-bottom-width: 0;
                    }
                }
                &[placement^=bottom] {
                    top: -6px;
                    border-top-width: 0;
                    border-bottom-color: $tooltip-color-arrow;
                    &:after {
                        top: 1px;
                        margin-left: -5px;
                        border-top-width: 0;
                        border-bottom-color: $tooltip-color-back;
                    }
                }
                &[placement^=left] {
                    right: -6px;
                    border-right-width: 0;
                    border-left-color: $tooltip-color-arrow;
                    &:after {
                        right: 1px;
                        bottom: -5px;
                        margin-left: -5px;
                        border-right-width: 0;
                        border-left-color: $tooltip-color-back;
                    }
                }
                &[placement^=right] {
                    left: -6px;
                    border-left-width: 0;
                    border-right-color: $tooltip-color-back;
                    border-right-color: $tooltip-color-arrow;
                    &:after {
                        bottom: -5px;
                        left: 1px;
                        border-right-color: $tooltip-color-back;
                        border-left-width: 0;
                    }
                }
            }
        }
    }
}