@charset "utf-8";
@import "../../base/fn";

.ysui-toast {
  position: fixed;
  z-index: 5000;
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
  text-align: center;
}

.ysui-toast__content {
  display: inline-block;
  position: relative;
  max-width: 80%;
  padding: (28 * $px) (30 * $px);
  background-color: rgba(0,0,0,0.6);
  text-align: left;
  border-radius: 8 * $px;
  color: #ffffff;
}

.ysui-toast__icon {
  width: 44 * $px;
  height: 44 * $px;
  position: absolute;
  left: 30 * $px;
  top: 50%;
  margin-top: -22 * $px;
}

.ysui-toast__text {
  font-size: $ysui-f30;
  line-height: 44 * $px / $ysui-f30;
}

.ysui-toast__icon + .ysui-toast__text {
  margin-left: 64 * $px;
}

.ysui-toast_success {
  .ysui-toast__icon {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAmVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VHQRUAAAAMnRSTlMA6vwUCfXx+e3b0YxtMA8E4r+6UUs9NiscGdXMyMS1rZaGgHt0ZGBcVkVBIgymm446JhEYBBwAAADISURBVDjL7dTHEoIwFAXQBAUDGivV3hXs7/8/zpeFCykzlwU77jJzJjN5JaJN49mqDLdEErUvInqCts/2McLsju0GtPsa9sB2Ddoj22kXs4OadgLaE9vVHbNntsshZi8W0eLf+kmFvbL1OrlWunGpnRWtUERuUmZ7RPOcFf7vsHjsJqVXeHmd2mxj7CEZ23GMlSgw9oYV/+0Yi7U1ZCs/2MBoYyNsvLQyFhvySBIpja2PZuuE4GJaxsIrT3YAfya4ZS1T0aaBfAGN9B4NfuhssgAAAABJRU5ErkJggg==) no-repeat center;
    background-size: contain;
  }
}

.ysui-toast_fail {
  .ysui-toast__icon {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsBAMAAADsqkcyAAAAGFBMVEUAAAD///////////////////////////8jfp1fAAAAB3RSTlMAnQN+FdvSKCCMDQAAAKFJREFUKM/N0rsNhDAQBNA1ugIQCem5AwIkUqIr4BLqcMK2D8wiDWicwyT+6NnyZ+1V+Qy34Xi2v3KdTescnclbY3o/F2cvF+zlG72m3zlxh5acmFwxuGByYnJi4cTkioMrBs/Awhdg4cDCF/+bJu3aNMferWKcpII7PuT9U5TjguCCDVxwcMHCgYUHFg4iPEEInwDIh1rF5nWu1Xcz2iPZAHqrMv1hnma9AAAAAElFTkSuQmCC) no-repeat center;
    background-size: contain;
  }
}

.ysui-toast_loading {
  .ysui-toast__icon {
    animation: ysuiLoading 1s steps(12, end) infinite;
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAsVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+3mHKcAAAAO3RSTlMABgkCIA00EsVFFuxPPPJJGfi5rKWVdmZiXTgtKf3mz4iDe1gm4tOwoJmQfnFqVEAxIxzd2L+0jG4PyhmXkygAAAIISURBVDjLjdTXkqpAEAbgnmHIWbICAmaSaU37/g924LhrrYow/wXMxVdd1d01Ay/BnJfYI0E4WflVxdAXLjufToIgfH9Pp9PlcpqrH+nYGY1GP7i1y6+v41nspEZ6Pjd4E6iERYglW89q8PFok3er2qvV2Zrx8CdSNT0uFl/Kq51Z1mqloLd+vcViEbvwFN+2rDzs7HkUx3HyVNe2rSsDnWGcOJazP2NY27YPH5PIslw/+nDW6wp64sjy4ncm5XqdQm8EWV7dT7vNZrPvx5ymafcBZpuNCAOpNE1o/6Hj5GgI41jT2oq+4+gwGFfT1gDokue3YWyYpoxhfrmUQBHBNEXQLxeRBmemmYKfJCEN1s1oBWWSSDR4HkVLyNIU02A+imQo0pShwSiKTCiKggHauEWBqbGXZTwVZBgGatfdU2PVdcdUFiEGiFsGNBgh1HyuZclSYNxi0K9XjqIwxi0mVeUzw4Ux/o9mlTcZLMzi+zaI53nSwChYlkX3o+77Sj9mbzf8ewz8QO21PH97tEWCIOB6LY/gkV0wm33c402SePz05MzqWuS7KJIMQ3rZ2qSuFWX/Pm/2cDCMtw0fFEXRxT16qsoT0mDcsaOxouuiyBG+XSyDWInM53tCJNT96qgN3m5Vdcxxu8kkDBt8wJ+v8GTb4HGLWz03cP9ieRLuOI6bhERiX/v9ByKZLBAOrnxBAAAAAElFTkSuQmCC) no-repeat center;
    background-size: contain;
  }
}

@-webkit-keyframes ysuiLoading {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@keyframes ysuiLoading {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}