import styled from "@emotion/styled";
import { privateTokens, tokens } from "./Tour.tokens";
export const MaskContainer = /*#__PURE__*/ styled("div", {
    target: "eoopsde0",
    label: "MaskContainer"
})("z-index:", ({ zIndex })=>zIndex || 9000, ";");
export const Mask = /*#__PURE__*/ styled("div", {
    target: "eoopsde1",
    label: "Mask"
})("position:fixed;inset:0;pointer-events:all;");
export const Highlight = /*#__PURE__*/ styled("div", {
    target: "eoopsde2",
    label: "Highlight"
})(privateTokens.maskColor, ":", ({ overlayColor })=>overlayColor || `var(${tokens.overlayColor})`, ";position:fixed;background:transparent;border-radius:", ({ borderRadius })=>borderRadius ?? 0, ";box-shadow:", ({ withOverlay })=>withOverlay ? `0 0 0 9999px var(${privateTokens.maskColor})` : 'none', ";pointer-events:none;transition:", ({ disableTransition })=>disableTransition ? 'none' : 'left 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1)', ";");
export const TourPortal = /*#__PURE__*/ styled("div", {
    target: "eoopsde3",
    label: "TourPortal"
})("outline:none;");
