[data-local-recent-deals] .recent-deals__slider {
  overflow: hidden;
}

[data-local-recent-deals] .ui-slider__container {
  will-change: transform;
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
}

[data-local-recent-deals] .deal-card {
  flex-shrink: 0;
}

[data-local-recent-deals] .skin-card__container {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

[data-local-recent-deals] .skin-card__container > :not(.local-recent-deal__accent) {
  position: relative;
  z-index: 1;
}

.local-recent-deal__accent {
  inset: 0 0 auto;
  height: 88px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.local-recent-deal__game {
  color: #999ca4;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

[data-local-recent-deals] .slider-navigation button {
  transition: color 160ms ease, opacity 160ms ease;
}

[data-local-recent-deals] .slider-navigation button:disabled {
  cursor: default;
  opacity: .35;
}

.local-recent-deal--new {
  animation: local-recent-deal-enter 420ms cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes local-recent-deal-enter {
  from {
    opacity: 0;
    transform: translateX(-12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-local-recent-deals] .ui-slider__container {
    transition: none;
  }

  .local-recent-deal--new {
    animation: none;
  }
}

@media (max-width: 880px) {
  [data-local-recent-deals] .recent-deals__slider {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  [data-local-recent-deals] .recent-deals__slider::-webkit-scrollbar {
    display: none;
  }

  [data-local-recent-deals] .ui-slider__container {
    min-width: max-content;
    transform: none !important;
  }

  .recent-deals[data-local-recent-deals] .deal-card,
  .recent-deals[data-local-recent-deals] .recent-card-skeleton {
    flex: 0 0 169px !important;
    width: 169px !important;
  }
}
