import styled from "styled-components";
import { css } from "styled-components";
import { IconResizeDiagonal } from "../_Icon";
import { classes } from "./Popup.tokens";
import { DEFAULT_Z_INDEX } from "./utils";
export var base = css([
    ".",
    "{cursor:grab;}.",
    "{cursor:grabbing;}.",
    "{user-select:none;-webkit-user-select:none;}"
], classes.draggablePopupWrapper, classes.draggingPopupWrapper, classes.resizableContainerNoSelect);
export var StyledPortal = styled.div.withConfig({
    displayName: "Popup.styles__StyledPortal",
    componentId: "sc-e809f9e3-0"
})([
    ""
]);
export var StyledPortalContainer = styled.div.withConfig({
    displayName: "Popup.styles__StyledPortalContainer",
    componentId: "sc-e809f9e3-1"
})([
    "width:0;"
]);
export var PopupView = styled.div.withConfig({
    displayName: "Popup.styles__PopupView",
    componentId: "sc-e809f9e3-2"
})([
    "position:relative;max-width:100%;pointer-events:all;"
]);
export var PopupRootContainer = styled.div.withConfig({
    displayName: "Popup.styles__PopupRootContainer",
    componentId: "sc-e809f9e3-3"
})([
    "position:",
    ";z-index:",
    ";left:",
    ";right:",
    ";top:",
    ";bottom:",
    ";transform:",
    ";"
], function(param) {
    var frame = param.frame, positionFixed = param.positionFixed;
    return frame === 'document' || positionFixed ? 'fixed' : 'absolute';
}, function(param) {
    var zIndex = param.zIndex;
    return zIndex || DEFAULT_Z_INDEX;
}, function(param) {
    var position = param.position;
    return position.left || '';
}, function(param) {
    var position = param.position;
    return position.right || '';
}, function(param) {
    var position = param.position;
    return position.top || '';
}, function(param) {
    var position = param.position;
    return position.bottom || '';
}, function(param) {
    var position = param.position;
    return position.transform || '';
});
export var IconResizeDiagonalStyled = styled(IconResizeDiagonal).withConfig({
    displayName: "Popup.styles__IconResizeDiagonalStyled",
    componentId: "sc-e809f9e3-4"
})([
    "color:var(--text-secondary);&:hover{color:var(--text-secondary-hover);}&:active{color:var(--text-secondary-active);}&.",
    "{transform:rotate(-90deg);}&.",
    "{transform:rotate(0);}&.",
    "{transform:rotate(90deg);}&.",
    "{transform:rotate(180deg);}"
], classes.resizableTopRightIcon, classes.resizableBottomRightIcon, classes.resizableBottomLeftIcon, classes.resizableTopLeftIcon);
