import { css } from 'lit'

export default css`
    :host {
        --arrow-color: var(--terra-popup-arrow-color);
        --arrow-size: var(--terra-popup-arrow-size);

        /*
        * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
        * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
        */
        --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
        --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));

        display: contents;
    }

    .popup {
        position: absolute;
        isolation: isolate;
        max-width: var(--auto-size-available-width, none);
        max-height: var(--auto-size-available-height, none);
    }

    .popup--fixed {
        position: fixed;
    }

    .popup:not(.popup--active) {
        display: none;
    }

    .popup__arrow {
        position: absolute;
        width: calc(var(--arrow-size-diagonal) * 2);
        height: calc(var(--arrow-size-diagonal) * 2);
        rotate: 45deg;
        background: var(--arrow-color);
        z-index: -1;
    }

    /* Hover bridge */
    .popup-hover-bridge:not(.popup-hover-bridge--visible) {
        display: none;
    }

    .popup-hover-bridge {
        position: fixed;
        z-index: calc(var(--terra-z-index-dropdown) - 1);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        clip-path: polygon(
            var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
            var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
            var(--hover-bridge-bottom-right-x, 0)
                var(--hover-bridge-bottom-right-y, 0),
            var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
        );
    }
`
