.o-ui {
    --o-ui-overlay-border-offset: 0;
    --o-ui-overlay-arrow-border-color: var(--o-ui-alias-border-2);
}

.o-ui-overlay {
    outline: none;
    width: fit-content;
    height: fit-content;
}

/* ARROW */
.o-ui-overlay-arrow,
.o-ui-overlay-arrow::before {
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: 1;
}

.o-ui-overlay-arrow::before {
    content: "";
    transform: rotate(45deg);
    background: var(--o-ui-alias-background-1);
}

/* ARROW | POSITION */
.o-ui-overlay[data-popper-placement^="top"] > .o-ui-overlay-arrow {
    bottom: calc(-1 * var(--o-ui-global-scale-alpha) - 1px);
}

.o-ui-overlay[data-popper-placement^="bottom"] > .o-ui-overlay-arrow {
    top: calc(-1 * var(--o-ui-global-scale-alpha) - 1px);
}

.o-ui-overlay[data-popper-placement^="left"] > .o-ui-overlay-arrow {
    right: calc(-1 * var(--o-ui-global-scale-alpha) - 1px);
}

.o-ui-overlay[data-popper-placement^="right"] > .o-ui-overlay-arrow {
    left: calc(-1 * var(--o-ui-global-scale-alpha) - 1px);
}

/* ARROW | BORDER */
/* BOTTOM ARROW */
.o-ui-overlay[data-popper-placement^="bottom"] .o-ui-overlay-arrow::before {
    border-top: 1px solid var(--o-ui-overlay-arrow-border-color);
    border-left: 1px solid var(--o-ui-overlay-arrow-border-color);
}

/* TOP ARROW */
.o-ui-overlay[data-popper-placement^="top"] .o-ui-overlay-arrow::before {
    border-bottom: 1px solid var(--o-ui-overlay-arrow-border-color);
    border-right: 1px solid var(--o-ui-overlay-arrow-border-color);
}

/* RIGHT ARROW */
.o-ui-overlay[data-popper-placement^="right"] .o-ui-overlay-arrow::before {
    border-bottom: 1px solid var(--o-ui-overlay-arrow-border-color);
    border-left: 1px solid var(--o-ui-overlay-arrow-border-color);
}

/* LEFT ARROW */
.o-ui-overlay[data-popper-placement^="left"] .o-ui-overlay-arrow::before {
    border-top: 1px solid var(--o-ui-overlay-arrow-border-color);
    border-right: 1px solid var(--o-ui-overlay-arrow-border-color);
}

/* BORDER OFFSET */
.o-ui-overlay-has-border-offset[data-popper-placement^="top"] {
    border-bottom: var(--o-ui-overlay-border-offset) solid transparent;
}

.o-ui-overlay-has-border-offset[data-popper-placement^="bottom"] {
    border-top: var(--o-ui-overlay-border-offset) solid transparent;
}

.o-ui-overlay-has-border-offset[data-popper-placement^="left"] {
    border-right: var(--o-ui-overlay-border-offset) solid transparent;
}

.o-ui-overlay-has-border-offset[data-popper-placement^="right"] {
    border-left: var(--o-ui-overlay-border-offset) solid transparent;
}

/* STATE | FOCUS */
.o-ui-overlay-focus-ring:focus-visible,
.o-ui-overlay-focus-ring-focus {
    outline: none;
}

.o-ui-overlay-focus-ring::before {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: var(--o-ui-shape-rounded);
    border: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-focus-ring-color);
    opacity: 0;
}

.o-ui-overlay-focus-ring:focus-visible::before {
    opacity: 1;
}

/* STATE | FOCUS | ARROW */
.o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow {
    --o-ui-overlay-arrow-border-color: var(--o-ui-focus-ring-color);
}

.o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow:before {
    border-width: var(--o-ui-focus-ring-thickness-md);
}