import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { IconResizeDiagonal } from "../_Icon";
import { classes } from "./Popup.tokens";
import { DEFAULT_Z_INDEX } from "./utils";
export const base = /*#__PURE__*/ css(".", classes.draggablePopupWrapper, "{cursor:grab;}.", classes.draggingPopupWrapper, "{cursor:grabbing;}.", classes.resizableContainerNoSelect, "{user-select:none;-webkit-user-select:none;}", "base");
export const StyledPortal = /*#__PURE__*/ styled("div", {
    target: "epqvnha0",
    label: "StyledPortal"
})();
export const StyledPortalContainer = /*#__PURE__*/ styled("div", {
    target: "epqvnha1",
    label: "StyledPortalContainer"
})("width:0;");
export const PopupView = /*#__PURE__*/ styled("div", {
    target: "epqvnha2",
    label: "PopupView"
})("position:relative;max-width:100%;pointer-events:all;");
export const PopupRootContainer = /*#__PURE__*/ styled("div", {
    target: "epqvnha3",
    label: "PopupRootContainer"
})("position:", ({ frame, positionFixed })=>frame === 'document' || positionFixed ? 'fixed' : 'absolute', ";z-index:", ({ zIndex })=>zIndex || DEFAULT_Z_INDEX, ";left:", ({ position })=>position.left || '', ";right:", ({ position })=>position.right || '', ";top:", ({ position })=>position.top || '', ";bottom:", ({ position })=>position.bottom || '', ";transform:", ({ position })=>position.transform || '', ";");
export const IconResizeDiagonalStyled = /*#__PURE__*/ styled(IconResizeDiagonal, {
    target: "epqvnha4",
    label: "IconResizeDiagonalStyled"
})("color:var(--text-secondary);&:hover{color:var(--text-secondary-hover);}&:active{color:var(--text-secondary-active);}&.", classes.resizableTopRightIcon, "{transform:rotate(-90deg);}&.", classes.resizableBottomRightIcon, "{transform:rotate(0);}&.", classes.resizableBottomLeftIcon, "{transform:rotate(90deg);}&.", classes.resizableTopLeftIcon, "{transform:rotate(180deg);}");
