.o-ui {
    --o-ui-overlay-border-offset: 0;
    --o-ui-overlay-arrow-border-color: var(--o-ui-focus-ring-color-alias-default);
    --o-ui-overlay-arrow-dimension: 10px;
}

.o-ui-overlay {
    outline: transparent;
    width: fit-content;
    height: fit-content;
    position: relative;
    /* Fix for Safari not behaving well with fit-content / absolute positionned item with a border */
    box-sizing: content-box;
}

/* 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-color: var(--o-ui-bg-alias-surface);
    box-shadow: var(--o-ui-bs-alias-floating);
}

.o-ui-overlay-arrow::after {
    content: "";
    width: 20px;
    height: 10px;
    background-color: var(--o-ui-bg-alias-surface);
    position: absolute;
    top: calc(var(--o-ui-overlay-arrow-dimension) / 2);
    left: calc(-1 * var(--o-ui-overlay-arrow-dimension) / 2);
    z-index: 10;
}

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

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

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

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

/* ARROW | BORDER */
/* BOTTOM ARROW */
.o-ui-overlay[data-popper-placement^="bottom"] .o-ui-overlay-arrow::after {
    top: calc(var(--o-ui-overlay-arrow-dimension) / 2);
}

/* TOP ARROW */
.o-ui-overlay[data-popper-placement^="top"] .o-ui-overlay-arrow::after {
    top: calc(-1 * (var(--o-ui-overlay-arrow-dimension) / 2));
}

/* RIGHT ARROW */
.o-ui-overlay[data-popper-placement^="right"] .o-ui-overlay-arrow::after {
    width: 10px;
    height: 20px;
    left: calc(var(--o-ui-overlay-arrow-dimension) / 2);
    top: calc(-1 * (var(--o-ui-overlay-arrow-dimension) / 2));
}

/* LEFT ARROW */
.o-ui-overlay[data-popper-placement^="left"] .o-ui-overlay-arrow::after {
    width: 10px;
    height: 20px;
    left: calc(-1 * (var(--o-ui-overlay-arrow-dimension) / 2));
    top: calc(-1 * (var(--o-ui-overlay-arrow-dimension) / 2));
}

/* ARROW | BORDER | STATE | FOCUS */
/* RIGHT ARROW */
.o-ui-overlay[data-popper-placement^="right"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after {
    left: 8px;
}

.o-ui-overlay[data-popper-placement^="right"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before {
    border-bottom: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color);
    border-left: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color);
}

/* BOTTOM ARROW */
.o-ui-overlay[data-popper-placement^="bottom"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after {
    top: 8px;
}

.o-ui-overlay[data-popper-placement^="bottom"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before {
    border-top: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color);
    border-left: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color);
}

/* LEFT ARROW */
.o-ui-overlay[data-popper-placement^="left"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after {
    left: -8px;
}

.o-ui-overlay[data-popper-placement^="left"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before {
    border-top: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color);
    border-right: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color);
}

/* TOP ARROW */
.o-ui-overlay[data-popper-placement^="top"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after {
    top: -8px;
}

.o-ui-overlay[data-popper-placement^="top"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before {
    border-bottom: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color);
    border-right: var(--o-ui-focus-ring-thickness-md) 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: transparent;
}

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

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