import { css } from "@emotion/react";
import styled from "@emotion/styled";
import { Overlay } from "../Overlay";
import { buttonTokens } from "../Button";
import { Button, TOAST_Z_INDEX } from "./utils";
import { classes, tokens } from "./Toast.tokens";
export var base = /*#__PURE__*/ css("display:inline-flex;align-items:center;flex-shrink:0;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);", buttonTokens.buttonWidth, ":1rem;", "base");
export var StyledRoot = /*#__PURE__*/ styled("div", {
    target: "e77qssc0",
    label: "StyledRoot"
})("position:fixed;left:50%;transform:translateX(-50%);z-index:", TOAST_Z_INDEX, ";display:flex;width:0;top:", 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';
}, ";bottom:", 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), "{animation:0.3s showToastAnimation ease-out forwards;}&.", String(classes.toastHidden), "{animation:0.3s hideToastAnimation ease-out forwards;}@keyframes showToastAnimation{0%{transform:", function(param) {
    var position = param.position;
    return "translate(-50%, ".concat(position === 'top' ? '-' : '', "5rem)");
}, ";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:", function(param) {
    var position = param.position;
    return "translate(-50%, ".concat(position === 'top' ? '-' : '', "5rem)");
}, ";opacity:0;}}");
export var CloseIconWrapper = /*#__PURE__*/ styled(Button, {
    target: "e77qssc1",
    label: "CloseIconWrapper"
})("height:var(", tokens.closeIconButtonSize, ");--plasma_private-close-icon-margin:var(", tokens.closeIconMargin, ");margin:var(--plasma_private-close-icon-margin);color:var(", tokens.closeIconColor, ");:hover{color:var(", tokens.closeIconColorOnHover, ");}");
export var StyledOverlay = /*#__PURE__*/ styled(Overlay, {
    target: "e77qssc2",
    label: "StyledOverlay"
})("&&.", String(classes.toastFadeShowed), "{animation:0.3s showFadeAnimation ease-out forwards;}&&.", String(classes.toastFadeHidden), "{animation:0.3s hideFadeAnimation ease-out forwards;}@keyframes showFadeAnimation{0%{opacity:0;}100%{opacity:1;}}@keyframes hideFadeAnimation{0%{opacity:1;}100%{opacity:0;}}");
export var StyledContentLeft = /*#__PURE__*/ styled("div", {
    target: "e77qssc3",
    label: "StyledContentLeft"
})("display:flex;--plasma_private-content-left-margin:var(", tokens.contentLeftMargin, ");margin:var(--plasma_private-content-left-margin);color:var(", tokens.contentLeftColor, ");");
export var StyledContent = /*#__PURE__*/ styled("div", {
    target: "e77qssc4",
    label: "StyledContent"
})("color:", function(param) {
    var textColor = param.textColor;
    return textColor || 'currentColor';
}, ";");
