@import (reference) './variables.less';

.esl-scrollbar {
  .scrollbar-track {
    background: fadeout(@secondary-blue, 70%);
  }

  .scrollbar-thumb {
    background: fadeout(@primary-blue, 70%);
  }

  &[dragging] .scrollbar-thumb {
    background: fadeout(@primary-blue, 50%);
    box-shadow: inset 0 0 4px 0 @secondary-blue;
  }

  @scroll-arrows-color-esc: escape(@primary-blue);

  &:not([horizontal]) .scrollbar-track {
    &::before,
    &::after {
      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='@{scroll-arrows-color-esc}' stroke-width='5'/%3E%3C/svg%3E");
    }
  }
  &[horizontal] .scrollbar-track {
    &::before,
    &::after {
      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='@{scroll-arrows-color-esc}' stroke-width='5'/%3E%3C/svg%3E");
    }
  }
}
