.popover__content {
    box-shadow:
        0 6px 16px 0 rgba(0, 0, 0, 0.08),
        0 3px 6px -4px rgba(0, 0, 0, 0.12),
        0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
.popover__arrow,
.popover__arrow::before {
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    z-index: -1;
}

.popover__arrow::before {
    content: "";
    transform: rotate(45deg);
    top: 0;
    left: 0;
    background-color:var(--cn-bg-design-thick-0);backdrop-filter:var(--cn-bg-design-thick-1);border:var(--cn-bg-design-thick-2);
}

.popover__arrow::before {
    transition:
        transform 0.2s ease-out,
        visibility 0.2s ease-out;
    visibility: visible;
    transform: translateX(0px) rotate(45deg);
    transform-origin: center;
}
[data-popper-placement^="top"] > .popover__arrow {
    bottom: -0.2rem;
}

[data-popper-placement^="bottom"] > .popover__arrow {
    top: -0.2rem;
}

[data-popper-placement^="left"] > .popover__arrow {
    right: -0.2rem;
}

[data-popper-placement^="right"] > .popover__arrow {
    left: -0.2rem;
}