﻿.veon-imageslider {
  overflow: hidden;
  padding: 8px;
}

.veon-imageslider-track {
  display: flex;
  gap: 18px;
  width: max-content;
  height: 100%;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}

.veon-imageslider.--pause-on-hover:hover .veon-imageslider-track {
  animation-play-state: paused;
}

.veon-imageslider-track img {
  height: 100%;
  width: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* Direction */
.veon-imageslider-track.--rtl {
  animation-name: veon-image-slide-rtl;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.veon-imageslider-track.--ltr {
  animation-name: veon-image-slide-ltr;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Speed */
.veon-imageslider-track.--slower {
  animation-duration: 55s;
}

.veon-imageslider-track.--slow {
  animation-duration: 40s;
}

.veon-imageslider-track.--normal {
  animation-duration: 25s;
}

.veon-imageslider-track.--fast {
  animation-duration: 16s;
}

.veon-imageslider-track.--faster {
  animation-duration: 10s;
}

@keyframes veon-image-slide-rtl {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes veon-image-slide-ltr {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}
