.scrollbar() {
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: #e1e5f5;
    }
    &::-webkit-scrollbar-track {
        border-radius: 3px;
    }
}


.popper-arrow(@arrow, @arrow-width, @distance, @bg, @shadow: false){


    .@{arrow} {
        border-width: ~'@{arrow-width}px';
        box-sizing: border-box;
        position: absolute;
        width: @arrow-width * 2px;
        height: @arrow-width * 2px;
        border-color: @bg;
        border-style: solid;
        border-radius: 2px;
        transform: rotate(45deg);
    }

    &[x-placement^="top"] {
        padding-bottom: 8px;

        .@{arrow} {
            bottom:@distance * -1px;
            border-top-color: transparent;
            border-left-color: transparent;
        }
    }

    &[x-placement^="top"] .@{arrow} when(@shadow) {
        box-shadow: 3px 3px 7px rgba(0,0,0,0.07);
    }


    // &[x-placement="top"],
    // &[x-placement="bottom"] {
    //     .@{arrow} {
    //         left: 50%;
    //         margin-left: -5px;
    //     }
    // }

    &[x-placement="top-start"],
    &[x-placement="bottom-start"] {
        .@{arrow} {
            transform: translateX(@distance * -1px) rotate(45deg) ;
        }
    }
    
    &[x-placement="top-end"],
    &[x-placement="bottom-end"] {
        .@{arrow} {
            transform: translateX(@distance * 1px) rotate(45deg) ;
        }
    }

    &[x-placement^="bottom"] {
        // padding-top: 8px;

        .@{arrow} {
            top:@distance * -1px;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
    }


    &[x-placement^="bottom"] .@{arrow} when(@shadow) {
        box-shadow: -3px -3px 5px rgba(0,0,0,0.06);
    }


    &[x-placement^="right"] {
        padding-left: 5px;
        .@{arrow} {
            left:@distance * -1px;
            border-right-color: transparent;
            border-top-color: transparent;
        }
    }


    &[x-placement^="right"] .@{arrow}  when(@shadow) {
        box-shadow: -3px 3px 7px rgba(0,0,0,0.07);
    }

    // &[x-placement="right"],
    // &[x-placement="left"] {
    //     .@{arrow} {
    //         //  top: 50%;
    //         // margin-top: -5px;
    //     }
    // }

    &[x-placement="right-start"],
    &[x-placement="left-start"] {
        .@{arrow} {
            transform: translateY(@distance * -1px) rotate(45deg) ;
        }
    }

    &[x-placement="right-end"],
    &[x-placement="left-end"] {
        .@{arrow} {
            // bottom: 8px;
            transform: translateY(@distance * 1px) rotate(45deg) ;
        }
    }

    &[x-placement^="left"] {
        padding-right: 5px;
        .@{arrow} {
            right:@distance * -1px;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
    }

    &[x-placement^="left"] .@{arrow} when(@shadow) {
        box-shadow: 3px -3px 7px rgba(0,0,0,0.07);
    }
}