@import '../../../../styles/common';
@import '../../../../styles/object/o-navigation';
@import '../../../../styles/object/o-pi-border';
@import '../../../../styles/vendor/bootstrap_foundation-sites';

.m-horizontal-scroll {
  display: flex;
  height: $l-navigation__height + 2 * rem_calc($pi-border__size);
  background-image: linear-gradient(180deg, transparent 5px, #e1f5ff 5px);

  &__anchor,
  &__visible-zone {
    display: inline-block;
  }

  &__anchor {
    flex: 0;
    background-color: $co-color__bg__back--high;
  }

  &__visible-zone {
    position: relative;
    flex: 1;
    overflow-y: hidden;

    @include breakpoint(medium) {
      overflow: hidden;
    }
  }

  &__container {
    display: inline-flex;
    position: absolute;
    left: 0;
    transition: left 0.5s ease;
    background: linear-gradient(180deg, transparent 5px, #fff 2px);
  }

  &__item {
    flex: shrink;
  }
}

.scroll-anchor--left {
  padding: 0 3px 0 12px;
}

.scroll-anchor--right {
  padding: 0 12px 0 3px;
}

.scroll-anchor-item {
  margin-right: 0;
  border-top: 0;
}
