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;box-sizing:border-box;`
]);
export const ContentBefore = styled.div.withConfig({
    displayName: "Note.styles__ContentBefore",
    componentId: "sc-c3cb2cd8-0"
})([
    `display:flex;`
]);
export const ContentWrapper = styled.div.withConfig({
    displayName: "Note.styles__ContentWrapper",
    componentId: "sc-c3cb2cd8-1"
})([
    `display:flex;flex-direction:column;box-sizing:border-box;`
]);
export const Title = styled.div.withConfig({
    displayName: "Note.styles__Title",
    componentId: "sc-c3cb2cd8-2"
})([
    `padding-right:`,
    `;box-sizing:border-box;display:flex;align-items:center;`
], ({ hasClose })=>hasClose ? `var(${tokens.titlePaddingRight})` : 0);
export const TitleHelper = styled.div.withConfig({
    displayName: "Note.styles__TitleHelper",
    componentId: "sc-c3cb2cd8-3"
})([
    `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-c3cb2cd8-4"
})([
    `display:flex;align-items:center;position:relative;`
]);
export const TextHelper = styled.span.withConfig({
    displayName: "Note.styles__TextHelper",
    componentId: "sc-c3cb2cd8-5"
})([
    `display:flex;align-items:center;visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;`
]);
export const CloseIconWrapper = styled(Button).withConfig({
    displayName: "Note.styles__CloseIconWrapper",
    componentId: "sc-c3cb2cd8-6"
})([
    `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);
