@import './../styles/index.scss';

.encrypt-content{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  text-align: center;
  width: 64%;

  .encrypt-icon{
    background-image: url(../#{$_PATH_TO_IMAGES}/lock.png);
    background-size: 100% auto;
    height: 124px;
    margin: 55px auto 0;
    width: 158px;
  }

  h1{
    margin-top: 25px;
  }

  .encrypt-loading{
    margin: 10px auto 0;
    width: 175px;

    .bar {
      background-color: rgba(0, 145, 255, 0.25);
      border-radius: 5px;
      height: 8px;
      margin: 10px auto 0;
      position: relative;
      width: 100%;

      .content {
        padding: 0.5px;
        opacity: 1;
        border-radius: 5px;
        transition: width 1.5s;
        height: calc(100% - 1px);
        background-image:
          repeating-linear-gradient(
            -45deg,
          #74c2fc,
          #74c2fc 11px,
          #c7e6fe 10px,
          #c7e6fe 20px
          );
        background-size: 28px 28px;
        animation: move 1s linear infinite;
      }

      @keyframes move {
        0% { background-position: 0 0; }
        100% { background-position: 28px 0; }
      }
    }

    .percent {
      height: 22px;
      margin: 8px auto 0;
      position: relative;
      width: 46px;

      &::before{
        content: "";
        position: absolute;
        top: -10px;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #373a45 transparent;
      }
      
      .content {
        width: 45px;
        height: 22px;
        border-radius: 50px;
        background-color: #373a45;
        text-align: center;

        span {
          color: #fff;
          margin: 0px 6px;
          font-size: 13px;
        }
      }
    }
  }

  >span{
    color: #8d95a5;
    font-size: 12px;
    margin-top: 25px;
  }
}