import styled from "styled-components";

export const ImageFallbackContainer = styled.div`
  background: #dfe5e5;
  place-items: center;
  display: grid;
  width: ${({ $width }) => $width};
  height: ${({ $height }) => $height};
  overflow: hidden;

  svg {
    width: ${({ $size }) =>
      $size === "extra-small"
        ? "24px"
        : $size === "small"
        ? "32px"
        : $size === "big"
        ? "96px"
        : "64px"};
    height: ${({ $size }) =>
      $size === "extra-small"
        ? "24px"
        : $size === "small"
        ? "32px"
        : $size === "big"
        ? "96px"
        : "64px"};
  }
`;
