@import '~styles/utils.scss';

.activity-indicator-container {
    position: absolute;
    z-index: 1;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;

    background-color: rgba(251, 251, 251, 0.15);

    > .activity-indicator-bg,
    > .ball-pulse {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

}




@keyframes scale {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  45% {
    transform: scale(0.1);
    opacity: 0.7;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
}

.ball-pulse > div:nth-child(1) {
    -webkit-animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);
}

.ball-pulse > div:nth-child(2) {
    -webkit-animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);
}

.ball-pulse > div:nth-child(3) {
    -webkit-animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);
    animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);
}

.ball-pulse > div {
    width: 12px;
    height: 12px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.ball-pulse > div {
    background-color: #ccc;
    border-radius: 100%;
    margin: 2px;
    display: inline-block;
}


/* SIZES */
.ball-pulse.normal > div {
    width: 12px;
    height: 12px;
}

.ball-pulse.big > div {
    width: 16px;
    height: 16px;
}

.ball-pulse.small > div {
    width: 8px;
    height: 8px;
}

.activity-indicator-bg {
    background-color: #909090;
}

.activity-indicator-bg.normal {
    padding: 10px;
    border-radius: 5px;
}


.activity-indicator-bg.big {
    padding: 15px;
    border-radius: 10px;
}

.activity-indicator-bg.small {
    padding: 5px;
    border-radius: 3px;
}