import { css } from "styled-components";
import styled from "styled-components";
import { Overlay } from "../Overlay";
import { buttonTokens } from "../Button";
import { Button, TOAST_Z_INDEX } from "./utils";
import { classes, tokens } from "./Toast.tokens";
export var base = css([
    "display:inline-flex;align-items:center;flex-shrink:0;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);",
    ":1rem;"
], buttonTokens.buttonWidth);
export var StyledRoot = styled.div.withConfig({
    displayName: "Toast.styles__StyledRoot",
    componentId: "sc-cc3cbc7b-0"
})([
    "position:fixed;left:50%;transform:translateX(-50%);z-index:",
    ";display:flex;width:0;top:",
    ";bottom:",
    ";&.",
    "{animation:0.3s showToastAnimation ease-out forwards;}&.",
    "{animation:0.3s hideToastAnimation ease-out forwards;}@keyframes showToastAnimation{0%{transform:",
    ";opacity:0;}80%{transform:translate(-50%,0);opacity:0.7;}100%{opacity:1;}}@keyframes hideToastAnimation{0%{opacity:1;}20%{transform:translate(-50%,0);opacity:0.7;}100%{transform:",
    ";opacity:0;}}"
], TOAST_Z_INDEX, function(param) {
    var position = param.position, _param_offset = param.offset, offset = _param_offset === void 0 ? 0 : _param_offset;
    return position === 'top' ? "".concat(Number(offset) + 5, "rem") : 'unset';
}, function(param) {
    var position = param.position, _param_offset = param.offset, offset = _param_offset === void 0 ? 0 : _param_offset;
    return position === 'bottom' ? "".concat(Number(offset) + 5, "rem") : 'unset';
}, String(classes.toastShowed), String(classes.toastHidden), function(param) {
    var position = param.position;
    return "translate(-50%, ".concat(position === 'top' ? '-' : '', "5rem)");
}, function(param) {
    var position = param.position;
    return "translate(-50%, ".concat(position === 'top' ? '-' : '', "5rem)");
});
export var CloseIconWrapper = styled(Button).withConfig({
    displayName: "Toast.styles__CloseIconWrapper",
    componentId: "sc-cc3cbc7b-1"
})([
    "height:var(",
    ");--plasma_private-close-icon-margin:var(",
    ");margin:var(--plasma_private-close-icon-margin);color:var(",
    ");:hover{color:var(",
    ");}"
], tokens.closeIconButtonSize, tokens.closeIconMargin, tokens.closeIconColor, tokens.closeIconColorOnHover);
export var StyledOverlay = styled(Overlay).withConfig({
    displayName: "Toast.styles__StyledOverlay",
    componentId: "sc-cc3cbc7b-2"
})([
    "&&.",
    "{animation:0.3s showFadeAnimation ease-out forwards;}&&.",
    "{animation:0.3s hideFadeAnimation ease-out forwards;}@keyframes showFadeAnimation{0%{opacity:0;}100%{opacity:1;}}@keyframes hideFadeAnimation{0%{opacity:1;}100%{opacity:0;}}"
], String(classes.toastFadeShowed), String(classes.toastFadeHidden));
export var StyledContentLeft = styled.div.withConfig({
    displayName: "Toast.styles__StyledContentLeft",
    componentId: "sc-cc3cbc7b-3"
})([
    "display:flex;--plasma_private-content-left-margin:var(",
    ");margin:var(--plasma_private-content-left-margin);color:var(",
    ");"
], tokens.contentLeftMargin, tokens.contentLeftColor);
export var StyledContent = styled.div.withConfig({
    displayName: "Toast.styles__StyledContent",
    componentId: "sc-cc3cbc7b-4"
})([
    "color:",
    ";"
], function(param) {
    var textColor = param.textColor;
    return textColor || 'currentColor';
});
