// 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 'size';
@import 'package:angular_components/css/material/material';

$default-dropdown-outline-padding: $mat-grid $mat-grid * 1.5 $mat-grid $mat-grid * 2;

/// Default padding material-select-item and material-select-dropdown-item.
@mixin select-item-padding {
  padding: 0 $select-item-padding;
}

/// Shared styles for material-select-item and material-select-dropdown-item.
@mixin select-item-base {
  @include select-item-padding;

  &:hover,
  &:focus,
  &.active {
    background: $mat-grey-100;
  }

  &:not(.multiselect).selected {
    background: $mat-grey-200;
  }

  .selected-accent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    border-left: 3px solid $mat-grey-500;
  }

  material-checkbox {
    margin: 0;
  }
}

/// Hides underline for button text from dropdown-button widget and override
/// icon opacity. This makes the dropdown button appears as a button rather
/// than an input.
@mixin button-look {
  ::ng-deep .button.border {
    border-bottom: 0;
    padding-bottom: 0;
  }

  ::ng-deep .button .icon {
    opacity: initial;
  }
}

/// Sets margin around the icon in dropdown button.
@mixin dropdown-icon-spacing($margin) {
  ::ng-deep .icon {
    margin: $margin;
  }
}

/// Sets the color of the icon in the dropdown button.
@mixin dropdown-icon-color($color) {
  ::ng-deep .icon {
    color: $color;
  }
}

/// Adds a outline around the dropdown select component
@mixin dropdown-select-outline ($padding: $default-dropdown-outline-padding) {
  ::ng-deep .border {
    border: 1px solid $mat-border-light;
    padding: $padding;
    border-radius: $mat-grid-type;
  }
}

/// Allow the button text to wrap instead of ellipsis.
@mixin button-text-wrap {
  ::ng-deep .button.border .button-text {
    white-space: normal;
  }
}

/// Allow the icon to be shown without truncated.
@mixin icon-overflow-visible {
  ::ng-deep .icon {
    overflow: visible;
  }
}

/// Sets the color of the "selected" accent on the selected item.
///
/// Apply to <material-select> or <material-select-item>.
@mixin material-select-selected-color($color) {
  ::ng-deep .selected-accent.mixin.mixin {
    border-left-color: $color;
  }
}

/// Sets the color of the "selected" item.
@mixin material-select-selected-item-color($color) {
  ::ng-deep material-select-item.selected {
    color: $color;
  }
}

/// Sets the background color of the "selected" item.
@mixin material-select-selected-item-background-color($color) {
  ::ng-deep {
    material-select-item:not(.multiselect).selected {
      background: $color;
    }
  }
}

/// Sets the color of the items.
@mixin material-select-item-color($color) {
  ::ng-deep material-select-item {
    color: $color;
  }
}

/// Sets the color of the dropdown items.
@mixin material-select-dropdown-item-color($color) {
  ::ng-deep material-select-dropdown-item {
    color: $color;
  }
}


/// Sets overflow to ellipsis for the dropdown items.
@mixin material-select-dropdown-item-ellipsis() {
  ::ng-deep material-select-dropdown-item {
    .label {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

/// Sets the color of the "disabled" item.
@mixin material-select-disabled-color($color) {
  ::ng-deep material-select-dropdown-item.item.disabled {
    color: $color;
  }
}

/// Sets the background color of the selected dropdown item.
@mixin material-select-selected-background-color($color) {
  ::ng-deep {
    material-select-dropdown-item:not(.multiselect).selected {
      background: $color;
    }
  }
}

/// Enables pointer events on disabled MaterialSelectDropdownItems
///
/// This can be scoped to a specific selector in cases where
/// MaterialSelectDropdownItems are placed in an overlay.
@mixin enable-pointer-events-for-disabled-items($selector: '') {
  ::ng-deep #{$selector} material-select-dropdown-item.item.disabled {
    pointer-events: all;
  }
}

@mixin material-select-item-padding($padding) {
  ::ng-deep material-select-item {
    padding: $padding;
  }
}

/// Sets the padding on MaterialSelectDropdownItems.
@mixin material-select-dropdown-item-padding($padding, $selector: '') {
  ::ng-deep #{$selector} material-select-dropdown-item {
    padding: $padding;
  }
}

/// Sets the margin for the error text.
@mixin dropdown-button-error-margin($margin) {
  ::ng-deep .error-text {
    margin: $margin;
  }
}

/// Reduces the height of the dropdown button, at the cost of no longer aligning
/// the underline with material-input's.
@mixin dropdown-button-compact-height() {
  ::ng-deep .button.border {
    padding-bottom: 0;
  }
}

/// Override the minimum height of the dropdown button.
///
/// This is useful for cases where the main dropdown button styling is not being
/// used, such as when custom button contents are used.
@mixin dropdown-button-min-height($min-height) {
  ::ng-deep dropdown-button {
    min-height: $min-height;
  }
}

/// Sets the font size of the dropdown item.
@mixin material-select-dropdown-item-font-size($font-size) {
  ::ng-deep material-select-dropdown-item {
    font-size: $font-size;
  }
}

/// Sets the line height of the dropdown item.
@mixin material-select-dropdown-item-line-height($line-height) {
  ::ng-deep material-select-dropdown-item {
    line-height: $line-height;
  }
}

/// Sets the padding of the dropdown list.
@mixin material-select-dropdown-padding($padding) {
  ::ng-deep material-list {
    padding: $padding;

    &:focus {
      // This is a workaround for scrolling bug:
      // https://bugs.chromium.org/p/chromium/issues/detail?id=909097
      border-bottom: solid 1px transparent;
      $bottomPadding: 0;
      @if length($padding) > 2 {
        $bottomPadding: nth($padding, 3);
      } @else {
        $bottomPadding: nth($padding, 1);
      }
      // Compensate for the added border.
      @if $bottomPadding == 0 {
        padding-bottom: 0;
      } @else {
        padding-bottom: $bottomPadding - 1;
      }
    }
  }
}

/// Sets the font size of the item.
@mixin material-select-item-font-size($font-size) {
  ::ng-deep material-select-item {
    font-size: $font-size;
  }
}
