@use '@angular/material' as mat;
@use 'sass:map';
@use '../../colors' as colors;

// Scrollbar mixin
// Use theme to manage colors on scrollbars
@mixin mic-scrollbar-override($theme) {
  $is-dark: map.get($theme, is-dark);
  $primary: map.get($theme, primary);

  .os-scrollbar-track {
    @if $is-dark {
      background: map.get(colors.$mic-grey, 500) !important;
    } @else {
      background: map.get(colors.$mic-grey, A400) !important;
    }
  }
  .os-scrollbar-handle {
    @if $is-dark {
      background: map.get($primary, A100) !important;
    } @else {
      background: map.get($primary, A400) !important;
    }
  }
}

// fix issue content not 100% with overlayscrollbar v2
mat-sidenav-content > div[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]) {
  height: 100%;
}

// This mixin is for the native scrollbar where Overlayscroll bar is not working properly
@mixin mic-native-scroll-override($theme) {
  $is-dark: map.get($theme, is-dark);
  $primary: map.get($theme, primary);

  .native-scrollbar {
    &::-webkit-scrollbar {
      width: 6px !important;
    }
    &::-webkit-scrollbar-track {
      @if $is-dark {
        background: map.get(colors.$mic-grey, 500) !important;
      } @else {
        background: map.get(colors.$mic-grey, A400) !important;
      }
      border-radius: 5px;
    }
    &::-webkit-scrollbar-thumb {
      @if $is-dark {
        background: map.get($primary, A100) !important;
      } @else {
        background: map.get($primary, A400) !important;
      }
      border-radius: 5px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: #555;
    }
  }
}
