/**
 * NOTICE OF LICENSE
 *
 * This file is not open source! Each license that you purchased is only available for 1 website only.
 * If you want to use this file on more websites (or projects), you need to purchase additional licenses.
 * You are not allowed to redistribute, resell, lease, license, sub-license or offer our resources to any third party.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please contact us for extra customization service at an affordable price
 *
 *  @author DNK Soft <i@prestashop.world>
 *  @copyright  2021-2022 DNK Soft
 *  @license    Valid for 1 website (or project) for each purchase of license
 */

/**
* loading spinner
* -----------------------------------------------------
* default
*/

.spinner-default .spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 9px solid;
    border-color: var(--dnkloadingmaincolor);
    border-right-color: var(--dnkloadingbackcolor);
    animation: spinner-default-anim 1s infinite linear;
}

@keyframes spinner-default-anim {
    to {
        transform: rotate(1turn);
    }
}

/**
* loading spinner
* -----------------------------------------------------
* flipping
*/

.spinner-flipping .spinner {
    position: relative;
    width: 44.8px;
    height: 44.8px;
    animation: spinner-flipping-anim 2s infinite linear;
    perspective: 168px;
}

.spinner-flipping .spinner:before {
    content: '';
    display: block;
    width: 44.8px;
    height: 44.8px;
    position: absolute;
    animation: spinner-flipping-anim-before 1s infinite;
    background-color: var(--dnkloadingbackcolor);
    transform-origin: bottom;
}

@keyframes spinner-flipping-anim {
    0%, 50% {
        transform: rotate(45deg);
    }
    50.001%, 100% {
        transform: rotate(-45deg);
    }
}

@keyframes spinner-flipping-anim-before {
    0% {
        transform: translate(0, 0) rotateX(0deg);
    }
    50% {
        transform: translate(0, -100%) rotateX(0deg);
    }
    100% {
        transform: translate(0, -100%) rotateX(-180deg);
    }
}

/**
* loading spinner
* -----------------------------------------------------
* circle
*/

.spinner-circle .spinner {
    width: 56px;
    height: 56px;
    display: grid;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side,#0000 40%,#474bff 41%);
    background: linear-gradient(0deg ,var(--dnkloadingbackcolor) 50%,var(--dnkloadingmaincolor) 0) center/4.5px 100%,
    linear-gradient(90deg,var(--dnkloadingbackcolor) 25%,var(--dnkloadingmaincolor) 75%) center/100% 4.5px;
    background-repeat: no-repeat;
    animation: spinner-circle-anim  1s infinite steps(12);
}

.spinner-circle .spinner::before,.spinner-circle .spinner::after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    background: inherit;
    opacity: 0.915;
    transform: rotate(30deg);
}

.spinner-circle .spinner::after {
    opacity: 0.83;
    transform: rotate(60deg);
}

@keyframes spinner-circle-anim {
    100% {
        transform: rotate(1turn);
    }
}

/**
* loading spinner
* -----------------------------------------------------
* bordered
*/

.spinner-bordered .spinner {
    width: 104.4px;
    height: 24.6px;
    border-radius: 22.4px;
    color: var(--dnkloadingbackcolor);
    border: 2.2px solid;
    position: relative;
}

.spinner-bordered .spinner::before {
    content: "";
    position: absolute;
    margin: 2.2px;
    inset: 0 100% 0 0;
    border-radius: inherit;
    background: currentColor;
    animation: spinner-bordered-anim 2s infinite;
}

@keyframes spinner-bordered-anim {
    100% {
        inset: 0;
    }
}


/**
* loading spinner
* -----------------------------------------------------
* heart
*/

.spinner-heart .spinner {
    width: 71.6px;
    height: 71.6px;
    background: linear-gradient(var(--dnkloadingbackcolor)0, var(--dnkloadingbackcolor) 0) bottom/100% 0 no-repeat var(--dnkloadingmaincolor);
    -webkit-mask: radial-gradient(circle at 60% 65%, #000 62%, #0000 65%) top left,
    radial-gradient(circle at 40% 65%, #000 62%, #0000 65%) top right,
    linear-gradient(to bottom left, #000 42%,#0000 43%) bottom left ,
    linear-gradient(to bottom right,#000 42%,#0000 43%) bottom right;
    -webkit-mask-size: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    animation: spinner-heart-anim 2s infinite linear;
}

@keyframes spinner-heart-anim {
    90%, 100% {
        background-size: 100% 100%;
    }
}

/**
* loading spinner
* -----------------------------------------------------
* battery
*/

.spinner-battery .spinner {
    width: 89px;
    height: 44px;
    border: 2px solid var(--dnkloadingbackcolor);
    border-right-color: transparent;
    padding: 3px;
    background: repeating-linear-gradient(90deg,var(--dnkloadingbackcolor) 0 11.2px,#0000 0 16.8px) left/0 100% no-repeat content-box content-box;
    position: relative;
    animation: spinner-heart-anim 2s infinite steps(6);
}

.spinner-battery .spinner::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 100%;
    width: 11px;
    background: linear-gradient(
            #0000   calc(50% - 8.6px),var(--dnkloadingbackcolor) 0 calc(50% - 6.6px),
            #0000 0 calc(50% + 6.6px),var(--dnkloadingbackcolor) 0 calc(50% + 8.6px),#0000 0) left /100% 100%,
    linear-gradient(var(--dnkloadingbackcolor) calc(50% - 6.6px),#0000        0 calc(50% + 6.6px),var(--dnkloadingbackcolor) 0) left /2px 100%,
    linear-gradient(#0000        calc(50% - 6.6px),var(--dnkloadingbackcolor) 0 calc(50% + 6.6px),#0000        0) right/2px 100%;
    background-repeat: no-repeat;
}

@keyframes spinner-heart-anim {
    100% {
        background-size: 120% 100%;
    }
}

/**
* loading spinner
* -----------------------------------------------------
* line
*/

.spinner-line .spinner {
    height: 5px;
    width: 105px;
    background: linear-gradient(var(--dnkloadingbackcolor) 0,var(--dnkloadingbackcolor) 0),
    linear-gradient(var(--dnkloadingbackcolor) 0 0),var(--dnkloadingmaincolor);
    background-size: 60% 100%;
    background-repeat: no-repeat;
    animation: spinner-line-anim 3s infinite;
}

@keyframes  spinner-line-anim {
    0% {
        background-position: -150% 0,-150% 0;
    }

    66% {
        background-position: 250% 0,-150% 0;
    }

    100% {
        background-position: 250% 0, 250% 0;
    }
}

/**
* loading spinner
* -----------------------------------------------------
* dots
*/

.spinner-dots .spinner {
    width: 13.4px;
    height: 13.4px;
    background: var(--dnkloadingbackcolor);
    color: var(--dnkloadingbackcolor);
    border-radius: 50%;
    box-shadow: 14px 0, -26px 0;
    animation: spinner-dots-anim 0.5s infinite linear alternate;
}

@keyframes spinner-dots-anim {
    50% {
        box-shadow: 13.4px 0,-13.4px 0;
    }

    100% {
        box-shadow: 26.9px 0,-13.4px 0;
    }
}

/**
* loading spinner
* -----------------------------------------------------
* shapes
*/

.spinner-shapes .spinner {
    width: 44.8px;
    height: 44.8px;
    color: var(--dnkloadingbackcolor);
    background: linear-gradient(currentColor 0,currentColor 0), linear-gradient(currentColor 0,currentColor 0), linear-gradient(currentColor 0,currentColor 0), linear-gradient(currentColor 0,currentColor 0);
    background-size: 23.4px 23.4px;
    background-repeat: no-repeat;
    animation: spinner-shapes-anim 1.5s infinite cubic-bezier(0.3,1,0,1);
}

@keyframes spinner-shapes-anim {
    0% {
        background-position: 0    0,100% 0   ,100% 100%,0 100%;
    }
    33% {
        background-position: 0    0,100% 0   ,100% 100%,0 100%;
        width: 67.2px;
        height: 67.2px;
    }
    66% {
        background-position: 100% 0,100% 100%,0    100%,0 0;
        width: 67.2px;
        height: 67.2px;
    }
    100% {
        background-position: 100% 0,100% 100%,0    100%,0 0;
    }
}

/**
* loading spinner
* -----------------------------------------------------
* pulse
*/

.spinner-pulse .spinner {
    width: 22.4px;
    height: 22.4px;
    border-radius: 50%;
    background: var(--dnkloadingbackcolor);
    box-shadow: 0 0 0 0 var(--dnkloadingbackcolor);
    animation: spinner-pulse-anim 1.5s infinite linear;
    position: relative;
}

.spinner-pulse .spinner:before,
.spinner-pulse .spinner:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 var(--dnkloadingmaincolor);
    animation: inherit;
    animation-delay: -0.5s;
}

.spinner-pulse .spinner:after {
    animation-delay: -1s;
}

@keyframes spinner-pulse-anim {
    100% {
        box-shadow: 0 0 0 44.8px #0000;
    }
}

/**
* loading spinner
* -----------------------------------------------------
* blob
*/

.spinner-blob .spinner {
    width: 134.4px;
    height: 67.2px;
    display: flex;
    justify-content: space-between;
    background: var(--dnkloadingmaincolor);
    filter: blur(5.6px) contrast(10);
    padding: 11.2px;
    mix-blend-mode: darken;
}

.spinner-blob .spinner:before,
.spinner-blob .spinner:after {
    content: "";
    width: 45px;
    border-radius: 50%;
    background: var(--dnkloadingbackcolor);
    animation: spinner-blob-anim 1s infinite alternate;
}

.spinner-blob .spinner:after {
    --s: -1;
}

@keyframes spinner-blob-anim {
    90%, 100% {
        transform: translate(calc(var(--s,1)*33.6px));
    }
}

/**
* loading spinner
* -----------------------------------------------------
*
*/