import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { component, mergeConfig } from "../../engines";
import { buttonConfig } from "../Button";
import { tokens } from "./Note.tokens";
const mergedButtonConfig = mergeConfig(buttonConfig);
const Button = component(mergedButtonConfig);
export const base = /*#__PURE__*/ css("position:relative;display:flex;box-sizing:border-box;", "base");
export const ContentBefore = /*#__PURE__*/ styled("div", {
    target: "e2hgal70",
    label: "ContentBefore"
})("display:flex;");
export const ContentWrapper = /*#__PURE__*/ styled("div", {
    target: "e2hgal71",
    label: "ContentWrapper"
})("display:flex;flex-direction:column;box-sizing:border-box;");
export const Title = /*#__PURE__*/ styled("div", {
    target: "e2hgal72",
    label: "Title"
})("padding-right:", ({ hasClose })=>hasClose ? `var(${tokens.titlePaddingRight})` : 0, ";box-sizing:border-box;display:flex;align-items:center;");
export const TitleHelper = /*#__PURE__*/ styled("div", {
    target: "e2hgal73",
    label: "TitleHelper"
})("visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;");
export const Text = /*#__PURE__*/ styled("span", {
    target: "e2hgal74",
    label: "Text"
})("display:flex;align-items:center;position:relative;");
export const TextHelper = /*#__PURE__*/ styled("span", {
    target: "e2hgal75",
    label: "TextHelper"
})("display:flex;align-items:center;visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;");
export const CloseIconWrapper = /*#__PURE__*/ styled(Button, {
    target: "e2hgal76",
    label: "CloseIconWrapper"
})("position:absolute;right:var(", tokens.closeIconRight, ");top:var(", tokens.closeIconTop, ");width:var(", tokens.closeIconButtonSize, ");height:var(", tokens.closeIconButtonSize, ");color:var(", tokens.closeIconColor, ");:hover{color:var(", tokens.closeIconColorOnHover, ");}");
