.ngparabubbleslider-nav {
    margin: 0 auto;
    display: flex;
    background-color: var(--ngparabubbleslider-navbackground);
    border-radius: calc(12px + var(--ngparabubbleslider-navpadding) );
    padding: var(--ngparabubbleslider-navpadding);
    box-sizing: border-box;
}

.ngparabubbleslider-nav > ul {
    list-style: none;
    margin: 0 8px 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.ngparabubbleslider-nav > ul > li {
    margin: 0;
    padding: 0;
    display: block;
    list-style: none;
    width: auto;
}

.ngparabubbleslider-nav > ul > li > a {
    display: block;
    padding: 8px;
    transition: color 0.2s;
}

.ngparabubbleslider-nav > ul > li > a > div {
    width: 8px;
    height: 8px;
    background-color: var(--ngparabubbleslider-navforeground);
    border-radius: 4px;
    transition: width 0.5s linear, background-color 0.2s;
}


.ngparabubbleslider-hover .ngparabubbleslider-nav a[href]:hover {
    color: var(--ngparabubbleslider-navbar);
}

.ngparabubbleslider-hover .ngparabubbleslider-nav a[href]:hover>div {
    background-color: var(--ngparabubbleslider-navbar);
}


.ngparabubbleslider-nav > ul > li > a.ngparabubbleslider-nav-active > div {
    width: 48px;
}

@keyframes ngparabubbleslider-nav-timer-animation {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 40px 0;
    }
}

.ngparabubbleslider-nav > a {
    display: block;
    width: 24px;
    height: 24px;
    color: var(--ngparabubbleslider-navforeground);
}

.ngparabubbleslider-playing > .ngparabubbleslider-nav > a[href="#play"] {
    display: none;
}

.ngparabubbleslider-pause > .ngparabubbleslider-nav > a[href="#pause"] {
    display: none;
}


.ngparabubbleslider-nav > ul > li > a.ngparabubbleslider-nav-timer > div {
    background-image: var(--ngparabubbleslider-svg);
    background-repeat: no-repeat;
    animation-duration: calc(var(--ngparabubbleslider-delay) * 1ms);
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-name: ngparabubbleslider-nav-timer-animation;
}


.ngparabubbleslider-stage {
    overflow: hidden;
    position: relative;
    margin-bottom: var(--ngparabubbleslider-margin);
}

.ngparabubbleslider-stage > ul {
    display: flex;
    column-gap: var(--ngparabubbleslider-margin);
    margin: 0;
    padding: 0;
    position: absolute;
    transition: left 1s;
}

.ngparabubbleslider-stage > ul > li {
    display: block;
    list-style: none;
    border-radius: var(--ngparabubbleslider-roundedcorners);
    overflow: hidden;
    position: relative;
    width: calc(100% / var(--ngparabubbleslider-count));
}

.ngparabubbleslider-stage > ul > li span {
    position: absolute;
    width: 50%;
    font-size: var(--ngparabubbleslider-captionsize);
    font-weight: var(--ngparabubbleslider-captionweight);
    text-transform: var(--ngparabubbleslider-captiontransform);
    color: var(--ngparabubbleslider-captioncolor);
    opacity: 0;
}

.ngparabubbleslider-bottomleft > .ngparabubbleslider-stage > ul > li span {
    bottom: var(--ngparabubbleslider-padding);
    left: var(--ngparabubbleslider-padding);
}

.ngparabubbleslider-bottomright > .ngparabubbleslider-stage > ul > li span {
    bottom: var(--ngparabubbleslider-padding);
    right: var(--ngparabubbleslider-padding);
    text-align: right;
}

.ngparabubbleslider-topleft > .ngparabubbleslider-stage > ul > li span {
    top: var(--ngparabubbleslider-padding);
    left: var(--ngparabubbleslider-padding);
}

.ngparabubbleslider-topright > .ngparabubbleslider-stage > ul > li span {
    top: var(--ngparabubbleslider-padding);
    right: var(--ngparabubbleslider-padding);
    text-align: right;
}


@keyframes ngparabubbleslider-activate-animation-left {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ngparabubbleslider-activate-animation-right {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ngparabubbleslider-stage > ul > li.ngparabubbleslider-nav-active span {
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.ngparabubbleslider-bottomleft .ngparabubbleslider-stage > ul > li.ngparabubbleslider-nav-active span,
.ngparabubbleslider-topleft .ngparabubbleslider-stage > ul > li.ngparabubbleslider-nav-active span {
    animation-name: ngparabubbleslider-activate-animation-left;
}

.ngparabubbleslider-bottomright .ngparabubbleslider-stage > ul > li.ngparabubbleslider-nav-active span,
.ngparabubbleslider-topright .ngparabubbleslider-stage > ul > li.ngparabubbleslider-nav-active span {
    animation-name: ngparabubbleslider-activate-animation-right;
}


.ngparabubbleslider-stage > ul > li a:focus-visible img {
    filter: brightness(50%) contrast(75%);
}

.ngparabubbleslider-stage > ul > li img {
    display: block;
    width: 100%;
}

@media ( min-width: 1024px) {
    .ngparabubbleslider-stage {
        aspect-ratio: calc(var(--ngparabubbleslider-ratio-desktop) * 2);
    }


    .ngparabubbleslider-stage > ul {
        width: calc(var(--ngparabubbleslider-count) * 50% + (var(--ngparabubbleslider-count) - 1) * var(--ngparabubbleslider-margin));
        left: calc(-50% * var(--ngparabubbleslider-offset, 0) + 25% - var(--ngparabubbleslider-margin) * var(--ngparabubbleslider-offset, 0));
    }

}

@media ( max-width: 1023px) {
    .ngparabubbleslider-stage {
        aspect-ratio: calc(var(--ngparabubbleslider-ratio-mobile) * 1.25);
    }


    .ngparabubbleslider-stage > ul {
        width: calc(var(--ngparabubbleslider-count) * 80% + (var(--ngparabubbleslider-count) - 1) * var(--ngparabubbleslider-margin));
        left: calc(-80% * var(--ngparabubbleslider-offset, 0) + 10% - var(--ngparabubbleslider-margin) * var(--ngparabubbleslider-offset, 0));
    }

}