// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

@import 'core_material';
@import 'color_material';

/// Common colors for scrollbars.
/// Note: Prefer the mixins below.
$mat-scrollbar-thumb: $mat-lightest-transparent-black;
$mat-scrollbar-background: rgba($mat-black, 0);
$mat-scrollbar-background-hover: rgba($mat-black, .12);

/// Style all scrollbars within the scope to material spec.
///
/// $thumb-hover-color should be a Material color matching your app's theme.
/// $scrollbar-size defines the height of horizontal scrollbars and the width of
/// vertical scrollbars.
/// $thumb-min-size defines the min height of vertical scrollbar thumbs and the
/// min width of horizontal scrollbar thumbs.
@mixin material-scrollbar-theme(
    $thumb-hover-color,
    $scrollbar-size: $mat-grid-type,
    $thumb-min-size: 6 * $mat-grid) {
  ::ng-deep {
    @include material-scrollbar(
      $thumb-hover-color, $scrollbar-size, $thumb-min-size);
  }
}

/// Style all scrollbars within the scope to material spec.
///
/// Note: This is the same as material-scrollbar-theme except it can be used
/// globally outside the context angular components.
@mixin material-scrollbar(
    $thumb-hover-color,
    $scrollbar-size: $mat-grid-type,
    $thumb-min-size: 6 * $mat-grid) {
  ::-webkit-scrollbar {
    background-color: $mat-scrollbar-background;

    // Height only applies to horizontal scrollbars.
    height: $scrollbar-size;

    // Width only applies to vertical scrollbars.
    width: $scrollbar-size;

    &:hover {
      background-color: $mat-scrollbar-background-hover;
    }
  }

  ::-webkit-scrollbar-thumb {
    background-color: $mat-scrollbar-thumb;

    // min-height only applies to vertical scrollbar thumbs.
    min-height: $thumb-min-size;

    // min-width only applies to horizontal scrollbar thumbs.
    min-width: $thumb-min-size;

    &:hover {
      background-color: $thumb-hover-color;
    }
  }

  ::-webkit-scrollbar-button {
    width: 0;
    height: 0;
  }
}

// Style all scrollbars within the specified selector to Material spec.
// This is an unscoped rule, so it will affect all elements nested inside the
// given selector, anywhere on the page.
// $thumb-hover-color should be a Material color matching your app's theme.
@mixin material-scrollbars($selector, $thumb-hover-color) {
  ::ng-deep #{$selector} ::-webkit-scrollbar {
    background-color: $mat-scrollbar-background;

    // Height only applies to horizontal scrollbars
    height: $mat-grid;

    // Width only applies to vertical scrollbars
    width: $mat-grid;
  }

  ::ng-deep #{$selector} ::-webkit-scrollbar:hover {
    background-color: $mat-scrollbar-background-hover;
  }

  ::ng-deep #{$selector} ::-webkit-scrollbar-thumb {
    background-color: $mat-scrollbar-thumb;

    // min-height only applies to vertical scrollbar thumbs
    min-height: 6 * $mat-grid;

    // min-width only applies to horizontal scrollbar thumbs
    min-width: 6 * $mat-grid;
  }

  ::ng-deep #{$selector} ::-webkit-scrollbar-thumb:hover {
    background-color: $thumb-hover-color;
  }

  ::ng-deep #{$selector} ::-webkit-scrollbar-button {
    width: 0;
    height: 0;
  }
}
