import styled from 'styled-components'
import {rem, zIndex} from '../../style/function.style'

export const Toast = styled.div`
position: fixed;
z-index: ${zIndex('toast')};
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin-top: ${rem(-41)}; */
    text-align: center;
    width: ${rem(638)};
    transform: translate(-50%, -50%);
}

.main {
    /* display: inline-block; */
    padding: ${rem(28)} ${rem(48)};
    font-size: ${rem(28)};
    line-height: ${rem(40)};
    background-color: rgba(0,0,0,.8);
    /* box-shadow: 0 0 2px #0a0a0a; */
    color: #fff;
    border-radius: ${rem(48)};
}

/* 弹入 */
&.a-bouncein{
  -webkit-animation:bouncein 1s ease-out .3s backwards;
  -moz-animation:bouncein 1s ease-out .3s backwards;
  -ms-animation:bouncein 1s ease-out .3s backwards;
  animation:bouncein 1s ease-out .3s backwards;
}

:root:-webkit-full-screen-ancestor .m-toast {
    z-index: 99999999991;
}

`