[data-popover]+[popover]{--arrow-width:8px;--arrow-height:16px;--border-width:1px;--border-color:#e5e6e8;--bg-color:#fff;animation:data-popover-fade-in .15s ease-in-out;background:var(--bg-color);border:var(--border-width) solid var(--border-color);border-radius:5px;box-shadow:0 4px 16px rgba(0,0,0,.12);left:0;margin:0;overflow:visible;padding:.7rem;pointer-events:auto;position:absolute;top:0;z-index:1000;&:after,&:before{content:"";pointer-events:none;position:absolute}&[data-popover-loc=r],&[data-popover-loc=re],&[data-popover-loc=rs]{&:before{background:var(--border-color);transform:translateY(-50%)}&:after,&:before{clip-path:polygon(100% 0,0 50%,100% 100%);height:var(--arrow-height);right:100%;top:50%;width:var(--arrow-width)}&:after{background:var(--bg-color);transform:translateY(-50%) translateX(var(--border-width))}}&[data-popover-loc=rs]{&:before{transform:translateY(0)}&:after,&:before{top:var(--arrow-width)}&:after{transform:translateY(0) translateX(var(--border-width))}}&[data-popover-loc=re]{&:before{transform:translateY(-100%)}&:after,&:before{top:calc(100% - var(--arrow-width))}&:after{transform:translateY(-100%) translateX(var(--border-width))}}&[data-popover-loc=l],&[data-popover-loc=le],&[data-popover-loc=ls]{&:before{background:var(--border-color);transform:translateY(-50%)}&:after,&:before{clip-path:polygon(0 0,100% 50%,0 100%);height:var(--arrow-height);left:100%;top:50%;width:var(--arrow-width)}&:after{background:var(--bg-color);transform:translateY(-50%) translateX(calc(var(--border-width)*-1))}}&[data-popover-loc=ls]{&:before{transform:translateY(0)}&:after,&:before{top:var(--arrow-width)}&:after{transform:translateY(0) translateX(calc(var(--border-width)*-1))}}&[data-popover-loc=le]{&:before{transform:translateY(-100%)}&:after,&:before{top:calc(100% - var(--arrow-width))}&:after{transform:translateY(-100%) translateX(calc(var(--border-width)*-1))}}&[data-popover-loc=b],&[data-popover-loc=be],&[data-popover-loc=bs]{&:before{background:var(--border-color);transform:translateX(-50%)}&:after,&:before{bottom:100%;clip-path:polygon(0 100%,100% 100%,50% 0);height:var(--arrow-width);left:50%;width:var(--arrow-height)}&:after{background:var(--bg-color);transform:translateX(-50%) translateY(var(--border-width))}}&[data-popover-loc=bs]{&:before{transform:translateX(0)}&:after,&:before{left:var(--arrow-height)}&:after{transform:translateX(0) translateY(var(--border-width))}}&[data-popover-loc=be]{&:before{transform:translateX(-100%)}&:after,&:before{left:calc(100% - var(--arrow-height))}&:after{transform:translateX(-100%) translateY(var(--border-width))}}&[data-popover-loc=t],&[data-popover-loc=te],&[data-popover-loc=ts]{&:before{background:var(--border-color);transform:translateX(-50%)}&:after,&:before{clip-path:polygon(0 0,100% 0,50% 100%);height:var(--arrow-width);left:50%;top:100%;width:var(--arrow-height)}&:after{background:var(--bg-color);transform:translateX(-50%) translateY(calc(var(--border-width)*-1))}}&[data-popover-loc=ts]{&:before{transform:translateX(0)}&:after,&:before{left:var(--arrow-height)}&:after{transform:translateX(0) translateY(calc(var(--border-width)*-1))}}&[data-popover-loc=te]{&:before{transform:translateX(-100%)}&:after,&:before{left:calc(100% - var(--arrow-height))}&:after{transform:translateX(-100%) translateY(calc(var(--border-width)*-1))}}}@keyframes data-popover-fade-in{0%{opacity:0}to{opacity:1}}