$white: #ffffff
$bg-4: #3D4750

.slider-touch-scroll
    height: 100%
    position: relative
    &#{&}-enabled
        padding: 0 20px
    & #{&}-box
        position: relative
        overflow: hidden
        width: 100%
    &#{&}-enabled #{&}-box
        white-space: nowrap
        &:before, &:after
            content: ''
            display: block
            position: absolute
            top: 0
            height: 100%
            width: 10px
        &:before
            left: 0
            background: linear-gradient(to right, $white, transparent)
        &:after
            right: 0
            background: linear-gradient(to left, $white, transparent)
    & #{&}-items
        transition: margin-left .3s
    & #{&}-item
        display: inline-block
    & #{&}-button-left, & #{&}-button-right
        width: 20px
        height: 100%
        position: absolute
        top: 0
        border: 0
        background: transparent
        &:focus
            outline: none
        &:before
            content: ''
            top: 50%
            margin-top: -7.5px
            position: absolute
            display: block
            width: 20px
            height: 15px
            background-color: $bg-4
            mask-image: url('./images/chevron-down.svg')
            mask-position: 50% 50%
            mask-repeat: no-repeat
            mask-size: cover
            transition: background-color .3s
        &:hover:before
            background-color: red

    & #{&}-button-left
        left: 0
        &:before
            left: 0
            transform: rotate(90deg)
    & #{&}-button-right
        right: 0
        &:before
            right: 0
            transform: rotate(270deg)