esl-tabs[scrollable] {
  &[has-scroll] {
    .arrow-prev,
    .arrow-next {
      display: block;
      &[disabled] {
        opacity: 0.1;
        cursor: auto;
      }
    }
  }
  .arrow-prev,
  .arrow-next {
    display: none;
    z-index: 2;
    width: 35px;
    height: 35px;
    background: none;
    border: none;
    opacity: 0.5;
    cursor: pointer;
    appearance: none;
  }
  .arrow-next {
    right: 0;
  }
  .arrow-prev {
    left: 0;
  }

  .icon-arrow-next,
  .icon-arrow-prev {
    display: block;
    height: 35px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWdvbiBwb2ludHM9IjMxIDQwIDE2IDI1IDMxIDEwIDMzIDEyIDIwIDI1IDMzIDM4Ii8+PC9zdmc+)
      no-repeat;
  }
  .icon-arrow-next {
    transform: scaleX(-1);
  }

  [dir='rtl'] &,
  &[dir='rtl'] {
    .icon-arrow-prev {
      transform: scaleX(-1);
    }
    .icon-arrow-next {
      transform: none;
    }
  }
}