import { css } from "styled-components";
import styled 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 var StyledNotification = css([
    "width:fit-content;"
]);
var mergedButtonConfig = mergeConfig(buttonConfig);
var Button = component(mergedButtonConfig);
export var CloseIconWrapper = styled(Button).withConfig({
    displayName: "Notification.styles__CloseIconWrapper",
    componentId: "sc-6c65af7-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 var Wrapper = styled.div.withConfig({
    displayName: "Notification.styles__Wrapper",
    componentId: "sc-6c65af7-1"
})([
    "position:relative;width:",
    ";max-width:",
    ";border-radius:var(",
    ");border:var(",
    ") solid var(",
    ");background:",
    ";box-sizing:border-box;&.",
    "{display:flex;align-items:center;gap:var(",
    ");}"
], function(param) {
    var _param_width = param.width, width = _param_width === void 0 ? "var(".concat(tokens.width, ")") : _param_width;
    return width;
}, function(param) {
    var maxWidth = param.maxWidth;
    return maxWidth || 'unset';
}, tokens.borderRadius, tokens.borderWidth, tokens.borderColor, function(param) {
    var backgroundColor = param.backgroundColor;
    return backgroundColor || "var(".concat(tokens.background, ")");
}, classes.horizontal, tokens.horizontalLayoutGap);
export var ButtonsWrapper = styled.div.withConfig({
    displayName: "Notification.styles__ButtonsWrapper",
    componentId: "sc-6c65af7-2"
})([
    "margin-top:var(",
    ");margin-left:",
    ";align-self:var(",
    ");&.",
    "{margin-top:unset;margin-left:unset;}"
], tokens.buttonsMarginTop, function(param) {
    var iconPlacement = param.iconPlacement;
    return iconPlacement === placements.left ? "var(".concat(tokens.buttonsMarginLeft, ")") : 'unset';
}, tokens.horisontalActionsAlignSelf, classes.horizontal);
export var IconWrapper = styled.div.withConfig({
    displayName: "Notification.styles__IconWrapper",
    componentId: "sc-6c65af7-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, function(param) {
    var iconColor = param.iconColor;
    return iconColor || "var(".concat(tokens.contentLeftIconColor, ")");
}, function(param) {
    var iconPlacement = param.iconPlacement;
    return iconPlacement === placements.left ? "var(".concat(tokens.contentLeftIconMargin, ")") : 'unset';
}, function(param) {
    var iconPlacement = param.iconPlacement;
    return iconPlacement === placements.top ? "var(".concat(tokens.contentTopIconMargin, ")") : 'unset';
}, classes.horizontal, tokens.horizontalLayoutLeftIconMargin);
export var ContentBox = styled.div.withConfig({
    displayName: "Notification.styles__ContentBox",
    componentId: "sc-6c65af7-4"
})([
    "display:",
    ";padding-top:",
    ";&.",
    "{padding:unset;display:flex;align-items:center;flex-grow:1;}"
], function(param) {
    var iconPlacement = param.iconPlacement;
    return iconPlacement === placements.left ? 'flex' : 'block';
}, function(param) {
    var iconPlacement = param.iconPlacement;
    return iconPlacement ? "var(".concat(tokens.contentPaddingTop, ")") : "var(".concat(tokens.contentPaddingTopWithoutIcon, ")");
}, classes.horizontal);
export var TextBox = styled.div.withConfig({
    displayName: "Notification.styles__TextBox",
    componentId: "sc-6c65af7-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, function(param) {
    var iconPlacement = param.iconPlacement;
    return !iconPlacement || iconPlacement === placements.top ? "var(".concat(tokens.textboxPaddingTopWithTopIcon, ")") : "var(".concat(tokens.textboxPaddingTop, ")");
}, function(param) {
    var showCloseIcon = param.showCloseIcon, iconPlacement = param.iconPlacement;
    return showCloseIcon && iconPlacement !== placements.top ? "var(".concat(tokens.textboxPaddingRightWithCloseIcon, ")") : "var(".concat(tokens.textboxPaddingRight, ")");
}, tokens.textboxGap, classes.horizontal);
export var StyledTitle = styled.div.withConfig({
    displayName: "Notification.styles__StyledTitle",
    componentId: "sc-6c65af7-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), function(param) {
    var textColor = param.textColor;
    return textColor || "var(".concat(tokens.titleColor, ")");
});
export var StyledContent = styled.div.withConfig({
    displayName: "Notification.styles__StyledContent",
    componentId: "sc-6c65af7-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), function(param) {
    var textColor = param.textColor;
    return textColor || "var(".concat(tokens.contentColor, ")");
});
export var StyledItemWrapper = styled.div.withConfig({
    displayName: "Notification.styles__StyledItemWrapper",
    componentId: "sc-6c65af7-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 var StyledRoot = styled.div.withConfig({
    displayName: "Notification.styles__StyledRoot",
    componentId: "sc-6c65af7-9"
})([
    "display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:",
    ";"
], function(param) {
    var placement = param.placement;
    return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
});
