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;flex-direction:column;box-sizing:border-box;", "base");
export const ContentBefore = /*#__PURE__*/ styled("div", {
    target: "e1y7hmf70",
    label: "ContentBefore"
})("display:flex;flex-shrink:0;");
export const ContentWrapper = /*#__PURE__*/ styled("div", {
    target: "e1y7hmf71",
    label: "ContentWrapper"
})("display:flex;flex-direction:row;align-items:flex-start;box-sizing:border-box;");
export const TextBox = /*#__PURE__*/ styled("div", {
    target: "e1y7hmf72",
    label: "TextBox"
})("position:relative;display:flex;flex-direction:column;flex:1;min-width:0;");
export const Title = /*#__PURE__*/ styled("div", {
    target: "e1y7hmf73",
    label: "Title"
})("padding-right:", ({ hasClose })=>hasClose ? `var(${tokens.titlePaddingRight})` : 0, ";box-sizing:border-box;");
export const TitleHelper = /*#__PURE__*/ styled("div", {
    target: "e1y7hmf74",
    label: "TitleHelper"
})("visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;");
export const Text = /*#__PURE__*/ styled("span", {
    target: "e1y7hmf75",
    label: "Text"
})("position:relative;");
export const TextHelper = /*#__PURE__*/ styled("span", {
    target: "e1y7hmf76",
    label: "TextHelper"
})("display:block;width:100%;visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;");
export const ActionContentContainer = /*#__PURE__*/ styled("div", {
    target: "e1y7hmf77",
    label: "ActionContentContainer"
})();
export const CloseIconWrapper = /*#__PURE__*/ styled(Button, {
    target: "e1y7hmf78",
    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, ");}");
