import { jsxs as n, jsx as e } from "react/jsx-runtime";
import { Box as o } from "@mui/material";
import { styled as i } from "../Theme/index.js";
import r from "./NFTBroken.svg.js";
function c({ children: t = "Non-publicly accessible NFT" } = {}) {
  return /* @__PURE__ */ n(s, { children: [
    /* @__PURE__ */ e(r, { className: "nft-display-broken-background" }),
    t && /* @__PURE__ */ e(o, { className: "nft-display-broken-content", children: t })
  ] });
}
const s = i(o)`
  width: 100%;
  height: 100%;
  position: relative;

  .nft-display-broken-background {
    width: 100%;
    height: 100%;
  }

  .nft-display-broken-content {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    mix-blend-mode: plus-darker;
    font-size: 13px;
    color: #9aa3b0;
    text-align: center;
    text-shadow:
      0 0 2px #fff,
      0 0 2px #fff,
      0 0 2px #fff;
    user-select: none;
  }
`;
export {
  c as default
};
