@import '@material/chips/mixins';
@import '../../material/core/style/noop-animation';
@import '../../cdk/a11y/a11y';
@import '../mdc-helpers/mdc-helpers';

@include mdc-chip-without-ripple($query: $mat-base-styles-query);
@include mdc-chip-set-core-styles($query: $mat-base-styles-query);
@include _noop-animation;

.mat-mdc-chip {
  // MDC uses a pointer cursor
  cursor: default;
  // Needed to prevent mat-ripple from escaping the chip
  overflow: hidden;
  // Required for the ripple to clip properly in Safari.
  transform: translateZ(0);

  @include cdk-high-contrast {
    outline: solid 1px;

    &:focus {
      // Use 2px here since the dotted outline is a little thinner.
      outline: dotted 2px;
    }
  }
}

// The MDC chip styles related to hover and focus states are intertwined with the MDC ripple styles.
// We currently don't use the MDC ripple due to size concerns, therefore we need to add some
// additional styles to restore these states.
.mat-mdc-chip:not(.mat-mdc-chip-disabled) {
  &:hover, &:focus, div:focus {
    .mdc-chip__text::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;

      // Note that we use a `background` and `opacity`, instead of an `rgba` background, because
      // `rgba` backgrounds get converted into solid colors in high contrast mode.
      background: #000;
      opacity: 0.2;
      top: 0;
      left: 0;
      pointer-events: none;
    }
  }
}

// Angular Material supports disabled chips, which MDC does not.
// Dim the disabled chips and stop MDC from changing the icon color on click.
.mat-mdc-chip-disabled.mat-mdc-chip {
  opacity: 0.4;

  .mat-mdc-chip-trailing-icon, .mat-chip-row-focusable-text-content {
    pointer-events: none;
  }
}

// Angular Material supports vertically-stacked chips, which MDC does not.
.mat-mdc-chip-set-stacked {
  flex-direction: column;
  align-items: flex-start;

  .mat-mdc-chip {
    width: 100%;
  }
}

// Add styles for the matChipInputFor input element.
$mat-chip-input-width: 150px;

input.mat-mdc-chip-input {
  flex: 1 0 $mat-chip-input-width;
}