carouselSel = newAppName + '-carousel'
carouselZIndex = 10
scrollHSpace = 10px
scrollHSpaceTablet = 30px
scrollHSpacePC = 70px
offsetSpacePC = container-upper-limit - scrollHSpace * 2 - scrollHSpacePC * 2
offsetCalcOverlay = "calc((100vw - (%s - (%s * 3.5 * 2))) / 2)" % (container-upper-limit horizontal-space)

.{carouselSel}
  width 100%
  position relative
  z-index carouselZIndex

  &__overlay
    display block
    overflow hidden
    overflow-x auto
    -webkit-overflow-scrolling touch
    -ms-overflow-style none
    position relative
    scrollbar-width none
    white-space nowrap

    &::-webkit-scrollbar
      display none

  &__inner
    display flex
    flex-direction row
    -webkit-box-orient horizontal
    -webkit-box-direction normal
    white-space normal

  &__slide
    backface-visibility hidden
    opacity 1
    position relative
    user-select none
    z-index carouselZIndex + 1

    &.marked
      transform scale(1.02)

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

    &.rt-col-td-3
      @media (min-width: tablet-lower-limit) and (max-width: tablet-upper-limit)
        max-width 47.99998%

    @media (max-width: iphone8)
      min-width 83.33333250000001%

  &__navi
    position absolute
    width 100%
    height 100%
    left 0
    right 0
    margin auto

    &-side
      cursor pointer
      min-width 30px
      position absolute
      height 100%
      z-index carouselZIndex + 2

      &-prev
        left 0

      &-next
        right 0

    &-arrows
      margin-top 0px
      margin-left auto
      margin-right auto
      pointer-events none
      position absolute
      width 100%
      bottom auto
      top 50%
      left 0
      right 0
      z-index carouselZIndex + 3

    &-btn
      background-color #ffffff
      -webkit-border-radius 50%
      border-radius 50%
      -webkit-box-shadow 0 0 30px 0 rgba(0, 0, 0, .1)
      box-shadow 0 0 30px 0 rgba(0, 0, 0, .1)
      box-sizing border-box
      color transparent
      cursor pointer
      padding 15px 20px
      pointer-events auto
      position absolute
      bottom 0
      top 0
      text-decoration none
      transform scale(1)
      transition all .25s ease
      z-index carouselZIndex + 4

      &-prev
        left 40px
        &:after
          left -5px
          background-image url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEwIDE2Ij4gICAgPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNiAxMikgcm90YXRlKDE4MCAyIDIpIiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjg5MiAwTDAgMS44NjcgNi4yMTYgOCAwIDE0LjEzMyAxLjg5MiAxNiAxMCA4eiIgb3BhY2l0eT0iLjciLz48L3N2Zz4=")

        @media (max-width: tablet-upper-limit)
          left 10px

      &-next
        right 40px
        &:after
          right -5px
          background-image url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEwIDE2Ij4gICAgPHBhdGggZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS44OTIgMEwwIDEuODY3IDYuMjE2IDggMCAxNC4xMzMgMS44OTIgMTYgMTAgOHoiIG9wYWNpdHk9Ii43Ii8+PC9zdmc+")

        @media (max-width: tablet-upper-limit)
          right 10px

      &:after
        content ""
        position absolute
        width 10px
        height 16px
        margin auto
        top 1px
        left 0
        right 0
        bottom 0

      &:hover
        transform scale(1.1)

      &.is-pending
        pointer-events none

      &.is-disabled
        cursor default
        opacity 0
        pointer-events none
        transform scale(0) !important

    &-more-text
      color rgba(0,0,0,.7)
      position absolute
      right 0
      margin-top 30px
      top 50%
      z-index carouselZIndex + 5


  &.is-touch-device
    .{carouselSel}__overlay
      -webkit-scroll-padding-inline-start scrollHSpace
      scroll-padding-inline-start scrollHSpace
      -webkit-scroll-snap-type mandatory
      -webkit-scroll-snap-type-x mandatory
      scroll-snap-type mandatory
      scroll-snap-type x mandatory

    .{carouselSel}__slide
      -webkit-scroll-snap-align start
      scroll-snap-align start

    .{carouselSel}__spacer
      -webkit-scroll-snap-align end
      scroll-snap-align end
      min-width scrollHSpace

    @media (min-width: tablet-lower-limit)
      .{carouselSel}__inner
        scroll-padding-inline-start scrollHSpaceTablet

      .{carouselSel}__spacer
        min-width scrollHSpaceTablet

    @media (min-width: desktop-lower-limit)
      .{carouselSel}__inner
        scroll-padding-inline-start scrollHSpacePC

      .{carouselSel}__spacer
        min-width scrollHSpacePC

    &.is-inner-block
      width 100vw
      margin-left 0 - horizontal-space
      margin-right 0 - horizontal-space
      @media (min-width: tablet-lower-limit)
        margin-left 0 - scrollHSpaceTablet - scrollHSpace
        margin-right 0 - scrollHSpaceTablet - scrollHSpace
      @media (min-width: desktop-lower-limit)
        margin-left 0 - scrollHSpacePC - scrollHSpace
        margin-right 0 - scrollHSpacePC - scrollHSpace
      @media (min-width: container-upper-limit)
        margin-left "calc((100vw - %s)/-2)" % offsetSpacePC
        .{carouselSel}__inner
          max-width none
          margin-left 0
          margin-right 0
          padding-left offsetCalcOverlay
          padding-right offsetCalcOverlay
          scroll-padding-inline-start offsetCalcOverlay
          .{carouselSel}__spacer
            min-width offsetCalcOverlay

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

  &.is-animating,
  &.is-scrolling
    .{carouselSel}__slide
      pointer-events none