@use '../styles/bootstrap/mixins/border-radius';
@use '../styles/bootstrap/mixins/reset-text';
@use '../styles/variables';

.thy-tooltip {
    // position: absolute;
    display: block;
    // margin: $tooltip-margin;
    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
    // So reset our font and text properties to avoid inheriting weird values.
    @include reset-text.reset-text();
    font-size: variables.$tooltip-font-size;
    // Allow breaking very long words so they don't overflow the tooltip's bounds
    word-wrap: break-word;
    // opacity: 0;

    &.show {
        opacity: variables.$tooltip-opacity;
    }

    .thy-tooltip-arrow {
        position: absolute;
        display: block;
        width: variables.$tooltip-arrow-width;
        height: variables.$tooltip-arrow-height;

        &::before {
            position: absolute;
            content: '';
            border-color: transparent;
            border-style: solid;
        }
    }
}

// 不是居中的偏移量，比如 topLeft, arrow 居左的偏移量, topRight, arrow 居右的偏移量，
$tooltip-un-center-arrow-offset: 16px;

@mixin tooltip-top-bottom($placement, $main, $opposite) {
    .thy-tooltip-#{$placement} {
        padding-#{$opposite}: variables.$tooltip-arrow-height;

        .thy-tooltip-arrow {
            #{$opposite}: -(variables.$tooltip-arrow-height);
            @content;
            &::before {
                #{$main}: 0;
                @if $main == 'top' {
                    border-width: variables.$tooltip-arrow-height (variables.$tooltip-arrow-width * 0.5) 0;
                } @else {
                    border-width: 0 (variables.$tooltip-arrow-width * 0.5) variables.$tooltip-arrow-height;
                }
                border-#{$main}-color: variables.$tooltip-arrow-color;
            }
        }
    }
}

@include tooltip-top-bottom('top', 'top', 'bottom') {
    left: calc(100% / 2 - #{variables.$tooltip-arrow-width * 0.5});
}
@include tooltip-top-bottom('topLeft', 'top', 'bottom') {
    left: $tooltip-un-center-arrow-offset;
}
@include tooltip-top-bottom('topRight', 'top', 'bottom') {
    right: $tooltip-un-center-arrow-offset;
}

@include tooltip-top-bottom('bottom', 'bottom', 'top') {
    left: calc(100% / 2 - #{variables.$tooltip-arrow-width * 0.5});
}
@include tooltip-top-bottom('bottomLeft', 'bottom', 'top') {
    left: $tooltip-un-center-arrow-offset;
}
@include tooltip-top-bottom('bottomRight', 'bottom', 'top') {
    right: $tooltip-un-center-arrow-offset;
}

@mixin tooltip-left-right($placement, $main, $opposite) {
    .thy-tooltip-#{$placement} {
        padding-#{$opposite}: variables.$tooltip-arrow-height;

        .thy-tooltip-arrow {
            #{$opposite}: -(variables.$tooltip-arrow-height);
            width: variables.$tooltip-arrow-height;
            height: variables.$tooltip-arrow-width;
            @content;
            &::before {
                #{$main}: 0;
                @if $main == 'left' {
                    border-width: (variables.$tooltip-arrow-width * 0.5)
                        0
                        (variables.$tooltip-arrow-width * 0.5)
                        variables.$tooltip-arrow-height;
                } @else {
                    border-width: (variables.$tooltip-arrow-width * 0.5)
                        variables.$tooltip-arrow-height
                        (variables.$tooltip-arrow-width * 0.5)
                        0;
                }
                border-#{$main}-color: variables.$tooltip-arrow-color;
            }
        }
    }
}

@include tooltip-left-right('left', 'left', 'right') {
    top: calc(100% / 2 - #{variables.$tooltip-arrow-width * 0.5});
}
@include tooltip-left-right('leftTop', 'left', 'right') {
    top: $tooltip-un-center-arrow-offset;
}
@include tooltip-left-right('leftBottom', 'left', 'right') {
    bottom: $tooltip-un-center-arrow-offset;
}

@include tooltip-left-right('right', 'right', 'left') {
    top: calc(100% / 2 - #{variables.$tooltip-arrow-width * 0.5});
}
@include tooltip-left-right('rightTop', 'right', 'left') {
    top: $tooltip-un-center-arrow-offset;
}
@include tooltip-left-right('rightBottom', 'right', 'left') {
    bottom: $tooltip-un-center-arrow-offset;
}

.thy-tooltip-auto {
    &[x-placement^='top'] {
        @extend .thy-tooltip-top;
    }
    &[x-placement^='right'] {
        @extend .thy-tooltip-right;
    }
    &[x-placement^='bottom'] {
        @extend .thy-tooltip-bottom;
    }
    &[x-placement^='left'] {
        @extend .thy-tooltip-left;
    }
}

// Wrapper for the tooltip content
.thy-tooltip-content {
    max-width: variables.$tooltip-max-width;
    padding: variables.$tooltip-padding-y variables.$tooltip-padding-x;
    color: variables.$tooltip-color;
    text-align: left;
    background-color: variables.$tooltip-bg;
    box-shadow: variables.$tooltip-box-shadow;
    min-height: variables.$tooltip-content-min-height;

    @include border-radius.border-radius(variables.$tooltip-border-radius);
}
