.esl-scrollbar-arrows-init(@tagName: esl-scrollbar) {
  @{tagName} {
    &:not([horizontal]) {
      padding-top: 15px;
      padding-bottom: 15px;
      .scrollbar-track {
        &::before,
        &::after {
          content: '';
          position: absolute;
          display: block;
          height: 10px;
          width: 100%;
          cursor: pointer;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' xml:space='preserve'%3E%3Cpolyline points='0,0 8,8 16,0' fill='none' stroke='%23BBBBBB' stroke-width='5'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
        }
        &::before {
          top: -15px;
          transform: scaleY(-1);
        }
        &::after {
          bottom: -15px;
        }
      }
    }

    &[horizontal] {
      padding-left: 15px;
      padding-right: 15px;
      .scrollbar-track {
        &::before,
        &::after {
          content: '';
          position: absolute;
          display: block;
          height: 100%;
          width: 10px;
          cursor: pointer;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' xml:space='preserve'%3E%3Cpolyline points='0,16 8,8 0,0' fill='none' stroke='%23BBBBBB' stroke-width='5'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
        }
        &::before {
          left: -15px;
          transform: scaleX(-1);
        }
        &::after {
          right: -15px;
        }
      }
    }

    &[at-end] .scrollbar-track::after,
    &[at-start] .scrollbar-track::before {
      opacity: 0.25;
    }
  }
}