@import "../../../theme";

@loading-fade-duration: @time-fast;
@loading-slide-duration: 2s;
@loading-slide-delay: 2 * @time-slow;

.loader {
    background-color: @color-back;
    height: @popup-content-height + 2 * @popup-content-padding;
    left: 50%;
    pointer-events: none;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background-color @loading-fade-duration ease-out;
    width: @popup-content-width + 2 * @popup-content-padding;
    z-index: 999;

    &--complete {
        background-color: fade(@color-back, 0%);

        &::before {
            opacity: 0;
            transition: opacity @loading-fade-duration ease-in;
        }
    }

    &--transition-end {
        display: none;
    }

    &::before {
        animation: @loading-slide-duration loading-slide @loading-slide-delay ease-in-out infinite, @loading-slide-duration * 2 @loading-slide-delay loading-color linear infinite;
        background-color: @color-border;
        content: "";
        display: block;
        height: @size-border-inner;
        left: 0%;
        position: absolute;
        top: @popup-content-padding + @size-control-inner + @indent-small;
        width: 0%;
    }

    &__message {
        animation: @loading-fade-duration loading-fade-in @loading-slide-delay ease-in forwards;
        color: @color-heading;
        font-size: @size-text-small;
        opacity: 0;
        position: absolute;
        right: @popup-content-padding;
        bottom: @popup-content-height + @popup-content-padding - @size-control-inner - @indent-small;
    }

    &__error {
        font-size: @size-text-normal; 
    }

    &--complete &__message {
        color: fade(@color-heading, 0%);
        transition: color @loading-fade-duration ease-out;
    }
}

@keyframes loading-slide {
    0% {
        left: 0%;
        width: 0%;
    }
    50% {
        left: 0%;
        width: 100%;
    }
    100% {
        left: 100%;
        width: 0%;
    }
}

@keyframes loading-color {
    0%, 49% {
        background-color: @color-border;
    }
    50%, 100% {
        background-color: @color-heading;
    }
}

@keyframes loading-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
