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 var base = /*#__PURE__*/ css(".", classes.draggablePopupWrapper, "{cursor:grab;}.", classes.draggingPopupWrapper, "{cursor:grabbing;}.", classes.resizableContainerNoSelect, "{user-select:none;-webkit-user-select:none;}", "base");
export var StyledPortal = /*#__PURE__*/ styled("div", {
    target: "ebuamuj0",
    label: "StyledPortal"
})();
export var StyledPortalContainer = /*#__PURE__*/ styled("div", {
    target: "ebuamuj1",
    label: "StyledPortalContainer"
})("width:0;");
export var PopupView = /*#__PURE__*/ styled("div", {
    target: "ebuamuj2",
    label: "PopupView"
})("position:relative;max-width:100%;pointer-events:all;");
export var PopupRootContainer = /*#__PURE__*/ styled("div", {
    target: "ebuamuj3",
    label: "PopupRootContainer"
})("position:", function(param) {
    var frame = param.frame, positionFixed = param.positionFixed;
    return frame === 'document' || positionFixed ? 'fixed' : 'absolute';
}, ";z-index:", function(param) {
    var zIndex = param.zIndex;
    return zIndex || DEFAULT_Z_INDEX;
}, ";left:", function(param) {
    var position = param.position;
    return position.left || '';
}, ";right:", function(param) {
    var position = param.position;
    return position.right || '';
}, ";top:", function(param) {
    var position = param.position;
    return position.top || '';
}, ";bottom:", function(param) {
    var position = param.position;
    return position.bottom || '';
}, ";transform:", function(param) {
    var position = param.position;
    return position.transform || '';
}, ";");
export var IconResizeDiagonalStyled = /*#__PURE__*/ styled(IconResizeDiagonal, {
    target: "ebuamuj4",
    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);}");
