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

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

    @include e(target) {
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }

    @include e(arrow) {
        width: 0;
        height: 0;
        position: absolute;
        border-color: transparent;
        border-style: solid;
        border-width: #{$--popover-arrow-border-width + 1px};
        &::after {
            content: ' ';
            width: 0;
            height: 0;
            position: absolute;
            border-color: transparent;
            border-style: solid;
            border-width: $--popover-arrow-border-width;
        }
    }

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

        @include e(content) {
            position: relative;
            text-align: left;
            box-sizing: border-box;
        }

        &[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: -#{$--popover-arrow-border-width + 1px};
                border-top-color: $--border-color-default;
                border-width: $--popover-arrow-border-width $--popover-arrow-border-width 0;
                &::after {
                    bottom: 1px;
                    margin-left: -$--popover-arrow-border-width;
                    border-bottom-width: 0;
                    border-top-width: $--popover-arrow-border-width;
                    border-top-color: $--color-white;
                }
            }
        }

        &[x-placement^="bottom"] {
            @include e(arrow, false) {
                top: -#{$--popover-arrow-border-width + 1px};
                border-bottom-color: $--border-color-default;
                border-width: 0 $--popover-arrow-border-width $--popover-arrow-border-width;
                &::after {
                    top: 1px;
                    margin-left: -$--popover-arrow-border-width;
                    border-top-width: 0;
                    border-bottom-width: $--popover-arrow-border-width;
                    border-bottom-color: $--color-white;
                }
            }
        }

        &[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: 16px;
            }
        }

        &[x-placement="top-end"], &[x-placement="bottom-end"] {
            @include e(arrow, false) {
                right: 16px;
            }
        }

        &[x-placement^="left"] {
            @include e(arrow, false) {
                right: -#{$--popover-arrow-border-width + 1px};
                border-left-color: $--border-color-default;
                border-width: #{$--popover-arrow-border-width + 1px} 0 #{$--popover-arrow-border-width + 1px} #{$--popover-arrow-border-width + 1px};
                &::after {
                    right: 1px;
                    margin-top: -$--popover-arrow-border-width;
                    border-right-width: 0;
                    border-left-width: $--popover-arrow-border-width;
                    border-left-color: $--color-white;
                }
            }
        }

        &[x-placement^="right"] {
            @include e(arrow, false) {
                left: -#{$--popover-arrow-border-width + 1px};
                border-right-color: $--border-color-default;
                border-width: #{$--popover-arrow-border-width + 1px} #{$--popover-arrow-border-width + 1px} #{$--popover-arrow-border-width + 1px} 0;
                &::after {
                    left: 1px;
                    margin-top: -$--popover-arrow-border-width;
                    border-left-width: 0;
                    border-right-width: $--popover-arrow-border-width;
                    border-right-color: $--color-white;
                }
            }
        }

        &[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: 7px;
            }
        }

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

    }


    @include e(inner) {
        border-radius: $--border-radius-default;
        box-shadow: $--box-shadow-default;
        background-color: $--color-white;
        min-width: $--popover-min-width;
        @include e(title, false) {
            padding: 8px 16px;
            font-weight: 500;
            border-bottom: $--border-default;
            font-size: $--font-size-title;
            color: $--color-text-title;
        }

        @include e(body, false) {
            padding: 8px 16px;
            white-space: nowrap;
        }
        @include e(body-wrap, false) {
            word-break: break-all;
            word-wrap: break-word;
            white-space: normal;
            overflow: hidden;
        }
    }

    @include e(confirm) {
        @include e(title, false) {
            border: none;
            font-size: 12px;
            padding-top: 16px;
            i {
                color: $--color-warning;
                font-size: 14px;
                margin-right: 5px;
            }
        }

        @include e(body, false) {
            text-align: right;
            padding-bottom: 16px;
        }
    }
}
