// 1. Hide the popover by default. This is needed because the popover is
//    controlled via CSS with the help of the helper popover. The popover can't
//    be displayed directly, because relative positioning doesn't work with
//    elements on the top-layer, so this CSS hack is needed.
// 2. Hide the popover helper element.
// 3. If the popover helper is open, show the actual popover.
// 4. Reset positioning for controlled variant.
// 5. Shift Popover so there is space for the arrow between Popover and reference element.
// 6. Add top offset in case it's not defined by external library.

@use "theme";

@layer components.popover {
    .root {
        position: absolute;
        width: max-content;
        max-width: theme.$max-width;
        padding: theme.$padding;
        text-align: left;
        white-space: normal;
        word-break: normal;
        word-wrap: break-word;
        color: theme.$color;
        border: theme.$border-width solid theme.$border-color;
        border-radius: theme.$border-radius;
        background-color: theme.$background-color;
        box-shadow: theme.$box-shadow;
    }

    .arrow {
        position: absolute;
        width: theme.$arrow-width;
        height: theme.$arrow-height;
        transform-origin: center bottom;

        &::before,
        &::after {
            content: "";
            position: absolute;
            display: block;
            border-style: solid;
            border-color: transparent;
        }

        &::before {
            bottom: 0;
            border-width: theme.$arrow-height theme.$arrow-height 0;
            border-top-color: theme.$border-color;
        }

        &::after {
            bottom: theme.$border-width;
            border-width: theme.$arrow-height theme.$arrow-height 0;
            border-top-color: theme.$background-color;
        }
    }

    // Controlled popover
    .controlledPopover {
        display: none; // 1.
    }

    .helper {
        position: fixed; // 2.
        inset: unset;
        top: 0;
        right: 0;
        width: auto;
        height: auto;
        padding: 0;
        border: none;
        background: transparent;
        pointer-events: none;
    }

    .helper:popover-open ~ .controlledPopover {
        display: block; // 3.
    }

    // Sides
    .isRootAtTop {
        bottom: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
    }

    .isRootAtBottom {
        top: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
    }

    .isRootAtLeft {
        right: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
    }

    .isRootAtRight {
        left: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
    }

    // Arrows
    .isRootAtTop > .arrow {
        top: calc(100% - #{theme.$arrow-safe-rendering-overlap});
    }

    .isRootAtBottom > .arrow {
        bottom: calc(100% - #{theme.$arrow-safe-rendering-overlap});
    }

    .isRootAtLeft > .arrow {
        left: calc(100% - #{theme.$arrow-safe-rendering-overlap});
    }

    .isRootAtRight > .arrow {
        right: calc(100% - #{theme.$arrow-safe-rendering-overlap});
    }

    // Side alignments: top
    .isRootAtTop.isRootAtCenter {
        left: 50%;
        transform: translate(-50%, calc(-1 * #{theme.$arrow-height}));
    }

    .isRootAtTop.isRootAtStart {
        left: 0;
        transform: translate(0, calc(-1 * #{theme.$arrow-height}));
    }

    .isRootAtTop.isRootAtEnd {
        right: 0;
        transform: translate(0, calc(-1 * #{theme.$arrow-height}));
    }

    .isRootAtTop.isRootAtCenter > .arrow {
        left: 50%;
        transform: translate(-50%, 0) rotateZ(0);
    }

    .isRootAtTop.isRootAtStart > .arrow {
        left: theme.$arrow-corner-offset;
        transform: translate(0, 0) rotateZ(0);
    }

    .isRootAtTop.isRootAtEnd > .arrow {
        right: theme.$arrow-corner-offset;
        transform: translate(0, 0) rotateZ(0);
    }

    // Side alignments: bottom
    .isRootAtBottom.isRootAtCenter {
        left: 50%;
        transform: translate(-50%, #{theme.$arrow-height});
    }

    .isRootAtBottom.isRootAtStart {
        left: 0;
        transform: translate(0, #{theme.$arrow-height});
    }

    .isRootAtBottom.isRootAtEnd {
        right: 0;
        transform: translate(0, #{theme.$arrow-height});
    }

    .isRootAtBottom.isRootAtCenter > .arrow {
        left: 50%;
        transform: translate(-50%, -100%) rotateZ(180deg);
    }

    .isRootAtBottom.isRootAtStart > .arrow {
        left: theme.$arrow-corner-offset;
        transform: translate(0, -100%) rotateZ(180deg);
    }

    .isRootAtBottom.isRootAtEnd > .arrow {
        right: theme.$arrow-corner-offset;
        transform: translate(0, -100%) rotateZ(180deg);
    }

    // Side alignments: left
    .isRootAtLeft.isRootAtCenter {
        top: 50%;
        transform: translate(calc(-1 * #{theme.$arrow-height}), -50%);
    }

    .isRootAtLeft.isRootAtStart {
        top: 0;
        transform: translate(calc(-1 * #{theme.$arrow-height}), 0);
    }

    .isRootAtLeft.isRootAtEnd {
        bottom: 0;
        transform: translate(calc(-1 * #{theme.$arrow-height}), 0);
    }

    .isRootAtLeft.isRootAtCenter > .arrow {
        top: 50%;
        transform: translate(0, -100%) rotateZ(-90deg);
    }

    .isRootAtLeft.isRootAtStart > .arrow {
        top: theme.$arrow-corner-offset;
        transform: translate(0, 0) rotateZ(-90deg);
    }

    .isRootAtLeft.isRootAtEnd > .arrow {
        bottom: theme.$arrow-corner-offset;
        transform: translate(0, -100%) rotateZ(-90deg);
    }

    // Side alignments: right
    .isRootAtRight.isRootAtCenter {
        top: 50%;
        transform: translate(#{theme.$arrow-height}, -50%);
    }

    .isRootAtRight.isRootAtStart {
        top: 0;
        transform: translate(#{theme.$arrow-height}, 0);
    }

    .isRootAtRight.isRootAtEnd {
        bottom: 0;
        transform: translate(#{theme.$arrow-height}, 0);
    }

    .isRootAtRight.isRootAtCenter > .arrow {
        top: 50%;
        transform: translate(0, -100%) rotateZ(90deg);
    }

    .isRootAtRight.isRootAtStart > .arrow {
        top: theme.$arrow-corner-offset;
        transform: translate(0, 0) rotateZ(90deg);
    }

    .isRootAtRight.isRootAtEnd > .arrow {
        bottom: theme.$arrow-corner-offset;
        transform: translate(0, -100%) rotateZ(90deg);
    }

    // Controlled placement
    .isRootControlled.isRootAtTop,
    .isRootControlled.isRootAtBottom,
    .isRootControlled.isRootAtLeft,
    .isRootControlled.isRootAtRight {
        inset: unset; // 4.
    }

    .isRootControlled.isRootAtTop {
        transform: translate(0, calc(-1 * #{theme.$arrow-height})); // 5.
    }

    .isRootControlled.isRootAtBottom {
        transform: translate(0, #{theme.$arrow-height}); // 5.
    }

    .isRootControlled.isRootAtLeft {
        transform: translate(calc(-1 * #{theme.$arrow-height}), 0); // 5.
    }

    .isRootControlled.isRootAtRight {
        transform: translate(#{theme.$arrow-height}, 0); // 5.
    }

    .isRootControlled.isRootAtLeft.isRootAtStart,
    .isRootControlled.isRootAtRight.isRootAtStart {
        top: 0; // 6.
    }
}