@import "./base/var";
@import "./mixins/index.scss";

@include c(tooltip) {
    display: inline-block;

    @include e(target, false) {
        display: block;
        position: relative;
    }

    @include e(arrow) {
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        border-color: transparent;
    }

    @include e(popper) {
        display: inline-block;
        z-index: $--popover-z-index;
        color: $--color-white;


        @include e(content) {
            position: relative;
        }

        //&[x-placement^="top"], &[x-placement^="bottom"] {
        //  padding: 10px 0;
        //}
        //&[x-placement^="left"], &[x-placement^="right"] {
        //  padding: 0 10px;
        //}

        &[x-placement^="top"] {
            @include e(arrow, false) {
                bottom: 0;
                transform: translateY(100%);
                border-width: $--popover-arrow-border-width $--popover-arrow-border-width 0;
                border-top-color: $--tooltip-background-color-default;
            }
        }

        &[x-placement^="bottom"] {
            @include e(arrow, false) {
                top: 0;
                transform: translateY(-100%);
                border-width: 0 $--popover-arrow-border-width $--popover-arrow-border-width;
                border-bottom-color: $--tooltip-background-color-default;
            }
        }

        &[x-placement="top"], &[x-placement="bottom"] {
            @include e(arrow, false) {
                left: 50%;
                margin-left: -$--popover-arrow-border-width;
            }
        }

        &[x-placement="top-start"], &[x-placement="bottom-start"] {
            @include e(arrow, false) {
                left: #{$--popover-arrow-border-width * 2};
            }
        }

        &[x-placement="top-end"], &[x-placement="bottom-end"] {
            @include e(arrow, false) {
                right: #{$--popover-arrow-border-width * 2};
            }
        }

        &[x-placement^="left"] {
            @include e(arrow, false) {
                right: 0;
                transform: translateX(100%);
                border-width: $--popover-arrow-border-width 0 $--popover-arrow-border-width $--popover-arrow-border-width;
                border-left-color: $--tooltip-background-color-default;
            }
        }

        &[x-placement^="right"] {
            @include e(arrow, false) {
                left: 0;
                transform: translateX(-100%);
                border-width: $--popover-arrow-border-width $--popover-arrow-border-width $--popover-arrow-border-width 0;
                border-right-color: $--tooltip-background-color-default;
            }
        }

        &[x-placement="left"], &[x-placement="right"] {
            @include e(arrow, false) {
                top: 50%;
                margin-top: -$--popover-arrow-border-width;
            }
        }

        &[x-placement="left-start"], &[x-placement="right-start"] {
            @include e(arrow, false) {
                top: $--popover-arrow-border-width;
            }
        }

        &[x-placement="left-end"], &[x-placement="right-end"] {
            @include e(arrow, false) {
                bottom: $--popover-arrow-border-width;
            }
        }

    }


    @include e(inner) {
        padding: 5px 10px;
        overflow: hidden;
        text-align: left;
        box-sizing: border-box;
        box-shadow: $--tooltip-box-shadow;
        border-radius: $--border-radius-default;
        background-color: $--tooltip-background-color-default;
    }
}
