import styled from 'styled-components';

type QRCodeOuterWrapperProps = {
  heightAndWidth: number;
};

export const QRCodeOuterWrapper = styled.div<QRCodeOuterWrapperProps>`
  ${({ heightAndWidth, theme }) => `
		height: ${heightAndWidth}px;
		width: ${heightAndWidth}px;
		background: ${theme.colors.neutral[0]};`}
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 5px;
`;

export const QRCodeBorder = styled.div<QRCodeOuterWrapperProps>`
  ${({ heightAndWidth, theme }) => `
		height: ${heightAndWidth}px;
		width: ${heightAndWidth}px;
		display: flex;
  justify-content: center;
  align-items: center;

  background: linear-gradient(to right, ${theme.colors.neutral[500]} 2px, transparent 2px) 0 0,
    linear-gradient(to right, ${theme.colors.neutral[500]} 2px, transparent 2px) 0 100%,
    linear-gradient(to left, ${theme.colors.neutral[500]} 2px, transparent 2px) 100% 0,
    linear-gradient(to left, ${theme.colors.neutral[500]} 2px, transparent 2px) 100% 100%,
    linear-gradient(to bottom, ${theme.colors.neutral[500]} 2px, transparent 2px) 0 0,
    linear-gradient(to bottom, ${theme.colors.neutral[500]} 2px, transparent 2px) 100% 0,
    linear-gradient(to top, ${theme.colors.neutral[500]} 2px, transparent 2px) 0 100%,
    linear-gradient(to top, ${theme.colors.neutral[500]} 2px, transparent 2px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 20px 20px;`}
`;