.data-slider {
  position: relative;
  display: flex;
  @include phone-media {
    margin: 0 -#{$spacing-xs};
  }

  &.lock-scroll {
    .content {
      overflow: hidden;
    }
  }

  > .navigation {
    @include phone-media {
      display: none;
    }
    &.inside {
      .left {
        left: 0;
        transform: translateY(-50%);

      }
      .right {
        right: 0;
        transform: translateY(-50%);
      }
    }
    .left,
    .right {
      position: absolute;
      z-index: 2;
      top: 50%;
      color: $color-primary;
      &.disabled {
        opacity: .16;
      }
    }
    .left {
      left: -$spacing-m;
      transform: translate(-100%, -50%);
      @include tablet-media {
        left: 0;
        transform: translate(-50%, -50%);
      }
    }
    .right {
      right: -$spacing-m;
      transform: translate(100%, -50%);
      @include tablet-media {
        right: 0;
        transform: translate(50%, -50%);
      }
    }
    mtg-svg-icon {
      cursor: pointer;
      width: $size-xs;
      height: $size-xs;
    }
  }

  > .wrapper {
    display: flex;
    overflow: hidden;
    > .content {
      display: flex;
      overflow: auto;
      padding-bottom: 20px;
      margin-bottom: -20px;
      @include phone-media {
        padding: 0;
        margin: 0;
      }
      .mobile-spacing {
        display: none;
        width: $spacing-xs;
        height: 100%;
        flex-shrink: 0;
        @include phone-media {
          display: block;
        }
      }
    }
  }
  &.right-shadow {
    > .wrapper {
      &:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 107px;
        background: linear-gradient(270deg, $color-background -6.33%, rgba(22, 23, 33, 0) 100%);
        pointer-events: none;
        visibility: $data-slider-shadow-visibility;
        @include phone-media {
          display: none;
        }
      }
    }
  }
  &.left-shadow {
    > .wrapper {
      &:before {
        content: '';
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        bottom: 0;
        width: 107px;
        background: linear-gradient(270deg, rgba(22, 23, 30, 0) 0%, $color-background 100%);
        pointer-events: none;
        visibility: $data-slider-shadow-visibility;
        @include phone-media {
          display: none;
        }
      }
    }
  }
}

.data-slider-item {
  flex-shrink: 0;
  margin-left: 20px;
  &:first-of-type {
    margin-left: 0;
  }
}