/**
 * Copyright (©) 2023 Pinpoint Designs LTD. All right's reserved.
 *
 * @category    Pinpoint
 * @copyright   Copyright (c) 2023 Pinpoint Designs. (https://www.pinpointdesigns.co.uk)
 * @author      Ricky Goacher <ricky.goacher@pinpointdesigns.co.uk>
 */

@media screen and (max-width: 768px) {

    [data-content-type="pinpoint_pagebuilderuspbar"] {
        position: relative;
        display: flex;
        gap: 0;
    }

    /* Create sliding functionality based on the data-num-of-child-elements attribute value  */

    /* Slide Animation */

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"] {
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"] [data-content-type="pinpoint_pagebuilderuspitem"]:first-child {
        transform: translateX(0);
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="1"] {
        animation-name: sliding-one;
        width: calc(100% * 1);
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="2"] {
        animation-name: sliding-two;
        width: calc(50% * 2);
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="3"] {
        animation-name: sliding-three;
        width: calc(50% * 3);
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="4"] {
        animation-name: sliding-four;
        width: calc(50% * 4);
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="5"] {
        animation-name: sliding-five;
        width: calc(50% * 5);
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="6"] {
        animation-name: sliding-six;
        width: calc(50% * 6);
    }

    [data-content-type="pinpoint_pagebuilderuspitem"] {
        display: flex;
        justify-content: center;
        gap: 12px;
        width: 100%
    }

    /* Controls animation speed for slide */

    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-slow"] {
        animation-duration: 30s;
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-medium"] {
        animation-duration: 20s;
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-fast"] {
        animation-duration: 10s;
    }

    /* Fade animation */

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="fade"] {
        min-height: 50px;
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]{
        animation: fade-in linear infinite 0s;
    }

    /* Slow fade */

    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-slow"][data-animation-type="fade"][data-num-of-child-elements="2"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 16s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-slow"][data-animation-type="fade"][data-num-of-child-elements="3"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 24s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-slow"][data-animation-type="fade"][data-num-of-child-elements="4"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 32s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-slow"][data-animation-type="fade"][data-num-of-child-elements="5"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 40s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-slow"][data-animation-type="fade"][data-num-of-child-elements="6"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 48s;
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-slow"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(2) {
        animation-delay: 8s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-slow"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(3) {
        animation-delay: 16s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-slow"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(4) {
        animation-delay: 24s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-slow"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(5) {
        animation-delay: 32s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-slow"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(6) {
        animation-delay: 40s;
    }

    /* Medium fade */

    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-medium"][data-animation-type="fade"][data-num-of-child-elements="2"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 12s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-medium"][data-animation-type="fade"][data-num-of-child-elements="3"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 18s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-medium"][data-animation-type="fade"][data-num-of-child-elements="4"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 24s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-medium"][data-animation-type="fade"][data-num-of-child-elements="5"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 30s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-medium"][data-animation-type="fade"][data-num-of-child-elements="6"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 36s;
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-medium"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(2) {
        animation-delay: 6s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-medium"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(3) {
        animation-delay: 12s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-medium"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(4) {
        animation-delay: 18s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-medium"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(5) {
        animation-delay: 24s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-medium"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(6) {
        animation-delay: 30s;
    }

    /* Fast fade */

    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-fast"][data-animation-type="fade"][data-num-of-child-elements="2"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 8s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-fast"][data-animation-type="fade"][data-num-of-child-elements="3"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 12s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-fast"][data-animation-type="fade"][data-num-of-child-elements="4"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 16s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-fast"][data-animation-type="fade"][data-num-of-child-elements="5"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 20s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-fast"][data-animation-type="fade"][data-num-of-child-elements="6"] [data-content-type="pinpoint_pagebuilderuspitem"] {
        animation-duration: 24s;
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-fast"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(2) {
        animation-delay: 4s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-fast"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(3) {
        animation-delay: 8s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-fast"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(4) {
        animation-delay: 12s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-fast"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(5) {
        animation-delay: 16s;
    }
    [data-content-type="pinpoint_pagebuilderuspbar"][data-slide-speed="animation-fast"][data-animation-type="fade"] [data-content-type="pinpoint_pagebuilderuspitem"]:nth-child(6) {
        animation-delay: 20s;
    }
}

@media screen and (max-width: 480px) {
    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="1"] {
        animation-name: sliding-one;
        width: calc(100% * 1);
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="2"] {
        animation-name: sliding-two;
        width: calc(100% * 2);
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="3"] {
        animation-name: sliding-three;
        width: calc(100% * 3);
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="4"] {
        animation-name: sliding-four;
        width: calc(100% * 4);
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="5"] {
        animation-name: sliding-five;
        width: calc(100% * 5);
    }

    [data-content-type="pinpoint_pagebuilderuspbar"][data-animation-type="slide"][data-num-of-child-elements="6"] {
        animation-name: sliding-six;
        width: calc(100% * 6);
    }
}

/* Animations */

@keyframes sliding-one {
    30% {
        transform: translateX(0);
    }
    35% {
        transform: translateX(calc(-100% / 1));
    }
    65% {
        transform: translateX(calc(-100% / 1));
    }
    70% {
        transform: translateX(calc(-100% / 1 * 2));
    }
    98% {
        transform: translateX(calc(-100% / 1 * 2));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes sliding-two {
    30% {
        transform: translateX(0);
    }
    35% {
        transform: translateX(calc(-100% / 2));
    }
    65% {
        transform: translateX(calc(-100% / 2));
    }
    70% {
        transform: translateX(calc(-100% / 2 * 2));
    }
    98% {
        transform: translateX(calc(-100% / 2 * 2));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes sliding-three {
    30% {
        transform: translateX(0);
    }
    35% {
        transform: translateX(calc(-100% / 3));
    }
    65% {
        transform: translateX(calc(-100% / 3));
    }
    70% {
        transform: translateX(calc(-100% / 3 * 2));
    }
    98% {
        transform: translateX(calc(-100% / 3 * 2));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes sliding-four {
    30% {
        transform: translateX(0);
    }
    35% {
        transform: translateX(calc(-100% / 4));
    }
    65% {
        transform: translateX(calc(-100% / 4));
    }
    70% {
        transform: translateX(calc(-100% / 4 * 2));
    }
    75% {
        transform: translateX(calc(-100% / 4 * 2));
    }
    80% {
        transform: translateX(calc(-100% / 4 * 3));
    }
    85% {
        transform: translateX(calc(-100% / 4 * 3));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes sliding-five {
    30% {
        transform: translateX(0);
    }
    35% {
        transform: translateX(calc(-100% / 5));
    }
    40% {
        transform: translateX(calc(-100% / 5));
    }
    45% {
        transform: translateX(calc(-100% / 5 * 2));
    }
    50% {
        transform: translateX(calc(-100% / 5 * 2));
    }
    55% {
        transform: translateX(calc(-100% / 5 * 3));
    }
    60% {
        transform: translateX(calc(-100% / 5 * 3));
    }
    65% {
        transform: translateX(calc(-100% / 5 * 4));
    }
    70% {
        transform: translateX(calc(-100% / 5 * 4));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes sliding-six {
    9.09% {
        transform: translateX(0);
    }
    18.18% {
        transform: translateX(calc(-100% / 6));
    }
    27.27% {
        transform: translateX(calc(-100% / 6));
    }
    36.36% {
        transform: translateX(calc(-100% / 6 * 2));
    }
    45.45% {
        transform: translateX(calc(-100% / 6 * 2));
    }
    54.54% {
        transform: translateX(calc(-100% / 6 * 3));
    }
    63.63% {
        transform: translateX(calc(-100% / 6 * 3));
    }
    72.72% {
        transform: translateX(calc(-100% / 6 * 4));
    }
    69.23% {
        transform: translateX(calc(-100% / 6 * 4));
    }
    81.81% {
        transform: translateX(calc(-100% / 6 * 5));
    }
    90.90% {
        transform: translateX(calc(-100% / 6 * 5));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes sliding-fade {
    10% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
}

@keyframes fade-in {
    0% {
    opacity: 0;
    }
    12.5% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    37.5% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}