import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { component, mergeConfig } from "../../engines";
import { buttonConfig } from "../Button";
import { tokens } from "./Note.tokens";
var mergedButtonConfig = mergeConfig(buttonConfig);
var Button = component(mergedButtonConfig);
export var base = /*#__PURE__*/ css("position:relative;display:flex;box-sizing:border-box;", "base");
export var ContentBefore = /*#__PURE__*/ styled("div", {
    target: "e2hgal70",
    label: "ContentBefore"
})("display:flex;");
export var ContentWrapper = /*#__PURE__*/ styled("div", {
    target: "e2hgal71",
    label: "ContentWrapper"
})("display:flex;flex-direction:column;box-sizing:border-box;");
export var Title = /*#__PURE__*/ styled("div", {
    target: "e2hgal72",
    label: "Title"
})("padding-right:", function(param) {
    var hasClose = param.hasClose;
    return hasClose ? "var(".concat(tokens.titlePaddingRight, ")") : 0;
}, ";box-sizing:border-box;display:flex;align-items:center;");
export var TitleHelper = /*#__PURE__*/ styled("div", {
    target: "e2hgal73",
    label: "TitleHelper"
})("visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;");
export var Text = /*#__PURE__*/ styled("span", {
    target: "e2hgal74",
    label: "Text"
})("display:flex;align-items:center;position:relative;");
export var 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 var 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, ");}");
