@import 'react-perfect-scrollbar/dist/css/styles.css';

.mikoshi-scroll {
  @include rules('m-height-100', 'm-width-100');

  .ps__rail-x,
  .ps__rail-y {
    @include rules('m-bg-transparent');

    &:hover {
      @include rules('m-bg-transparent');
    }

    &.ps--clicking {
      @include rules('m-bg-transparent');
    }
  }

  .ps__thumb-x,
  .ps__thumb-y {
    @include rules('m-bg-grey-3');

    &:hover {
      @include rules('m-bg-grey-4');
    }

    body.dark &,
    .app[data-theme='dark'] & {
      @include rules('m-bg-lgrey-2');

      &:hover {
        @include rules('m-bg-lgrey-3');
      }
    }
  }
}