import { rem } from 'polished';
import styled from 'styled-components';

import { FlexColumn, FlexRow } from './styled/layout';
import { colors } from './styled/variables';

export const Wrapper = styled(FlexColumn)`
  background: ${colors.background};
  bottom: 0;
  color: ${colors.foreground};
  font-size: ${rem(14)};
  font-family: Hack, monospace;
  left: 0;
  line-height: ${rem(16)};
  position: absolute;
  right: 0;
  top: 0;
  user-select: none;
`;

export const View = styled(FlexRow)`
  flex: 1;
  overflow: hidden;
  width: 100%;
  z-index: 10;
`;

export const Overlay = styled.div`
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 20;
`;
