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

exports[`StatusIcon with account renders children in correct order 1`] = `
.c1 {
  height: 16px;
  width: 16px;
}

.c1 path {
  stroke: rgba(19,19,19,0.35);
  background: rgba(19,19,19,0.63);
  fill: rgba(19,19,19,0.35);
}

.c2 {
  -webkit-animation: 2s fvtopB linear infinite;
  animation: 2s fvtopB linear infinite;
}

.c0 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.c0 > img,
.c0 span {
  height: 16px;
  width: 16px;
}

.c3 {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 16px;
  height: 16px;
  bottom: -4px;
  right: -4px;
  border-radius: 50%;
  outline: 2px solid #FFFFFF;
  outline-offset: -0.1px;
  background-color: #FFFFFF;
  overflow: hidden;
}

.c5 {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 16px;
  height: 16px;
  bottom: -4px;
  left: -4px;
  border-radius: 50%;
  outline: 2px solid #FFFFFF;
  outline-offset: -0.1px;
  background-color: #FFFFFF;
  overflow: hidden;
}

.c4 {
  width: 16px;
  height: 16px;
}

@media only screen and (min-width:1024px) {
  .c0 {
    margin-right: 4px;
  }
}

@media (max-width:960px) {
  .c0 {
    -webkit-align-items: flex-end;
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
  }
}

@supports (overflow:clip) {
  .c3 {
    overflow: clip;
  }
}

@supports (overflow:clip) {
  .c5 {
    overflow: clip;
  }
}

<div
  class="c0"
  data-testid="StatusIconRoot"
  size="16"
>
  <svg
    class="c1 c2"
    data-testid="IdenticonLoader"
    fill="rgba(19, 19, 19, 0.35)"
    stroke="rgba(19, 19, 19, 0.35)"
    viewBox="0 0 54 54"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M53.6666 26.9999C53.6666 41.7275 41.7276 53.6666 27 53.6666C12.2724 53.6666 0.333313 41.7275 0.333313 26.9999C0.333313 12.2723 12.2724 0.333252 27 0.333252C41.7276 0.333252 53.6666 12.2723 53.6666 26.9999ZM8.33331 26.9999C8.33331 37.3092 16.6907 45.6666 27 45.6666C37.3093 45.6666 45.6666 37.3092 45.6666 26.9999C45.6666 16.6906 37.3093 8.33325 27 8.33325C16.6907 8.33325 8.33331 16.6906 8.33331 26.9999Z"
      fill="rgba(19, 19, 19, 0.35)"
      opacity="0.1"
    />
    <path
      d="M49.6666 26.9999C51.8758 26.9999 53.6973 25.1992 53.3672 23.0149C53.0452 20.884 52.4652 18.7951 51.6368 16.795C50.2966 13.5597 48.3324 10.62 45.8562 8.14374C43.3799 5.66751 40.4402 3.70326 37.2049 2.36313C35.2048 1.53466 33.1159 0.954747 30.985 0.632693C28.8007 0.30256 27 2.12411 27 4.33325C27 6.54239 28.8108 8.29042 30.9695 8.76019C32.0523 8.99585 33.1146 9.32804 34.1434 9.75417C36.4081 10.6923 38.4659 12.0672 40.1993 13.8006C41.9327 15.534 43.3076 17.5918 44.2457 19.8565C44.6719 20.8853 45.004 21.9476 45.2397 23.0304C45.7095 25.1891 47.4575 26.9999 49.6666 26.9999Z"
      fill="rgba(19, 19, 19, 0.35)"
    />
  </svg>
  <div
    class="c3"
    data-testid="MiniIcon"
  >
    <img
      alt="undefined icon"
      class="c4"
      src="metamask-icon.svg"
    />
  </div>
  <div
    class="c5"
  >
    <img
      class="c4"
      src="socks.svg"
    />
  </div>
</div>
`;

exports[`StatusIcon with no account renders children in correct order 1`] = `
.c0 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.c0 > img,
.c0 span {
  height: 16px;
  width: 16px;
}

.c1 {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 16px;
  height: 16px;
  bottom: -4px;
  left: -4px;
  border-radius: 50%;
  outline: 2px solid #FFFFFF;
  outline-offset: -0.1px;
  background-color: #FFFFFF;
  overflow: hidden;
}

.c2 {
  width: 16px;
  height: 16px;
}

@media only screen and (min-width:1024px) {
  .c0 {
    margin-right: 4px;
  }
}

@media (max-width:960px) {
  .c0 {
    -webkit-align-items: flex-end;
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
  }
}

@supports (overflow:clip) {
  .c1 {
    overflow: clip;
  }
}

<div
  class="c0"
  data-testid="StatusIconRoot"
  size="16"
>
  <div
    class="c1"
  >
    <img
      class="c2"
      src="socks.svg"
    />
  </div>
</div>
`;
