//
// Copyright 2017 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

@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-selected-ink-color(primary);
  @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--selected {
  @include mdc-theme-prop(background-color, surface);
}

.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;
}

// 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;
    }
  }
}