// ─────────────────────────────────────────────────────────────────────────────
// import
// ─────────────────────────────────────────────────────────────────────────────

import styled from 'styled-components';
import { fadeOutAnimation } from '../../utils';

// ─────────────────────────────────────────────────────────────────────────────
// component
// ─────────────────────────────────────────────────────────────────────────────

export default styled.div(
  {
    position:  'fixed',
    left:      0,
    right:     0,
    padding:   '1rem',
    textAlign: 'center',
    zIndex:    'var(--z-index-popover)',
    animation: `250ms ${fadeOutAnimation} forwards`,
  },
  ({
    duration = 1000,
    color = 'white',
    backgroundColor = 'var(--color-success)',
    bottom = 'auto',
    top = '0',
  }) => ({
    animationDelay: `${duration - 250}ms`,
    color,
    backgroundColor,
    bottom,
    top,
  }),
);

@@ -231,16 +231,30 @@
 nimation
+, mediaQuerise
  %7D from 
@@ -629,61 +629,8 @@
 )',%0A
-    animation: %60250ms $%7BfadeOutAnimation%7D forwards%60,%0A
   %7D,
@@ -723,16 +723,30 @@
 cess)',%0A
+    fontSize,%0A
     bott
@@ -778,22 +778,11 @@
 ',%0A 
- %7D) =%3E (%7B%0A
    
- 
 anim
@@ -790,89 +790,200 @@
 tion
-Delay: %60$%7Bduration - 250%7Dms%60,%0A    color,%0A    backgroundColor,%0A    bottom,%0A    top
+ = %60250ms $%7BfadeOutAnimation%7D forwards%60,%0A  %7D) =%3E (%7B%0A    color,%0A    backgroundColor,%0A    fontSize,%0A    ...mediaQuerise(%7B bottom, top %7D),%0A    animation,%0A    animationDelay: %60$%7Bduration - 250%7Dms%60
 ,%0A  

update popup component props logic