//
// Copyright 2017 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions://
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.//
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

@import "@material/animation/functions";
@import "@material/checkbox/functions";
@import "@material/checkbox/variables";
@import "@material/ripple/common";
@import "@material/ripple/mixins";
@import "@material/theme/mixins";
@import "@material/typography/mixins";
@import "../mixins";
@import "../variables";

.mdc-chip {
  @include mdc-ripple-surface;
  @include mdc-ripple-radius-bounded;
  @include mdc-chip-corner-radius($mdc-chip-border-radius-default);
  @include mdc-chip-fill-color($mdc-chip-fill-color-default);
  @include mdc-chip-ink-color($mdc-chip-ink-color-default);
  @include mdc-chip-leading-icon-color($mdc-chip-icon-color);
  @include mdc-chip-trailing-icon-color($mdc-chip-icon-color);
  @include mdc-chip-leading-icon-size($mdc-chip-leading-icon-size);
  @include mdc-chip-trailing-icon-size($mdc-chip-trailing-icon-size);
  @include mdc-typography(body2);
  @include mdc-chip-height($mdc-chip-height-default);

  display: inline-flex;
  position: relative;
  align-items: center;
  box-sizing: border-box;
  padding: $mdc-chip-vertical-padding $mdc-chip-horizontal-padding;
  outline: none;
  cursor: pointer;
  overflow: hidden;

  &:hover {
    @include mdc-theme-prop(color, on-surface);
  }
}

.mdc-chip--exit {
  transition:
    opacity 75ms $mdc-animation-standard-curve-timing-function,
    width 150ms $mdc-animation-deceleration-curve-timing-function,
    padding 100ms linear,
    margin 100ms linear;
  opacity: 0;
}

.mdc-chip__text {
  white-space: nowrap;
}

.mdc-chip__icon {
  border-radius: 50%;
  outline: none;
  vertical-align: middle;
}

.mdc-chip__icon--trailing {
  margin: 0 -4px 0 4px;
}

.mdc-chip__checkmark,
.mdc-chip__icon--leading {
  height: $mdc-chip-leading-icon-size;
  margin: -4px 4px -4px -4px;
}

.mdc-chip__checkmark-path {
  transition:
    mdc-checkbox-transition-exit(
      stroke-dashoffset,
      $mdc-chip-checkmark-animation-delay,
      $mdc-chip-checkmark-animation-duration
    );
  stroke-width: 2px;
  stroke-dashoffset: $mdc-checkbox-mark-path-length_;
  stroke-dasharray: $mdc-checkbox-mark-path-length_;
}

.mdc-chip--selected .mdc-chip__checkmark-path {
  stroke-dashoffset: 0;
}

// Change color of selected choice chips

.mdc-chip-set--choice {
  .mdc-chip {
    @include mdc-chip-selected-ink-color(primary);
  }

  .mdc-chip--selected {
    @include mdc-theme-prop(background-color, surface);
  }
}

// Add leading checkmark to filter chips with no leading icon

.mdc-chip__checkmark-svg {
  width: 0;
  height: $mdc-chip-leading-icon-size;
  transition: width $mdc-chip-width-animation-duration $mdc-animation-standard-curve-timing-function;
}

.mdc-chip--selected .mdc-chip__checkmark-svg {
  width: $mdc-chip-leading-icon-size;
}

// Add leading checkmark to filter chips with a leading icon

.mdc-chip-set--filter {
  .mdc-chip__icon--leading {
    transition: opacity $mdc-chip-opacity-animation-duration linear;
    transition-delay: $mdc-chip-leading-icon-delay;
    opacity: 1;

    + .mdc-chip__checkmark {
      transition: opacity $mdc-chip-opacity-animation-duration linear;

      // Delay the checkmark transition.
      transition-delay: $mdc-chip-checkmark-with-leading-icon-delay;
      opacity: 0;

      .mdc-chip__checkmark-svg {
        transition: width 0ms;
      }
    }
  }

  .mdc-chip--selected .mdc-chip__icon--leading {
    opacity: 0;

    + .mdc-chip__checkmark {
      // This ensures that the checkmark has zero width while the leading icon is still animating.
      width: 0;
      opacity: 1;
    }
  }

  .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading {
    width: 0;

    // This ensures that the leading icon doesn't fade in while the checkmark is fading out.
    opacity: 0;

    + .mdc-chip__checkmark {
      width: $mdc-chip-leading-icon-size;
    }
  }
}