import styled, { css } from "styled-components";
import { applyHyphens } from "../../mixins";
import { buttonConfig } from "../Button";
import { component, mergeConfig } from "../../engines";
import { classes, tokens } from "./Notification.tokens";
import { placements } from "./Notification.types";
export const StyledNotification = css([
    `width:fit-content;`
]);
const mergedButtonConfig = mergeConfig(buttonConfig);
const Button = component(mergedButtonConfig);
export const CloseIconWrapper = styled(Button).withConfig({
    displayName: "Notification.styles__CloseIconWrapper",
    componentId: "sc-e4c66d3c-0"
})([
    `position:absolute;width:var(`,
    `);height:var(`,
    `);align-self:var(`,
    `);color:var(`,
    `);:hover{color:var(`,
    `);}&.`,
    `{position:relative;}`
], tokens.closeIconButtonSize, tokens.closeIconButtonSize, tokens.horisontalIconCloseAlignSelf, tokens.closeIconColor, tokens.closeIconColorOnHover, classes.horizontal);
export const Wrapper = styled.div.withConfig({
    displayName: "Notification.styles__Wrapper",
    componentId: "sc-e4c66d3c-1"
})([
    `position:relative;width:`,
    `;max-width:`,
    `;border-radius:var(`,
    `);border:var(`,
    `) solid transparent;background:`,
    `;box-sizing:border-box;box-shadow:var(`,
    `);&::before{content:'';position:absolute;pointer-events:none;inset:calc(-1 * var(`,
    `,0px));border-radius:inherit;padding:var(`,
    `,0px);background:var(`,
    `,transparent);--m:linear-gradient(#fff 0 0);-webkit-mask:var(--m) content-box,var(--m);mask:var(--m) content-box exclude,var(--m);-webkit-mask-composite:xor;mask-composite:exclude;}&.`,
    `{display:flex;align-items:center;gap:var(`,
    `);}`
], ({ width = `var(${tokens.width})` })=>width, ({ maxWidth })=>maxWidth || 'unset', tokens.borderRadius, tokens.borderWidth, ({ backgroundColor })=>backgroundColor || `var(${tokens.background})`, tokens.boxShadow, tokens.borderWidth, tokens.borderWidth, tokens.borderColor, classes.horizontal, tokens.horizontalLayoutGap);
export const ButtonsWrapper = styled.div.withConfig({
    displayName: "Notification.styles__ButtonsWrapper",
    componentId: "sc-e4c66d3c-2"
})([
    `margin-top:var(`,
    `);margin-left:`,
    `;align-self:var(`,
    `);&.`,
    `{margin-top:unset;margin-left:unset;}`
], tokens.buttonsMarginTop, ({ iconPlacement })=>iconPlacement === placements.left ? `var(${tokens.buttonsMarginLeft})` : 'unset', tokens.horisontalActionsAlignSelf, classes.horizontal);
export const IconWrapper = styled.div.withConfig({
    displayName: "Notification.styles__IconWrapper",
    componentId: "sc-e4c66d3c-3"
})([
    `width:var(`,
    `);height:var(`,
    `);align-self:var(`,
    `);color:`,
    `;margin-right:`,
    `;margin-bottom:`,
    `;&.`,
    `{margin-right:var(`,
    `);margin-bottom:unset;}`
], tokens.contentLeftIconSize, tokens.contentLeftIconSize, tokens.horisontalIconLeftAlignSelf, ({ iconColor })=>iconColor || `var(${tokens.contentLeftIconColor})`, ({ iconPlacement })=>iconPlacement === placements.left ? `var(${tokens.contentLeftIconMargin})` : 'unset', ({ iconPlacement })=>iconPlacement === placements.top ? `var(${tokens.contentTopIconMargin})` : 'unset', classes.horizontal, tokens.horizontalLayoutLeftIconMargin);
export const ContentBox = styled.div.withConfig({
    displayName: "Notification.styles__ContentBox",
    componentId: "sc-e4c66d3c-4"
})([
    `display:`,
    `;padding-top:`,
    `;&.`,
    `{padding:unset;display:flex;align-items:center;flex-grow:1;}`
], ({ iconPlacement })=>iconPlacement === placements.left ? 'flex' : 'block', ({ iconPlacement })=>iconPlacement ? `var(${tokens.contentPaddingTop})` : `var(${tokens.contentPaddingTopWithoutIcon})`, classes.horizontal);
export const TextBox = styled.div.withConfig({
    displayName: "Notification.styles__TextBox",
    componentId: "sc-e4c66d3c-5"
})([
    `padding:var(`,
    `) var(`,
    `) var(`,
    `) var(`,
    `);padding-top:`,
    `;padding-right:`,
    `;display:flex;flex-direction:column;row-gap:var(`,
    `);word-break:break-word;&.`,
    `{padding:unset;}`
], tokens.textboxPaddingTop, tokens.textboxPaddingRight, tokens.textboxPaddingBottom, tokens.textboxPaddingLeft, ({ iconPlacement })=>!iconPlacement || iconPlacement === placements.top ? `var(${tokens.textboxPaddingTopWithTopIcon})` : `var(${tokens.textboxPaddingTop})`, ({ showCloseIcon, iconPlacement })=>showCloseIcon && iconPlacement !== placements.top ? `var(${tokens.textboxPaddingRightWithCloseIcon})` : `var(${tokens.textboxPaddingRight})`, tokens.textboxGap, classes.horizontal);
export const StyledTitle = styled.div.withConfig({
    displayName: "Notification.styles__StyledTitle",
    componentId: "sc-e4c66d3c-6"
})([
    `font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`,
    `;color:`,
    `;`
], tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleFontLetterSpacing, tokens.titleFontLineHeight, String(applyHyphens), ({ textColor })=>textColor || `var(${tokens.titleColor})`);
export const StyledContent = styled.div.withConfig({
    displayName: "Notification.styles__StyledContent",
    componentId: "sc-e4c66d3c-7"
})([
    `font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`,
    `;color:`,
    `;`
], tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentFontLetterSpacing, tokens.contentFontLineHeight, String(applyHyphens), ({ textColor })=>textColor || `var(${tokens.contentColor})`);
export const StyledItemWrapper = styled.div.withConfig({
    displayName: "Notification.styles__StyledItemWrapper",
    componentId: "sc-e4c66d3c-8"
})([
    `margin-top:1rem;opacity:1;&&.`,
    `{animation:0.4s showAnimation ease-out;&.`,
    `{animation:0.4s showLeftToRightAnimation ease-out;}&.`,
    `{animation:0.4s showTopToCenterAnimation ease-out;}&.`,
    `{animation:0.4s showBottomToCenterAnimation ease-out;}}&&.`,
    `{animation:0.4s hideAnimation ease-out;&.`,
    `{animation:0.4s hideLeftToRightAnimation ease-out;}}@keyframes showTopToCenterAnimation{0%{transform:translateY(-100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}@keyframes showBottomToCenterAnimation{0%{transform:translateY(100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}@keyframes showLeftToRightAnimation{0%{transform:translateX(-100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideLeftToRightAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(-100%);opacity:0;}}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}`
], classes.notificationItemOpened, classes.notificationLeftToRightAnimation, classes.notificationTopToCenterAnimation, classes.notificationBottomToCenterAnimation, classes.notificationItemHidden, classes.notificationLeftToRightAnimation);
export const StyledRoot = styled.div.withConfig({
    displayName: "Notification.styles__StyledRoot",
    componentId: "sc-e4c66d3c-9"
})([
    `display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:`,
    `;`
], ({ placement })=>placement === 'bottom-left' ? 'flex-start' : 'flex-end');
