scrollView.scss

@import '~gemini-scrollbar/gemini-scrollbar.css';
@import '~sass-flex-mixins/src/sass-flex-mixins.scss';
@import '../utils/theme/variables.scss';
$scrollbar-size: 7px !default;
$scrollbar-size-hover: $scrollbar-size * 1.25 !default;
$scrollbar-color: $brc-coolGrey !default;
$scrollbar-container-color: $brc-white !default;

// this is the way to make gemini consider a width of 0 for scrollbars in IE
body > div[style*='-ms-overflow-style: scrollbar'] {
  -ms-overflow-style: none !important;
}

body > div::-webkit-scrollbar {
  display: none;
}

.scrollview {
  overflow: hidden;
  height: 100%;
  width: 100%;

  @include flex_flex(1 1 auto);

  > .gm-scrollbar {
    z-index: 999;
    transition-duration: 250ms;
    transition-timing-function: ease;

    &.-vertical {
      right: 0;
      padding: 0 4px;
      width: auto;
      transition-property: background-color width;

      .thumb {
        position: static;
        width: 0;
        transition: width 250ms ease;
      }

      .thumb[style*='height'] {
        margin: 0;
        width: $scrollbar-size;
      }

      &:hover,
      &:active {
        .thumb[style*='height'] {
          width: $scrollbar-size-hover;
        }
      }

      &:active .thumb[style*='height'] {
        background-color: $scrollbar-color;
        transition: background-color 250ms ease;
      }
    }

    &.-horizontal {
      bottom: 0;
      padding: 4px 0;
      height: auto;
      transition-property: background-color height;

      .thumb {
        position: static;
        height: 0;
        transition: height 250ms ease;
      }

      .thumb[style*='width'] {
        margin: 0;
        height: $scrollbar-size;
      }

      &:hover,
      &:active {
        background: rgba($scrollbar-container-color, .8);

        .thumb[style*='width'] {
          height: $scrollbar-size-hover;
        }
      }

      &:active .thumb[style*='width'] {
        background-color: $scrollbar-color;
        transition: background-color 250ms ease;
      }
    }

    .thumb {
      border-radius: $scrollbar-size / 2;
      background-color: rgba($scrollbar-color, .6);

      &:hover {
        background-color: $scrollbar-color;
        transition: background-color 250ms ease;
      }
    }
  }

  > .gm-scroll-view {
    height: 100% !important;
    width: 100% !important;
    -ms-overflow-style: none;

    > * {
      -ms-overflow-style: auto; // reset -ms-overflow-style as it is inherited by default
    }

    &::-webkit-scrollbar {
      height: 0;
      width: 0;
      -webkit-appearance: none;
    }
  }
}