// ----- Component -----
.nav-scroller, .nav-scroller-wrapper {
  display: flex;

}

.nav-scroller {
  position: relative;
  width: 100%;
  overflow: hidden;
}

  .nav-scroller-nav {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    align-self: center;
	overflow-x: hidden;
  }

    .nav-scroller-content, .nav-scroller-items {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .nav-scroller-content {
      min-height: $nav-scroller-btn-height; // Ensures full button is visible
      will-change: transform;

      &:not(.no-transition) {
        transition: transform .25s cubic-bezier(0.645, 0.045, 0.355, 1.000); // easeInOutCubic
      }
    }


  .nav-scroller-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: $nav-scroller-btn-width;
    min-height: $nav-scroller-btn-height;
    height: 100%;
    padding: .5rem;
    font-size: 1.25rem;
    color: #000;
    background: #fff;
    border: 1px solid #ddd;
    transition: color .3s, opacity .3s;
    cursor: pointer;

    &:hover {
      color: #666;
    }

    &:focus {
      outline: 0;
    }

    &:not(.active) {
      opacity: 0;
      pointer-events: none;
    }
  }

    .nav-scroller-icon {
      display: inline-block;
      position: relative;
      top: -0.1em;
      width: 1em;
      height: 1em;
      fill: currentColor;
      vertical-align: middle;
    }

  .nav-scroller-btn--left {
    left: 0;
  }

  .nav-scroller-btn--right {
    right: 0;
  }