import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config'

export const WrapperError = styled.div`
  position: fixed;
  top: 20px;
  right: 20px;
  width: 390px;
  max-height: 500px;
  border-radius: 10px;
  background-color: #333333;
  color: white;
  padding: 20px;
  font-size: 0.8rem;
  text-align: center;
  z-index: 1000000;
  white-space: pre-wrap;

  ${isMobileDevice
    && css`
        position: absolute;
        width: auto;
        top: 10%;
        left: 50%;
        max-width: 70vw;
        transform: translateX(-50%)
      `
}
`