/*
Loader
==============================================
Defines the loader icon
*/

.loader {
    @extend .spinner-border;
    @extend .text-primary;
}

/*
Element loader
==============================================
Element loader can be applied to any element.
*/

.has-element-loader {
    z-index: 15;
    pointer-events: none;
    position: relative;
}

.element-loader-backdrop {
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.3, 0, 0.15, 1), visibility 0.45s linear;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: $element-backdrop-bg;
    box-shadow: 0 0 11px 7px $element-backdrop-bg;
    z-index: 15;

    &.element-loader-backdrop-open {
        opacity: 1;
    }

    > .loader {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -$spacer;
        margin-top: -$spacer;
    }
}

/*
Skeleton screen
==============================================
Skeleton screen for reloading product-listing with subtle shimmer effect
*/

@keyframes skeletonShimmer {
    0% {
        background-position: -500px 0;
    }

    100% {
        background-position: 500px 0;
    }
}

.has-element-loader .cms-element-product-listing {
    .product-badges,
    .product-image-link,
    .product-review-rating {
        display: none;
    }

    .product-image-wrapper,
    .product-rating,
    .product-name,
    .product-variant-characteristics,
    .product-description,
    .product-price-unit,
    .product-cheapest-price-price,
    .product-price {
        border-radius: $border-radius;
        color: transparent;
        animation: skeletonShimmer 1.5s linear 0s infinite normal forwards running;
        background: linear-gradient(to right, $gray-300 8%, $gray-100 18%, $gray-300 28%);
        background-size: 800px 100px;
    }

    .product-rating {
        width: 50%;
    }

    .product-name {
        width: 75%;
    }

    .product-price {
        width: 35%;
    }

    // wishlist page
    .product-wishlist-info {
        &-item {
            border-radius: $border-radius;
            color: transparent;
            animation: skeletonShimmer 1.5s linear 0s infinite normal forwards running;
            background: linear-gradient(to right, $gray-300 8%, $gray-100 18%, $gray-300 28%);
            background-size: 800px 100px;
        }

        &-status {
            display: none;
        }
    }

    .product-variant-characteristics-text,
    .product-wishlist-remove {
        display: none;
    }
}
