@mixin itemSliderPanelAnimation() {
    opacity: 1;
    animation-name: fadeIn;
    animation-duration: 0.3s;
    animation-timing-function: ease-in;
}

$sliderSizes: (
    "xl": $xl,
    "lg": $lg,
    "md": $md,
    "sm": $sm,
    "xs": $xs,
);

.item-slider {
    &--overflow {
        .tns-ovh {
            overflow: visible;
        }
    }

    .slider {
        &__container {
            display: flex;
            align-items: stretch;
        }
    }

    .item, .item__inner {
        height: 100%;
    }

    @for $i from 2 through 5 {
        &[data-items-xl="#{$i}"] {
            .slider__panel {
                width: #{100% / $i};
        
                &:nth-child(n + #{$i + 1}) {
                    &:not(.tns-item) {
                        display: none;
                    }
        
                    &.tns-item {
                        @include itemSliderPanelAnimation();
                    }
                }
            }
        }
    }
}

@each $sizeKey, $size in $sliderSizes {
    @media screen and (max-width: #{$size}) {
        @for $i from 1 through 5 {
            .item-slider[data-items-#{$sizeKey}="#{$i}"] {
                .slider__panel {
                    width: #{100% / $i};

                    &:nth-child(n + #{$i + 1}) {
                        &:not(.tns-item) {
                            display: none;
                        }
            
                        &.tns-item {
                            @include itemSliderPanelAnimation();
                        }
                    }
                }
            }
        }
    }
}