chips.scss

@use '../core/style/variables';
@use '../core/style/elevation';
@use '../core/style/layout-common';
@use '../core/style/private';
@use '../../cdk/a11y';

$chip-min-height: 32px;
$chip-vertical-padding: 7px;
$chip-horizontal-padding: 12px;

$chip-remove-vertical-padding: 7px;
$chip-remove-before-margin: 8px;
$chip-remove-after-padding: 8px;

$chip-avatar-vertical-padding: 0;
$chip-avatar-before-padding: 0;
$chip-avatar-before-margin: 4px;
$chip-avatar-after-margin: 8px;

$chip-margin: 4px;

$chip-input-width: 150px;
$chip-input-margin: 4px;

$chip-avatar-size: 24px;
$chip-remove-size: 18px;

.mat-chip {
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;

  // Required for the ripple to clip properly in Safari.
  transform: translateZ(0);

  // Chips could be set on buttons so we need to reset the user agent styles.
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.mat-standard-chip {
  @include elevation.elevation-transition;
  @include private.private-animation-noop;
  display: inline-flex;
  padding: $chip-vertical-padding $chip-horizontal-padding;
  border-radius: 16px;
  align-items: center;
  cursor: default;
  min-height: $chip-min-height;

  // Centering the content using flexbox won't work on IE, if we have
  // a `min-height` without setting a `height`. This height won't do
  // anything since it's less than the minimum set above.
  height: 1px;

  .mat-chip-remove {
    // Reset the user agent styles in case a button is used.
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0;
    background: none;

    &.mat-icon, .mat-icon {
      width: $chip-remove-size;
      height: $chip-remove-size;
      font-size: $chip-remove-size;
    }
  }

  // Overlay used to darken the chip on hover and focus.
  &::after {
    @include layout-common.fill;
    border-radius: inherit;
    opacity: 0;
    content: '';
    pointer-events: none;
    transition: opacity 200ms variables.$swift-ease-in-out-timing-function;
  }

  &:hover::after {
    opacity: 0.12;
  }

  &:focus {
    outline: none;

    &::after {
      opacity: 0.16;
    }
  }

  @include a11y.high-contrast(active, off) {
    outline: solid 1px;

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

  &.mat-chip-disabled {
    &::after {
      opacity: 0;
    }

    .mat-chip-remove,
    .mat-chip-trailing-icon {
      cursor: default;
    }
  }

  &.mat-chip-with-trailing-icon.mat-chip-with-avatar,
  &.mat-chip-with-avatar {
    padding-top: $chip-avatar-vertical-padding;
    padding-bottom: $chip-avatar-vertical-padding;
  }

  &.mat-chip-with-trailing-icon.mat-chip-with-avatar {
    padding-right: $chip-remove-after-padding;
    padding-left: $chip-avatar-before-padding;

    [dir='rtl'] & {
      padding-left: $chip-remove-after-padding;
      padding-right: $chip-avatar-before-padding;
    }
  }

  &.mat-chip-with-trailing-icon {
    padding-top: $chip-remove-vertical-padding;
    padding-bottom: $chip-remove-vertical-padding;
    padding-right: $chip-remove-after-padding;
    padding-left: $chip-horizontal-padding;

    [dir='rtl'] & {
      padding-left: $chip-remove-after-padding;
      padding-right: $chip-horizontal-padding;
    }
  }

  &.mat-chip-with-avatar {
    padding-left: $chip-avatar-before-padding;
    padding-right: $chip-horizontal-padding;

    [dir='rtl'] & {
      padding-right: $chip-avatar-before-padding;
      padding-left: $chip-horizontal-padding;
    }
  }

  .mat-chip-avatar {
    width: $chip-avatar-size;
    height: $chip-avatar-size;
    margin-right: $chip-avatar-after-margin;
    margin-left: $chip-avatar-before-margin;

    [dir='rtl'] & {
      margin-left: $chip-avatar-after-margin;
      margin-right: $chip-avatar-before-margin;
    }
  }

  .mat-chip-remove,
  .mat-chip-trailing-icon {
    width: $chip-remove-size;
    height: $chip-remove-size;
    cursor: pointer;
  }

  .mat-chip-remove,
  .mat-chip-trailing-icon {
    margin-left: $chip-remove-before-margin;
    margin-right: 0;

    [dir='rtl'] & {
      margin-right: $chip-remove-before-margin;
      margin-left: 0;
    }
  }
}

// Styles for the chip's dynamically added ripple target.
.mat-chip-ripple {
  @include layout-common.fill;

  // Disable pointer events for the ripple container and focus overlay because the container
  // will overlay the user content and we don't want to disable mouse events on the user content.
  // Pointer events can be safely disabled because the ripple trigger element is the host element.
  pointer-events: none;

  // Inherit the border radius from the parent so that ripples don't exceed the parent button
  // boundaries.
  border-radius: inherit;

  // Ensures that the ripple effect doesn't overflow the ripple target.
  overflow: hidden;
}

.mat-chip-list-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin: -$chip-margin;

  input.mat-input-element,
  .mat-standard-chip {
    margin: $chip-margin;
  }
}

.mat-chip-list-stacked .mat-chip-list-wrapper {
  flex-direction: column;
  align-items: flex-start;

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

.mat-chip-avatar {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;

  // Makes `<img>` tags behave like `background-size: cover`. Not supported
  // in IE, but we're using it as a progressive enhancement.
  object-fit: cover;
}

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