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