import styled from "styled-components";
import { DEFAULT_Z_INDEX } from "../Popup/utils";
import { classes, tokens } from "./Popover.tokens";
export const StyledRoot = styled.div.withConfig({
    displayName: "Popover.styles__StyledRoot",
    componentId: "sc-41d90f8d-0"
})([
    `display:inline-flex;box-sizing:border-box;position:relative;`
]);
export const StyledWrapper = styled.div.withConfig({
    displayName: "Popover.styles__StyledWrapper",
    componentId: "sc-41d90f8d-1"
})([
    `display:inline-flex;&.`,
    `{position:absolute;top:0;left:0;width:100%;height:100%;`,
    `{width:100%;height:100%;display:block;}}`
], classes.targetAsRef, StyledRoot);
export const StyledArrow = styled.div.withConfig({
    displayName: "Popover.styles__StyledArrow",
    componentId: "sc-41d90f8d-2"
})([
    `width:var(`,
    `);height:var(`,
    `);&::before{position:absolute;width:var(`,
    `);height:var(`,
    `);mask-image:var(`,
    `);background:var(`,
    `);content:'';transform:rotate(0deg);}`
], tokens.arrowMaskWidth, tokens.arrowMaskHeight, tokens.arrowMaskWidth, tokens.arrowMaskHeight, tokens.arrowMaskImage, tokens.arrowBackground);
export const StyledPopover = styled.div.withConfig({
    displayName: "Popover.styles__StyledPopover",
    componentId: "sc-41d90f8d-3"
})([
    `position:absolute;z-index:`,
    `;opacity:0;visibility:hidden;box-shadow:var(`,
    `);border-radius:inherit;&.`,
    `{transition:opacity 0.3s ease-in-out,visibility 0.3s;}&.`,
    `{opacity:1;visibility:visible;}&:before{content:'';display:block;position:absolute;background:transparent;}&[data-popper-placement^='top'] > .`,
    `{bottom:calc(0px - var(`,
    `));}&[data-popper-placement^='bottom'] > .`,
    `{top:calc(0px - var(`,
    `));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .`,
    `{right:calc(0px - var(`,
    `));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .`,
    `{left:calc(0px - var(`,
    `));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .`,
    `{bottom:calc(0px - var(`,
    `));left:var(`,
    `) !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .`,
    `{bottom:calc(0px - var(`,
    `));left:unset !important;right:var(`,
    `) !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .`,
    `{top:calc(0px - var(`,
    `));left:var(`,
    `) !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .`,
    `{top:calc(0px - var(`,
    `));left:unset !important;right:var(`,
    `) !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .`,
    `,&[data-popper-placement^='right-start'] > .`,
    `{top:var(`,
    `) !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .`,
    `,&[data-popper-placement^='right-end'] > .`,
    `{top:unset !important;bottom:var(`,
    `) !important;transform:unset !important;}&[data-popper-placement^='top'],&[data-popper-placement^='top-start'],&[data-popper-placement^='top-end']{&:before{top:unset;left:0;right:0;height:var(`,
    `);bottom:calc(-1 * var(`,
    `));}}&[data-popper-placement^='bottom'],&[data-popper-placement^='bottom-start'],&[data-popper-placement^='bottom-end']{&:before{top:calc(-1 * var(`,
    `));left:0;right:0;bottom:var(`,
    `);height:var(`,
    `);}}&[data-popper-placement^='left'],&[data-popper-placement^='left-start'],&[data-popper-placement^='left-end']{&:before{width:var(`,
    `);height:100%;top:0;right:calc(-1 * var(`,
    `));bottom:0;}}&[data-popper-placement^='right'],&[data-popper-placement^='right-start'],&[data-popper-placement^='right-end']{&:before{width:var(`,
    `);height:100%;top:0;left:calc(-1 * var(`,
    `));bottom:0;}}`
], ({ zIndex })=>zIndex || DEFAULT_Z_INDEX, tokens.boxShadow, classes.animate, classes.open, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, classes.arrow, tokens.arrowEdgeMargin, classes.arrow, classes.arrow, tokens.arrowEdgeMargin, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight);
