@import "./common/var.scss";
@import "./mixins/mixin.scss";

@include b(step-loading) {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 2000;

  .step-loading-x{
    background: rgba(255,255,255, 0.8);
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
  }
  .sk-step-item{
    color: $sk-font-primary;
    &:last-child{
      margin-bottom: 0;
    }
    .step-item-name{
      font-size: 15px;
    }
  }
  .sk-loading-x{
    width: 20px;
    height: 20px;
    margin-right: 20px;
    font-size: 20px;
    color: $--color-success;
    position: relative;
    padding-bottom: 20px;
    .sk-icon{
      z-index: 999;
    }
    .sk-step-line{
      position: absolute;
      width: 2px;
      top: 20px;
      bottom: 0;
      left: 9px;
      background: $sk-border-primary;
    }
    .sk-step-line.success{
      background: $--color-success;
    }
    .sk-step-line.error{
      background: $--color-danger;
    }
  }
  .sk-loading-x.is-error{
    color: $--color-danger;
  }
  .breathe-div {
    width: 100%;
    height: 100%;
    border: 2px solid #2b92d4;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    color: #63c0ef;
    font-size: 12px;
    box-sizing: border-box;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
  }

  @-webkit-keyframes breathe {
    0% {
      opacity: .4;
      box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
      text-shadow: 0 1px 2px rgba(0, 147, 223, 0.4)
    }
    100% {
      opacity: 1;
      border: 2px solid rgba(59, 235, 235, 0.7);
      box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;
      text-shadow: 0 1px 10px #63c0ef
    }
  }
}