import { styled } from "styled-components";

export const MediaErrorContainer = styled.div`
  width: ${({ width }) => (width ? width : "auto")};
  height: ${({ height }) => (height ? height : "auto")};
  background: ${({ bgColor }) => bgColor || "#dbdbdb"};
  display: grid;
  place-items: center;

  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 40px;
    padding: 16px;

    img {
      width: 96px;
    }

    p {
      font-size: 22px;
      color: #4a4d4d;
      font-weight: 500;
    }
  }

  &.small {
    div {
      img {
        display: none;
      }

      p {
        font-size: 16px;
      }
    }
  }
`;
