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

$left-icon-width: $mat-grid * 4;

/// Changes the colors of <material-chip>s.
///
/// Available theme options are color and background color of the chip in its
/// native state, hover state, and selected state. Also available is coloring
/// of the delete icon, and max-width for the chip (if it's exceeded, content
/// will be elided)
@mixin material-chip-theme(
    $chip-selector: '',
    $primary-color : $mat-white,
    $primary-bgcolor: $mat-blue-500,
    $primary-color-hover: $mat-white,
    $primary-bgcolor-hover: $mat-blue-700,
    $primary-color-selected: $mat-white,
    $primary-bgcolor-selected: $mat-blue-900,
    $delete-icon-color: $mat-white,
    $left-icon-color: null,
    $left-icon-bgcolor: null,
    $max-chip-width: null,
    $selector: '') {
  ::ng-deep #{$selector} material-chip.themeable#{$chip-selector} {
    background-color: $primary-bgcolor;
    color: $primary-color;
    @if $max-chip-width {
      max-width: $max-chip-width;
    }

    &:hover {
      background-color: $primary-bgcolor-hover;
      color: $primary-color-hover;
    }

    &:focus {
      background-color: $primary-bgcolor-selected;
      color: $primary-color-selected;
    }

    &[emphasis]:hover {
      background-color: $primary-bgcolor-hover;
    }

    &[emphasis]:focus {
      background-color: $primary-bgcolor-selected;
    }

    .delete-icon {
      fill: $delete-icon-color;
    }

    @if ($left-icon-color) {
      .left-icon {
        color: $left-icon-color;
        fill: $left-icon-color;
      }
    }

    @if ($left-icon-bgcolor) {
      .left-icon {
        background-color: $left-icon-bgcolor;
        border-radius: 50%;
        height: $left-icon-width;
        margin-left: 0;
        // The margin between chip content and icon should be 8px, so need to
        // move right margin -4px to account for content left-padding (12px).
        margin-right: -($mat-grid / 2);
        min-width: $left-icon-width;
        padding: 0;
        width: $left-icon-width;
      }
    }
  }
}

/// Applies a max-width to the material chips. If the max-width exceeded,
/// content will be elided.
@mixin material-chip-max-width($max-chip-width) {
  ::ng-deep material-chip {
    max-width: $max-chip-width;
  }
}

/// Use this mixin to add a border to each of the chips.
@mixin material-chip-border($border) {
  ::ng-deep material-chip {
    border: $border;
  }
}

/// Use this mixin to change the font weight of each of the chips.
@mixin material-chip-font-weight($weight) {
  ::ng-deep material-chip {
    font-weight: $weight;
  }
}

/// Use this mixin to change the font size of each of the chips.
@mixin material-chip-font-size($size) {
  ::ng-deep material-chip {
    font-size: $size;
  }
}

/// Use this mixin to change the padding of each of the chips.
@mixin material-chip-padding($padding) {
  ::ng-deep material-chip {
    padding: $padding;
  }
}

$main-hover-bg-color: $mat-grey-400;
$main-selected-bg-color: $mat-grey-600;

$emphasis-hover-bg-color: $mat-blue-700;
$emphasis-selected-bg-color: $mat-blue-900;

/// Use this mixin to change the background color of the chips container.
@mixin material-chips-background-color($color) {
  ::ng-deep material-chips {
    background-color: $color;
  }
}

/// Use this mixin to add a bottom border to the chips container.
@mixin material-chips-border-bottom($border-bottom) {
  ::ng-deep material-chips {
    border-bottom: $border-bottom;
  }
}

/// Use this mixin to change the padding of the chips container.
@mixin material-chips-padding($padding) {
  ::ng-deep material-chips {
    padding: $padding;
  }
}

/// Allow the chip to wrap instead of triggering ellipses.
@mixin material-chip-wrapping() {
  material-chip {
    ::ng-deep .content {
      white-space: normal;

      // This ensures that the multi-line content has the same margins as the
      // single-line content.
      margin-top: $mat-grid;
      margin-bottom: $mat-grid;
    }

    height: auto;
    min-height: $mat-grid * 4;
  }
}

/// Use this mixin when chips are clickable for cursor, hover, and focus
/// styling.
///
/// Note: Use [ButtonDecorator] (or similar) to ensure role, tabindex, and a
/// label is set on your clickable chips.
@mixin material-chips-clickable() {

  material-chip {
    cursor: pointer;

    &[emphasis]:hover {
      background-color: $emphasis-hover-bg-color;
    }

    &[emphasis]:focus {
      background-color: $emphasis-selected-bg-color;
    }

    &:focus {
      background-color: $main-selected-bg-color;
      color: $mat-white;
      outline: none;

      ::ng-deep .delete-icon {
        fill: $mat-white;
      }
    }

    &:hover {
      background-color: $main-hover-bg-color;
      color: $mat-white;

      ::ng-deep .delete-icon {
        fill: $mat-white;
      }
    }

    ::ng-deep .delete-icon:focus {
      fill: $mat-grey-300;
    }
  }
}

@mixin chips-dense-theme() {
  ::ng-deep material-chip {
    height: $mat-grid * 3;
    border-radius: ($mat-grid * 3) / 2;
    margin: $mat-grid-type / 2 $mat-grid-type;

    .content {
      font-size: $mat-font-size-body;
    }

    .delete-icon {
      margin-right: 0;
    }

    .left-icon {
      margin-left: 0;
    }
  }
}
