swiperName = "rtk-carousel"
swiperZIndex = 10
scrollHSpace = 10px
scrollHSpacePC = 70px

.{swiperName}
  position relative
  z-index swiperZIndex
  width inherit
  @media (max-width: tablet-upper-limit)
    max-width: none

  &__container
    display block
    position relative

  &__overlay
    display block
    overflow hidden
    overflow-x auto
    -webkit-overflow-scrolling touch
    white-space nowrap
    position relative
    transform translate3d(0, 0, 0)
    -ms-overflow-style none
    scrollbar-width none
    margin: 0 auto
    width calc(100vw - (100vw - 100%))
    max-width 100vw

  &__overlay::-webkit-scrollbar
    display none

  &__inner
    display flex
    flex-direction row
    white-space normal
    padding 10px 0
    width calc(100vw - (100vw - 100%) - 140px)
    max-width 1340px
    align-items stretch
    @media (max-width: laptop-upper-limit)
      width calc(100vw - (100vw - 100%) - 60px)
    @media (max-width: tablet-upper-limit)
      width calc(100vw - (100vw - 100%))

  &__spacer
    display flex

  &-slide
    opacity 1
    position relative
    z-index swiperZIndex + 1
    backface-visibility hidden
    //user-select none
    max-height 100%
    padding 0 10px
    @media (max-width: laptop-upper-limit) and (min-width: laptop-lower-limit)
      width calc(285px + 20px)
      flex-basis calc(285px + 20px)!important
      max-width calc(285px + 20px)!important
    @media (max-width: tablet-upper-limit)
      width calc(35vw + 20px)
      flex-basis calc(35vw + 20px)!important
      max-width calc(35vw + 20px)!important
    @media (max-width: mobile-upper-limit)
      width calc(75vw + 20px)
      flex-basis calc(75vw + 20px)!important
      max-width calc(75vw + 20px)!important

    &.marked
      transform scale(1.02)

    &.not-shown
      opacity .5
      pointer-events none

  &.is-touch-device
    .{swiperName}__overlay
      overflow auto

    .{swiperName}__inner
      overflow-x auto
      overflow-y hidden
      -webkit-scroll-padding-inline-start scrollHSpace
      scroll-padding-inline-start scrollHSpace * 3
      -webkit-scroll-snap-type mandatory
      -webkit-scroll-snap-type-x mandatory
      scroll-snap-type mandatory
      scroll-snap-type x mandatory
      @media (max-width: mobile-upper-limit)
        scroll-padding-inline-start scrollHSpace

    .{swiperName}-slide
      max-width 90vw
      user-select none
      -webkit-scroll-snap-align start
      scroll-snap-align start

      &:first-child
        @media (max-width: tablet-upper-limit)
          margin-left scrollHSpace * 3
        @media (max-width: mobile-upper-limit)
          margin-left scrollHSpace

    .{swiperName}__spacer
      @media (max-width: tablet-upper-limit)
        min-width scrollHSpace * 3
      @media (max-width: mobile-upper-limit)
        min-width scrollHSpace

  &.is-animating,
  &.is-disabled-scrolling
    .{swiperName}__overlay
      overflow-x hidden

    .{swiperName}.is-touch-device
      .{swiperName}__inner
        overflow-x hidden

  &.is-animating,
  &.is-scrolling
    .{swiperName}-slide
      pointer-events none

  &.show-no-move-prev
    animation show-no-moves-prev .9s ease-in-out

  &.show-no-move-next
    animation show-no-moves-next .9s ease-in-out

  &-override
    width inherit
    .{swiperName}__inner-default
      flex-wrap wrap

    .{swiperName}-slide
      flex 0

      &:first-child
        @media (max-width: tablet-upper-limit)
          margin-left 0 !important

//.hide-navigation
//  @media (min-width: laptop-lower-limit)
//    padding: 0 70px

.in-plus-card
  @media (max-width: laptop-upper-limit) and (min-width: laptop-lower-limit)
    max-width calc(275px + 20px)
  @media (max-width: tablet-upper-limit)
    min-width calc(35vw + 20px)
    max-width none
  @media (max-width: mobile-upper-limit)
    min-width calc(75vw + 20px)

keyframes show-no-moves-prev
  0%
    transform translateX(0)

  50%
    transform translateX(40px)

  100%
    transform translateX(0)

keyframes show-no-moves-next
  0%
    transform translateX(0)

  50%
    transform translateX(-40px)

  100%
    transform translateX(0)