import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { Overlay } from "../Overlay";
import { buttonTokens } from "../Button";
import { Button, TOAST_Z_INDEX } from "./utils";
import { classes, tokens } from "./Toast.tokens";
export const 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 const StyledRoot = /*#__PURE__*/ styled("div", {
    target: "ef2ilvs0",
    label: "StyledRoot"
})("position:fixed;left:50%;transform:translateX(-50%);z-index:", TOAST_Z_INDEX, ";display:flex;width:0;top:", ({ position, offset = 0 })=>position === 'top' ? `${Number(offset) + 5}rem` : 'unset', ";bottom:", ({ position, offset = 0 })=>position === 'bottom' ? `${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:", ({ position })=>`translate(-50%, ${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:", ({ position })=>`translate(-50%, ${position === 'top' ? '-' : ''}5rem)`, ";opacity:0;}}");
export const CloseIconWrapper = /*#__PURE__*/ styled(Button, {
    target: "ef2ilvs1",
    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 const StyledOverlay = /*#__PURE__*/ styled(Overlay, {
    target: "ef2ilvs2",
    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 const StyledContentLeft = /*#__PURE__*/ styled("div", {
    target: "ef2ilvs3",
    label: "StyledContentLeft"
})("display:flex;--plasma_private-content-left-margin:var(", tokens.contentLeftMargin, ");margin:var(--plasma_private-content-left-margin);color:var(", tokens.contentLeftColor, ");");
export const StyledContent = /*#__PURE__*/ styled("div", {
    target: "ef2ilvs4",
    label: "StyledContent"
})("color:", ({ textColor })=>textColor || 'currentColor', ";");
