import styled from 'styled-components';

const css = styled.div;

export default css<any>`
   ${(props) =>
      props.fullscreen &&
      `
         width: 100%;
         height: 100%;
         top: 0px;
         left: 0px;
         position: absolute;
         display: flex;
         align-items: center;
         justify-content: center;
         background: rgba(255, 255, 255, 0.6);
         z-index: 10;
         overflow: scroll;
   `}

   .connection-lost {
      padding: 20px 10px;
      overflow: auto;
      max-height: 100%;
   }

   img {
      max-width: 200px;
      margin-bottom: 25px;
   }

   .content {
      text-align: center;
   }

   h1 {
      font-size: 22px;
      font-weight: bold;
   }

   h4 {
      font-size: 16px;
      line-height: 1.4;
   }

   .retry-btn {
      border: none;
      padding: 10px 20px;
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 700;
      margin-top: 20px;
      background: transparent;
      color: white;
      background: #222;
   }

   svg {
      width: 100px;
      height: 100px;
      fill: #555;
   }
`;
