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

exports[`Link demo examples Snapshots: basic 1`] = `
.emotion-8 {
  font-family: "Open Sans";
}

.emotion-1 {
  font-size: 1.5em;
}

.emotion-0 {
  color: #3272d9;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-0:hover {
  color: #5691f0;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-0:focus {
  color: #3272d9;
  outline: 1px solid #1d5bbf;
  outline-offset: 2px;
}

.emotion-0:active {
  color: #1d5bbf;
}

.emotion-3 {
  font-size: 0.75em;
}

.emotion-5 {
  font-weight: 700;
}

.emotion-7 {
  font-family: serif;
}

<DemoLayout>
  <Styled(div)>
    <div
      className="emotion-8"
    >
      <Styled(p)>
        <p
          className="emotion-1"
        >
          Lorem ipsum dolor sit amet, 
          <Link
            href="http://example.com"
          >
            <Link
              href="http://example.com"
              target="_blank"
            >
              <Styled(a)
                href="http://example.com"
                target="_blank"
              >
                <a
                  className="emotion-0"
                  href="http://example.com"
                  target="_blank"
                >
                  consectetur
                </a>
              </Styled(a)>
            </Link>
          </Link>
           adipiscing elit,
        </p>
      </Styled(p)>
      <Styled(p)>
        <p
          className="emotion-3"
        >
          sed do eiusmod tempor 
          <Link
            href="http://example.com"
          >
            <Link
              href="http://example.com"
              target="_blank"
            >
              <Styled(a)
                href="http://example.com"
                target="_blank"
              >
                <a
                  className="emotion-0"
                  href="http://example.com"
                  target="_blank"
                >
                  incididunt
                </a>
              </Styled(a)>
            </Link>
          </Link>
           ut labore et dolore magna aliqua. 
        </p>
      </Styled(p)>
      <Styled(p)>
        <p
          className="emotion-5"
        >
          Ut enim 
          <Link
            href="http://example.com"
          >
            <Link
              href="http://example.com"
              target="_blank"
            >
              <Styled(a)
                href="http://example.com"
                target="_blank"
              >
                <a
                  className="emotion-0"
                  href="http://example.com"
                  target="_blank"
                >
                  ad minim veniam
                </a>
              </Styled(a)>
            </Link>
          </Link>
           quis nostrud exercitation
        </p>
      </Styled(p)>
      <Styled(p)>
        <p
          className="emotion-7"
        >
          ullamco laboris 
          <Link
            href="http://example.com"
          >
            <Link
              href="http://example.com"
              target="_blank"
            >
              <Styled(a)
                href="http://example.com"
                target="_blank"
              >
                <a
                  className="emotion-0"
                  href="http://example.com"
                  target="_blank"
                >
                  nisi ut
                </a>
              </Styled(a)>
            </Link>
          </Link>
           aliquip ex ea commodo consequat. 
        </p>
      </Styled(p)>
    </div>
  </Styled(div)>
</DemoLayout>
`;

exports[`Link demo examples Snapshots: button 1`] = `
.emotion-2 {
  box-sizing: border-box;
  color: #3272d9;
  font-family: "Open Sans",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 16px;
  line-height: 1.25;
  outline: 0;
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: antialiased;
  background-color: #ffffff;
  border-color: #c8d1e0;
  border-radius: 0.1875em;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  height: 2.5em;
  margin: 0;
  min-width: 2.5em;
  padding: 0 0.5em;
  -webkit-text-decoration: none;
  text-decoration: none;
  vertical-align: middle;
}

.emotion-2 *,
.emotion-2 *::before,
.emotion-2 *::after {
  box-sizing: inherit;
}

.emotion-2:focus {
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #ffffff,0 0 0 2px #1d5bbf;
  color: #3272d9;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-2:hover {
  background-color: #f5f7fa;
  border-color: #5691f0;
  color: #3272d9;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-2:focus:active,
.emotion-2:focus:hover {
  border-color: #c8d1e0;
}

.emotion-2:active {
  background-color: #ebeff5;
  border-color: #1d5bbf;
  color: #3272d9;
}

.emotion-2::-moz-focus-inner {
  border: 0;
}

.emotion-2 [role="img"] {
  box-sizing: content-box;
  color: #3272d9;
  display: block;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.emotion-2 [role="img"]:first-child {
  margin-right: 0.5em;
}

.emotion-2 [role="img"]:last-child {
  margin-left: 0.5em;
}

.emotion-2 [role="img"]:only-child {
  margin: 0;
}

.emotion-1 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-height: 100%;
  pointer-events: none;
  width: 100%;
}

.emotion-0 {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 0.875em;
  line-height: 2.857142857142857em;
}

.emotion-0:first-child {
  padding-left: 0.5714285714285714em;
}

.emotion-0:last-child {
  padding-right: 0.5714285714285714em;
}

<WithForwardRef(Button)
  as="a"
  href="#button"
  size="large"
>
  <Button
    as="a"
    forwardedRef={null}
    href="#button"
    size="large"
  >
    <Styled(button)
      as="a"
      href="#button"
      size="large"
      text="Link"
    >
      <a
        className="emotion-2"
        href="#button"
      >
        <Styled(span)>
          <span
            className="emotion-1"
          >
            <Styled(span)
              size="large"
            >
              <span
                className="emotion-0"
              >
                Link
              </span>
            </Styled(span)>
          </span>
        </Styled(span)>
      </a>
    </Styled(button)>
  </Button>
</WithForwardRef(Button)>
`;

exports[`Link demo examples Snapshots: children 1`] = `
.emotion-0 {
  color: #3272d9;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-0:hover {
  color: #5691f0;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-0:focus {
  color: #3272d9;
  outline: 1px solid #1d5bbf;
  outline-offset: 2px;
}

.emotion-0:active {
  color: #1d5bbf;
}

<Link
  href="http://example.com"
>
  <Link
    href="http://example.com"
    target="_blank"
  >
    <Styled(a)
      href="http://example.com"
      target="_blank"
    >
      <a
        className="emotion-0"
        href="http://example.com"
        target="_blank"
      >
        <img
          alt="gradient placeholder"
          src="/images/125x125.png"
        />
      </a>
    </Styled(a)>
  </Link>
</Link>
`;

exports[`Link demo examples Snapshots: other 1`] = `
.emotion-2 {
  font-family: "Open Sans";
}

.emotion-0 {
  color: #3272d9;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-0:hover {
  color: #5691f0;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-0:focus {
  color: #3272d9;
  outline: 1px solid #1d5bbf;
  outline-offset: 2px;
}

.emotion-0:active {
  color: #1d5bbf;
}

<DemoLayout>
  <Styled(div)>
    <div
      className="emotion-2"
    >
      <BrowserRouter>
        <Router
          history={
            Object {
              "action": "POP",
              "block": [Function],
              "createHref": [Function],
              "go": [Function],
              "goBack": [Function],
              "goForward": [Function],
              "length": 1,
              "listen": [Function],
              "location": Object {
                "hash": "",
                "pathname": "/",
                "search": "",
                "state": undefined,
              },
              "push": [Function],
              "replace": [Function],
            }
          }
        >
          <Link
            as={[Function]}
            to="/components/link"
          >
            <Styled(a)
              as={[Function]}
              to="/components/link"
            >
              <Link
                className="emotion-0"
                replace={false}
                to="/components/link"
              >
                <a
                  className="emotion-0"
                  href="/components/link"
                  onClick={[Function]}
                >
                  ReactRouter Link
                </a>
              </Link>
            </Styled(a)>
          </Link>
        </Router>
      </BrowserRouter>
    </div>
  </Styled(div)>
</DemoLayout>
`;

exports[`Link demo examples Snapshots: variants 1`] = `
.emotion-0 {
  color: #3272d9;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-0:hover {
  color: #5691f0;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-0:focus {
  color: #3272d9;
  outline: 1px solid #1d5bbf;
  outline-offset: 2px;
}

.emotion-0:active {
  color: #1d5bbf;
}

.emotion-5 {
  box-sizing: border-box;
  color: #333840;
  font-family: "Open Sans",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 16px;
  line-height: 1.25;
  outline: 0;
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: antialiased;
}

.emotion-5 *,
.emotion-5 *::before,
.emotion-5 *::after {
  box-sizing: inherit;
}

.emotion-4 {
  box-sizing: border-box;
  color: #333840;
  font-family: "Open Sans",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 16px;
  line-height: 1.25;
  outline: 0;
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: antialiased;
}

.emotion-4[class] > *:not(:last-child) {
  margin-right: 1em;
  margin-bottom: 1rem;
}

.emotion-4 *,
.emotion-4 *::before,
.emotion-4 *::after {
  box-sizing: inherit;
}

.emotion-1 {
  color: #de1b1b;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-1:hover {
  color: #f55353;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-1:focus {
  color: #de1b1b;
  outline: 1px solid #b80d0d;
  outline-offset: 2px;
}

.emotion-1:active {
  color: #b80d0d;
}

.emotion-2 {
  color: #2a854e;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-2:hover {
  color: #3ba164;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-2:focus {
  color: #2a854e;
  outline: 1px solid #20693d;
  outline-offset: 2px;
}

.emotion-2:active {
  color: #20693d;
}

.emotion-3 {
  color: #ad5f00;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-3:hover {
  color: #cf7911;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-3:focus {
  color: #ad5f00;
  outline: 1px solid #8a4d03;
  outline-offset: 2px;
}

.emotion-3:active {
  color: #8a4d03;
}

<DemoLayout>
  <Styled(DemoLayout)
    marginRight="1em"
  >
    <DemoLayout
      className="emotion-5"
      marginRight="1em"
    >
      <Styled(div)
        className="emotion-5"
        marginBottom="1rem"
        marginRight="1em"
      >
        <div
          className="emotion-4"
        >
          <Link
            href="http://example.com"
          >
            <Link
              href="http://example.com"
              target="_blank"
            >
              <Styled(a)
                href="http://example.com"
                target="_blank"
              >
                <a
                  className="emotion-0"
                  href="http://example.com"
                  target="_blank"
                >
                  Default
                </a>
              </Styled(a)>
            </Link>
          </Link>
          <Link
            href="http://example.com"
            variant="danger"
          >
            <Link
              href="http://example.com"
              target="_blank"
              variant="danger"
            >
              <Styled(a)
                href="http://example.com"
                target="_blank"
                variant="danger"
              >
                <a
                  className="emotion-1"
                  href="http://example.com"
                  target="_blank"
                >
                  Danger
                </a>
              </Styled(a)>
            </Link>
          </Link>
          <Link
            href="http://example.com"
            variant="success"
          >
            <Link
              href="http://example.com"
              target="_blank"
              variant="success"
            >
              <Styled(a)
                href="http://example.com"
                target="_blank"
                variant="success"
              >
                <a
                  className="emotion-2"
                  href="http://example.com"
                  target="_blank"
                >
                  Success
                </a>
              </Styled(a)>
            </Link>
          </Link>
          <Link
            href="http://example.com"
            variant="warning"
          >
            <Link
              href="http://example.com"
              target="_blank"
              variant="warning"
            >
              <Styled(a)
                href="http://example.com"
                target="_blank"
                variant="warning"
              >
                <a
                  className="emotion-3"
                  href="http://example.com"
                  target="_blank"
                >
                  Warning
                </a>
              </Styled(a)>
            </Link>
          </Link>
        </div>
      </Styled(div)>
    </DemoLayout>
  </Styled(DemoLayout)>
</DemoLayout>
`;
