@layer components {
.tinyscrollbar {
  $tinyscrollbarImgRoot: "/assets/datepicker" !default;
  $scrollbarWidth: 11px !default;
  .viewport { overflow: hidden; position: relative; }
  .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
  .scrollbar { background: transparent url(#{$tinyscrollbarImgRoot}/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: $scrollbarWidth; }
  .track { background: transparent url(#{$tinyscrollbarImgRoot}/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width: 11px; position: relative; }
  .thumb { background: transparent url(#{$tinyscrollbarImgRoot}/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -7px; }
  .thumb .end { background: transparent url(#{$tinyscrollbarImgRoot}/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
  .disable { display: none; }
}
}