import styled, { css } from "styled-components";
import { IconResizeDiagonal } from "../_Icon";
import { classes } from "./Popup.tokens";
import { DEFAULT_Z_INDEX } from "./utils";
export const base = css([
    `.`,
    `{cursor:grab;}.`,
    `{cursor:grabbing;}.`,
    `{user-select:none;-webkit-user-select:none;}`
], classes.draggablePopupWrapper, classes.draggingPopupWrapper, classes.resizableContainerNoSelect);
export const StyledPortal = styled.div.withConfig({
    displayName: "Popup.styles__StyledPortal",
    componentId: "sc-f209901a-0"
})([
    ``
]);
export const StyledPortalContainer = styled.div.withConfig({
    displayName: "Popup.styles__StyledPortalContainer",
    componentId: "sc-f209901a-1"
})([
    `width:0;`
]);
export const PopupView = styled.div.withConfig({
    displayName: "Popup.styles__PopupView",
    componentId: "sc-f209901a-2"
})([
    `position:relative;max-width:100%;pointer-events:all;`
]);
export const PopupRootContainer = styled.div.withConfig({
    displayName: "Popup.styles__PopupRootContainer",
    componentId: "sc-f209901a-3"
})([
    `position:`,
    `;z-index:`,
    `;left:`,
    `;right:`,
    `;top:`,
    `;bottom:`,
    `;transform:`,
    `;`
], ({ frame, positionFixed })=>frame === 'document' || positionFixed ? 'fixed' : 'absolute', ({ zIndex })=>zIndex || DEFAULT_Z_INDEX, ({ position })=>position.left || '', ({ position })=>position.right || '', ({ position })=>position.top || '', ({ position })=>position.bottom || '', ({ position })=>position.transform || '');
export const IconResizeDiagonalStyled = styled(IconResizeDiagonal).withConfig({
    displayName: "Popup.styles__IconResizeDiagonalStyled",
    componentId: "sc-f209901a-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);
