import styled, { css } 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 const 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 const StyledRoot = styled.div.withConfig({
    displayName: "Toast.styles__StyledRoot",
    componentId: "sc-38e2d0b0-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, ({ position, offset = 0 })=>position === 'top' ? `${Number(offset) + 5}rem` : 'unset', ({ position, offset = 0 })=>position === 'bottom' ? `${Number(offset) + 5}rem` : 'unset', String(classes.toastShowed), String(classes.toastHidden), ({ position })=>`translate(-50%, ${position === 'top' ? '-' : ''}5rem)`, ({ position })=>`translate(-50%, ${position === 'top' ? '-' : ''}5rem)`);
export const CloseIconWrapper = styled(Button).withConfig({
    displayName: "Toast.styles__CloseIconWrapper",
    componentId: "sc-38e2d0b0-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 const StyledOverlay = styled(Overlay).withConfig({
    displayName: "Toast.styles__StyledOverlay",
    componentId: "sc-38e2d0b0-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 const StyledContentLeft = styled.div.withConfig({
    displayName: "Toast.styles__StyledContentLeft",
    componentId: "sc-38e2d0b0-3"
})([
    `display:flex;--plasma_private-content-left-margin:var(`,
    `);margin:var(--plasma_private-content-left-margin);color:var(`,
    `);`
], tokens.contentLeftMargin, tokens.contentLeftColor);
export const StyledContent = styled.div.withConfig({
    displayName: "Toast.styles__StyledContent",
    componentId: "sc-38e2d0b0-4"
})([
    `color:`,
    `;`
], ({ textColor })=>textColor || 'currentColor');
