import styled from "styled-components";
import { privateTokens, tokens } from "./Tour.tokens";
export const MaskContainer = styled.div.withConfig({
    displayName: "Tour.styles__MaskContainer",
    componentId: "sc-f1eefe15-0"
})([
    `z-index:`,
    `;`
], ({ zIndex })=>zIndex || 9000);
export const Mask = styled.div.withConfig({
    displayName: "Tour.styles__Mask",
    componentId: "sc-f1eefe15-1"
})([
    `position:fixed;inset:0;pointer-events:all;`
]);
export const Highlight = styled.div.withConfig({
    displayName: "Tour.styles__Highlight",
    componentId: "sc-f1eefe15-2"
})([
    ``,
    `:`,
    `;position:fixed;background:transparent;border-radius:`,
    `;box-shadow:`,
    `;pointer-events:none;transition:`,
    `;`
], privateTokens.maskColor, ({ overlayColor })=>overlayColor || `var(${tokens.overlayColor})`, ({ borderRadius })=>borderRadius ?? 0, ({ withOverlay })=>withOverlay ? `0 0 0 9999px var(${privateTokens.maskColor})` : 'none', ({ 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 = styled.div.withConfig({
    displayName: "Tour.styles__TourPortal",
    componentId: "sc-f1eefe15-3"
})([
    `outline:none;`
]);
