//
// Horizontal Scroll
// --------------------------------------------------

.horizontal-scroll-wrapper {
  position: relative;
}
.horizontal-scroll {
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 20px 0;

  & > * {
    flex: 0 0 auto;
  }
}
.horizontal-scroll-left-control,
.horizontal-scroll-right-control {
  align-items: center;
  display: flex;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.1s ease-in-out;
  z-index: 1;

  &.display {
    opacity: 1;
  }
}
.horizontal-scroll-right-control {
  box-shadow: -11px 0px 10px -8px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: -11px 0px 10px -8px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: -11px 0px 10px -8px rgba(0, 0, 0, 0.25);
  right: 0;
  transform: translateX(100%);
}
.horizontal-scroll-left-control {
  box-shadow: 11px 0px 10px -8px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 11px 0px 10px -8px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 11px 0px 10px -8px rgba(0, 0, 0, 0.25);
  left: 0;
  transform: translateX(-100%);
}

@media (max-width: @screen-xs-max) {
  .horizontal-scroll-wrapper {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .horizontal-scroll-right-control,
  .horizontal-scroll-left-control {
    display: none;
  }
}