import styled, { css } from "styled-components";
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 = css([
    `position:relative;display:flex;flex-direction:column;box-sizing:border-box;`
]);
export const ContentBefore = styled.div.withConfig({
    displayName: "Note.styles__ContentBefore",
    componentId: "sc-1523cd2-0"
})([
    `display:flex;flex-shrink:0;`
]);
export const ContentWrapper = styled.div.withConfig({
    displayName: "Note.styles__ContentWrapper",
    componentId: "sc-1523cd2-1"
})([
    `display:flex;flex-direction:row;align-items:flex-start;box-sizing:border-box;`
]);
export const TextBox = styled.div.withConfig({
    displayName: "Note.styles__TextBox",
    componentId: "sc-1523cd2-2"
})([
    `position:relative;display:flex;flex-direction:column;flex:1;min-width:0;`
]);
export const Title = styled.div.withConfig({
    displayName: "Note.styles__Title",
    componentId: "sc-1523cd2-3"
})([
    `padding-right:`,
    `;box-sizing:border-box;`
], ({ hasClose })=>hasClose ? `var(${tokens.titlePaddingRight})` : 0);
export const TitleHelper = styled.div.withConfig({
    displayName: "Note.styles__TitleHelper",
    componentId: "sc-1523cd2-4"
})([
    `visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;`
]);
export const Text = styled.span.withConfig({
    displayName: "Note.styles__Text",
    componentId: "sc-1523cd2-5"
})([
    `position:relative;`
]);
export const TextHelper = styled.span.withConfig({
    displayName: "Note.styles__TextHelper",
    componentId: "sc-1523cd2-6"
})([
    `display:block;width:100%;visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;`
]);
export const ActionContentContainer = styled.div.withConfig({
    displayName: "Note.styles__ActionContentContainer",
    componentId: "sc-1523cd2-7"
})([
    ``
]);
export const CloseIconWrapper = styled(Button).withConfig({
    displayName: "Note.styles__CloseIconWrapper",
    componentId: "sc-1523cd2-8"
})([
    `position:absolute;right:var(`,
    `);top:var(`,
    `);width:var(`,
    `);height:var(`,
    `);color:var(`,
    `);:hover{color:var(`,
    `);}`
], tokens.closeIconRight, tokens.closeIconTop, tokens.closeIconButtonSize, tokens.closeIconButtonSize, tokens.closeIconColor, tokens.closeIconColorOnHover);
