@import "app/styles/variables";

$spinner-color: $primary-color;

bl-loading {
    display: block;

    .loading-content {
        opacity: 1;
        transition: 100ms ease-in;

        &.loading {
            opacity: 0.25;
        }
    }
}

.loading-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: $zindex-loading;
    min-height: 100px;

    &.relative {
        position: relative;
    }
}
.spinner {

    position: relative;

    &.large {
        margin: 40px auto;
        width: 40px;
        height: 40px;
    }

    &.medium {
        margin: 10px auto;
        width: 20px;
        height: 20px;
    }

    &.small {
        margin: 5px auto;
        width: 10px;
        height: 10px;
    }
}

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: $spinner-color;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-bounce 2s infinite ease-in-out;
    animation: sk-bounce 2s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

@-webkit-keyframes sk-bounce {
    0%, 100% { -webkit-transform: scale(0); }
    50% { -webkit-transform: scale(1); }
}

@keyframes sk-bounce {
    0%, 100% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    50% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

.entity-not-found {
    width: 600px;
    margin: 50px auto;
    background: $warn-color;
    padding: 10px;
    color: $warn-contrast-color;
    white-space: pre;
}
