// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Snippet should render correctly 1`] = `
"<div class=\\"snippet \\"><pre>yarn add @zeit-ui/react</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
        .snippet {
          position: relative;
          width: initial;
          max-width: 100%;
          padding: 8pt;
          padding-right: calc(2 * 16pt);
          color: #000;
          background-color: #fff;
          border: 1px solid #eaeaea;
          border-radius: 5px;
        }

        pre {
          margin: 0;
          padding: 0;
          border: none;
          background-color: transparent;
          color: #000;
          font-size: 0.8125rem;
        }

        pre::before {
          content: '$ ';
          user-select: none;
        }

        pre :global(*) {
          margin: 0;
          padding: 0;
          font-size: inherit;
          color: inherit;
        }

        .copy {
          position: absolute;
          right: 0;
          top: -2px;
          transform: translateY(50%);
          background-color: #fff;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: calc(2 * 16pt);
          color: inherit;
          transition: opacity 0.2s ease 0s;
          border-radius: 5px;
          cursor: pointer;
          user-select: none;
        }

        .copy:hover {
          opacity: 0.7;
        }
      </style></div>"
`;

exports[`Snippet should work with different styles 1`] = `
"<div><div class=\\"snippet \\"><pre>yarn add @zeit-ui/react</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
        .snippet {
          position: relative;
          width: initial;
          max-width: 100%;
          padding: 8pt;
          padding-right: calc(2 * 16pt);
          color: #000;
          background-color: #fff;
          border: 1px solid #eaeaea;
          border-radius: 5px;
        }

        pre {
          margin: 0;
          padding: 0;
          border: none;
          background-color: transparent;
          color: #000;
          font-size: 0.8125rem;
        }

        pre::before {
          content: '$ ';
          user-select: none;
        }

        pre :global(*) {
          margin: 0;
          padding: 0;
          font-size: inherit;
          color: inherit;
        }

        .copy {
          position: absolute;
          right: 0;
          top: -2px;
          transform: translateY(50%);
          background-color: #fff;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: calc(2 * 16pt);
          color: inherit;
          transition: opacity 0.2s ease 0s;
          border-radius: 5px;
          cursor: pointer;
          user-select: none;
        }

        .copy:hover {
          opacity: 0.7;
        }
      </style></div><div class=\\"snippet \\"><pre>yarn add @zeit-ui/react</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
        .snippet {
          position: relative;
          width: 20%;
          max-width: 100%;
          padding: 8pt;
          padding-right: calc(2 * 16pt);
          color: #000;
          background-color: #fff;
          border: 1px solid #eaeaea;
          border-radius: 5px;
        }

        pre {
          margin: 0;
          padding: 0;
          border: none;
          background-color: transparent;
          color: #000;
          font-size: 0.8125rem;
        }

        pre::before {
          content: '$ ';
          user-select: none;
        }

        pre :global(*) {
          margin: 0;
          padding: 0;
          font-size: inherit;
          color: inherit;
        }

        .copy {
          position: absolute;
          right: 0;
          top: -2px;
          transform: translateY(50%);
          background-color: #fff;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: calc(2 * 16pt);
          color: inherit;
          transition: opacity 0.2s ease 0s;
          border-radius: 5px;
          cursor: pointer;
          user-select: none;
        }

        .copy:hover {
          opacity: 0.7;
        }
      </style></div><div class=\\"snippet \\"><pre>yarn add @zeit-ui/react</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
        .snippet {
          position: relative;
          width: initial;
          max-width: 100%;
          padding: 8pt;
          padding-right: calc(2 * 16pt);
          color: #666;
          background-color: #fff;
          border: 1px solid #666;
          border-radius: 5px;
        }

        pre {
          margin: 0;
          padding: 0;
          border: none;
          background-color: transparent;
          color: #666;
          font-size: 0.8125rem;
        }

        pre::before {
          content: '$ ';
          user-select: none;
        }

        pre :global(*) {
          margin: 0;
          padding: 0;
          font-size: inherit;
          color: inherit;
        }

        .copy {
          position: absolute;
          right: 0;
          top: -2px;
          transform: translateY(50%);
          background-color: #fff;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: calc(2 * 16pt);
          color: inherit;
          transition: opacity 0.2s ease 0s;
          border-radius: 5px;
          cursor: pointer;
          user-select: none;
        }

        .copy:hover {
          opacity: 0.7;
        }
      </style></div><div class=\\"snippet \\"><pre>yarn add @zeit-ui/react</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
        .snippet {
          position: relative;
          width: initial;
          max-width: 100%;
          padding: 8pt;
          padding-right: calc(2 * 16pt);
          color: #fff;
          background-color: #0070f3;
          border: 1px solid #0070f3;
          border-radius: 5px;
        }

        pre {
          margin: 0;
          padding: 0;
          border: none;
          background-color: transparent;
          color: #fff;
          font-size: 0.8125rem;
        }

        pre::before {
          content: '$ ';
          user-select: none;
        }

        pre :global(*) {
          margin: 0;
          padding: 0;
          font-size: inherit;
          color: inherit;
        }

        .copy {
          position: absolute;
          right: 0;
          top: -2px;
          transform: translateY(50%);
          background-color: #0070f3;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: calc(2 * 16pt);
          color: inherit;
          transition: opacity 0.2s ease 0s;
          border-radius: 5px;
          cursor: pointer;
          user-select: none;
        }

        .copy:hover {
          opacity: 0.7;
        }
      </style></div></div>"
`;

exports[`Snippet should work with multi-line 1`] = `
"<div class=\\"snippet \\"><pre>cd project</pre><pre>now</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
        .snippet {
          position: relative;
          width: initial;
          max-width: 100%;
          padding: 8pt;
          padding-right: calc(2 * 16pt);
          color: #000;
          background-color: #fff;
          border: 1px solid #eaeaea;
          border-radius: 5px;
        }

        pre {
          margin: 0;
          padding: 0;
          border: none;
          background-color: transparent;
          color: #000;
          font-size: 0.8125rem;
        }

        pre::before {
          content: '$ ';
          user-select: none;
        }

        pre :global(*) {
          margin: 0;
          padding: 0;
          font-size: inherit;
          color: inherit;
        }

        .copy {
          position: absolute;
          right: 0;
          top: -2px;
          transform: translateY(50%);
          background-color: #fff;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: calc(2 * 16pt);
          color: inherit;
          transition: opacity 0.2s ease 0s;
          border-radius: 5px;
          cursor: pointer;
          user-select: none;
        }

        .copy:hover {
          opacity: 0.7;
        }
      </style></div>"
`;
