@import "var";

.ajax-busying-mask{
  display:none;
  position: absolute;
  z-index: 2000;
  background-color: $--ajax-mask-bg-color;
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.3s;
  .spinner {
    top: 50%;
    margin-top: -10px;
    width: 100%;
    text-align: center;
    position: absolute;
    .icon {
      height: 21px;
      width: 21px;
      animation: loading-rotate 2s linear infinite;
      .path{
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: rgba(34, 119, 218, 1);
        stroke-linecap: round;
      }
    }
  }
}
.ajax-busying{
  pointer-events:none;
  position:relative !important;
  .ajax-busying-mask{
    display:block;
  }
}

#waiting-bar {
  position: fixed;
  z-index: 1001;
  transition-property:top,visibility;
  transition-duration:1s;
  left:50%;
  transform:translate(-50%, 0);

  &.slider-down {
    top: 3px;
    visibility: visible;
  }

  &.slider-up {
    transition-delay: 1s;
    top: -60px;
    visibility: hidden;
  }

  &:hover {
    transition-delay: 0s;
    top: 1px;
    visibility: visible;
  }

  .con {
    display:inline-block;
    border-top: none;
    background: $--wait-bar-bg-color;
    text-align: left;
    font-size: 14px;
    color: $--wait-bar-text-color;
  }

  .icon-box {
    float: left;
    width: $--wait-bar-height;
    height: $--wait-bar-height;
    position: relative;
  }

  .message {
    float: left;
    line-height: 24px;
    padding: ($--wait-bar-height - 24)/2 20px 0 10px;
  }

  .icon {
    width: $--wait-bar-height;
    height: $--wait-bar-height;
    margin: 0;
    position: absolute;
    background-repeat: no-repeat;
  }

  /** -------------------animation-------------------------- */
  .waiting {
    width: $--wait-bar-height;
    height: $--wait-bar-height;
    padding: $--wait-bar-height / 4 $--wait-bar-height / 2;
    position: absolute;
    background: $--wait-bar-bounce-bg-color;
    .waiting-bounce-out,.waiting-bounce-in {
      margin:20%;
      width: 60%;
      height: 60%;
      border-radius: 50%;
      border: $--wait-bar-bounce-border;
      position: absolute;
      top: 0;
      left: 0;
    }

    .waiting-bounce-out {
      animation: bounce 2.0s ease 1.0s infinite;
    }

    .waiting-bounce-in {
      animation: bounce 2.0s ease 0s infinite;
    }
  }

  @keyframes bounce {
    0%, 100% {
      transform: scale(0.0);
    }
    50% {
      transform: scale(1.0);
    }
  }
}