@material/chips/_chip-theme.scss

//
// Copyright 2020 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.
//

// Selector '.mdc-*' should only be used in this project.
// stylelint-disable selector-class-pattern --
// Internal styling for Chip MDC component.

@use 'sass:map';
@use 'sass:math';
@use 'sass:color';
@use '@material/dom/dom';
@use '@material/density/density';
@use '@material/feature-targeting/feature-targeting';
@use '@material/shape/shape';
@use '@material/ripple/ripple-theme';
@use '@material/rtl/rtl';
@use '@material/theme/theme';
@use '@material/theme/keys';
@use '@material/elevation/elevation-theme';
@use '@material/tokens/resolvers';
@use '@material/theme/state';
@use '@material/theme/theme-color';
@use '@material/typography/typography';

$height: 32px;
$minimum-height: 24px;
$maximum-height: $height;
$density-scale: density.$default-scale;
$density-config: (
  height: (
    default: $height,
    maximum: $maximum-height,
    minimum: $minimum-height,
  ),
);
$radius: math.div($height, 2);
$type-scale: body2;
$container-color: color.mix(
  theme-color.prop-value(on-surface),
  theme-color.prop-value(surface),
  12%
);
$text-label-color: rgba(theme-color.prop-value(on-surface), 0.87);
$icon-color: rgba(theme-color.prop-value(on-surface), 0.87);
$checkmark-color: rgba(theme-color.prop-value(on-surface), 0.87);
$trailing-action-color: rgba(theme-color.prop-value(on-surface), 0.87);
$ripple-color: on-surface;
$checkmark-size: 20px;
$leading-icon-size: 20px;
$trailing-action-size: 18px;
$leading-padding: 12px;
$trailing-padding: 12px;
$avatar-size: 24px;
$avatar-leading-padding: 4px;
$avatar-trailing-padding: 8px;
$graphic-leading-padding: 6px;
$graphic-trailing-padding: 6px;
$trailing-action-leading-padding: 8px;
$trailing-action-trailing-padding: 8px;
$ripple-target: '.mdc-evolution-chip__ripple';
$ripple-target-primary: '.mdc-evolution-chip__ripple--primary';
$ripple-target-trailing: '.mdc-evolution-chip__ripple--trailing';

// Filter chip colors
$filter-selected-container-color: color.mix(
  theme-color.prop-value(on-surface),
  $container-color,
  8%
);

$_light-theme: (
  container-elevation: null,
  container-height: null,
  container-shadow-color: null,
  container-shape: null,
  disabled-label-text-color: null,
  disabled-label-text-opacity: null,
  disabled-outline-color: null,
  disabled-outline-opacity: null,
  elevated-container-color: null,
  elevated-container-elevation: null,
  elevated-container-shadow-color: null,
  container-surface-tint-layer-color: null,
  elevated-disabled-container-color: null,
  elevated-disabled-container-elevation: null,
  elevated-disabled-container-opacity: null,
  elevated-focus-container-elevation: null,
  elevated-hover-container-elevation: null,
  elevated-pressed-container-elevation: null,
  elevated-selected-container-color: null,
  elevated-selected-container-elevation: null,
  elevated-unselected-container-color: null,
  flat-container-elevation: null,
  flat-disabled-outline-color: null,
  flat-disabled-outline-opacity: null,
  flat-disabled-selected-outline-color: null,
  flat-disabled-selected-outline-opacity: null,
  flat-disabled-unselected-outline-color: null,
  flat-disabled-unselected-outline-opacity: null,
  flat-focus-outline-color: null,
  flat-outline-color: null,
  flat-outline-width: null,
  flat-selected-container-color: null,
  flat-selected-focus-container-elevation: null,
  flat-selected-hover-container-elevation: null,
  flat-selected-outline-color: null,
  flat-selected-outline-width: null,
  flat-selected-pressed-container-elevation: null,
  flat-unselected-focus-container-elevation: null,
  flat-unselected-focus-outline-color: null,
  flat-unselected-hover-container-elevation: null,
  flat-unselected-outline-color: null,
  flat-unselected-outline-width: null,
  flat-unselected-pressed-container-elevation: null,
  focus-label-text-color: null,
  focus-outline-color: null,
  focus-state-layer-color: null,
  focus-state-layer-opacity: null,
  hover-label-text-color: null,
  hover-state-layer-color: null,
  hover-state-layer-opacity: null,
  label-text-color: null,
  label-text-font: null,
  label-text-line-height: null,
  label-text-size: null,
  label-text-tracking: null,
  label-text-weight: null,
  outline-color: null,
  outline-width: null,
  pressed-label-text-color: null,
  pressed-state-layer-color: null,
  pressed-state-layer-opacity: null,
  selected-focus-label-text-color: null,
  selected-focus-state-layer-color: null,
  selected-focus-state-layer-opacity: null,
  selected-hover-label-text-color: null,
  selected-hover-state-layer-color: null,
  selected-hover-state-layer-opacity: null,
  selected-label-text-color: null,
  selected-pressed-label-text-color: null,
  selected-pressed-state-layer-color: null,
  selected-pressed-state-layer-opacity: null,
  unselected-focus-label-text-color: null,
  unselected-focus-state-layer-color: null,
  unselected-focus-state-layer-opacity: null,
  unselected-hover-label-text-color: null,
  unselected-hover-state-layer-color: null,
  unselected-hover-state-layer-opacity: null,
  unselected-label-text-color: null,
  unselected-pressed-label-text-color: null,
  unselected-pressed-state-layer-color: null,
  unselected-pressed-state-layer-opacity: null,
  with-avatar-avatar-shape: null,
  with-avatar-avatar-size: null,
  with-avatar-disabled-avatar-opacity: null,
  with-icon-disabled-icon-color: null,
  with-icon-disabled-icon-opacity: null,
  with-icon-focus-icon-color: null,
  with-icon-hover-icon-color: null,
  with-icon-icon-color: null,
  with-icon-icon-size: null,
  with-icon-pressed-icon-color: null,
  with-icon-selected-focus-icon-color: null,
  with-icon-selected-hover-icon-color: null,
  with-icon-selected-icon-color: null,
  with-icon-selected-pressed-icon-color: null,
  with-icon-unselected-focus-icon-color: null,
  with-icon-unselected-hover-icon-color: null,
  with-icon-unselected-icon-color: null,
  with-icon-unselected-pressed-icon-color: null,
  with-leading-icon-disabled-leading-icon-color: null,
  with-leading-icon-disabled-leading-icon-opacity: null,
  with-leading-icon-focus-leading-icon-color: null,
  with-leading-icon-hover-leading-icon-color: null,
  with-leading-icon-leading-icon-color: null,
  with-leading-icon-leading-icon-size: null,
  with-leading-icon-pressed-leading-icon-color: null,
  with-trailing-icon-disabled-trailing-icon-color: null,
  with-trailing-icon-disabled-trailing-icon-opacity: null,
  with-trailing-icon-focus-trailing-icon-color: null,
  with-trailing-icon-hover-trailing-icon-color: null,
  with-trailing-icon-pressed-trailing-icon-color: null,
  with-trailing-icon-trailing-icon-color: null,
  with-trailing-icon-trailing-icon-size: null,
);

@mixin theme-styles($theme, $resolvers: resolvers.$material) {
  @include theme.validate-theme-keys($_light-theme, $theme);

  @include _container-shape(map.get($theme, container-shape));
  @include _avatar-shape(map.get($theme, with-avatar-avatar-shape));
  @include graphic-size(map.get($theme, with-avatar-avatar-size));
  @include height(map.get($theme, container-height));
  @include elevation-theme.overlay-container-color(
    map.get($theme, container-surface-tint-layer-color)
  );
  @include _container-elevation(
    map.get($resolvers, elevation),
    $shadow-color: map.get($theme, container-shadow-color),
    $map: (default: map.get($theme, container-elevation))
  );
  @include _container-elevation(
    map.get($resolvers, elevation),
    $shadow-color: map.get($theme, flat-container-shadow-color),
    $map: (enabled: map.get($theme, flat-container-elevation))
  );
  @include _container-elevation(
    map.get($resolvers, elevation),
    $shadow-color: map.get($theme, elevated-container-shadow-color),
    $map: (
      enabled: map.get($theme, elevated-container-elevation),
      disabled: map.get($theme, elevated-disabled-container-elevation),
      hover: map.get($theme, elevated-hover-container-elevation),
      focus: map.get($theme, elevated-focus-container-elevation),
      pressed: map.get($theme, elevated-pressed-container-elevation)
    )
  );
  @include _selected-container-elevation(
    map.get($resolvers, elevation),
    $shadow-color: map.get($theme, elevated-container-shadow-color),
    $map: (
      enabled: map.get($theme, elevated-selected-container-elevation),
      disabled: map.get($theme, elevated-selected-disabled-container-elevation),
      hover: map.get($theme, elevated-selected-hover-container-elevation),
      focus: map.get($theme, elevated-selected-focus-container-elevation),
      pressed: map.get($theme, elevated-selected-pressed-container-elevation)
    )
  );
  @include _selected-container-elevation(
    map.get($resolvers, elevation),
    $shadow-color: map.get($theme, elevated-container-shadow-color),
    $map: (
      enabled: map.get($theme, flat-selected-container-elevation),
      disabled: map.get($theme, flat-selected-disabled-container-elevation),
      hover: map.get($theme, flat-selected-hover-container-elevation),
      focus: map.get($theme, flat-selected-focus-container-elevation),
      pressed: map.get($theme, flat-selected-pressed-container-elevation)
    )
  );
  @include _unselected-container-elevation(
    map.get($resolvers, elevation),
    $shadow-color: map.get($theme, elevated-container-shadow-color),
    $map: (
      enabled: map.get($theme, flat-unselected-container-elevation),
      disabled: map.get($theme, flat-unselected-disabled-container-elevation),
      hover: map.get($theme, flat-unselected-hover-container-elevation),
      focus: map.get($theme, flat-unselected-focus-container-elevation),
      pressed: map.get($theme, flat-unselected-pressed-container-elevation)
    )
  );
  @include outline-color(
    (
      enabled: map.get($theme, flat-outline-color),
      focus: map.get($theme, flat-focus-outline-color),
      disabled: map.get($theme, flat-disabled-outline-color),
    )
  );
  @include selected-outline-color(
    (
      enabled: map.get($theme, flat-selected-outline-color),
      disabled: map.get($theme, flat-disabled-selected-outline-color),
    )
  );
  @include _unselected-outline-color(
    (
      disabled: map.get($theme, flat-disabled-unselected-outline-color),
      focus: map.get($theme, flat-unselected-focus-outline-color),
      enabled: map.get($theme, flat-unselected-outline-color),
    )
  );
  @include outline-width(map.get($theme, outline-width));
  @include outline-width(map.get($theme, flat-outline-width));
  @include _selected-outline-width(
    map.get($theme, flat-selected-outline-width)
  );
  @include _unselected-outline-width(
    map.get($theme, flat-unselected-outline-width)
  );
  @include container-color(
    (
      enabled: map.get($theme, elevated-container-color),
      disabled: map.get($theme, elevated-disabled-container-color),
    )
  );
  @include selected-container-color(
    (
      enabled: map.get($theme, elevated-selected-container-color),
    )
  );
  @include selected-container-color(
    (
      enabled: map.get($theme, flat-selected-container-color),
    )
  );
  @include _unselected-container-color(
    (
      enabled: map.get($theme, elevated-unselected-container-color),
    )
  );
  @include _label-text-typography(
    (
      font: map.get($theme, label-text-font),
      line-height: map.get($theme, label-text-line-height),
      size: map.get($theme, label-text-size),
      weight: map.get($theme, label-text-weight),
      tracking: map.get($theme, label-text-tracking),
    )
  );
  @include text-label-color(
    (
      enabled: map.get($theme, label-text-color),
      hover: map.get($theme, hover-label-text-color),
      focus: map.get($theme, focus-label-text-color),
      pressed: map.get($theme, pressed-label-text-color),
      disabled: map.get($theme, disabled-label-text-color),
    )
  );
  @include selected-text-label-color(
    (
      enabled: map.get($theme, selected-label-text-color),
      hover: map.get($theme, selected-hover-label-text-color),
      focus: map.get($theme, selected-focus-label-text-color),
      pressed: map.get($theme, selected-pressed-label-text-color),
      disabled: map.get($theme, selected-disabled-label-text-color),
    )
  );
  @include _unselected-text-label-color(
    (
      enabled: map.get($theme, unselected-label-text-color),
      hover: map.get($theme, unselected-hover-label-text-color),
      focus: map.get($theme, unselected-focus-label-text-color),
      pressed: map.get($theme, unselected-pressed-label-text-color),
      disabled: map.get($theme, unselected-disabled-label-text-color),
    )
  );

  @include icon-size(map.get($theme, with-icon-icon-size));
  @include icon-color(
    (
      enabled: map.get($theme, with-icon-icon-color),
      disabled: map.get($theme, with-icon-disabled-icon-color),
      hover: map.get($theme, with-icon-hover-icon-color),
      focus: map.get($theme, with-icon-focus-icon-color),
      pressed: map.get($theme, with-icon-pressed-icon-color),
    )
  );
  @include _selected-icon-color(
    (
      enabled: map.get($theme, with-icon-selected-icon-color),
      disabled: map.get($theme, with-icon-selected-disabled-icon-color),
      hover: map.get($theme, with-icon-selected-hover-icon-color),
      focus: map.get($theme, with-icon-selected-focus-icon-color),
      pressed: map.get($theme, with-icon-selected-pressed-icon-color),
    )
  );
  @include _unselected-icon-color(
    (
      enabled: map.get($theme, with-icon-unselected-icon-color),
      disabled: map.get($theme, with-icon-unselected-disabled-icon-color),
      hover: map.get($theme, with-icon-unselected-hover-icon-color),
      focus: map.get($theme, with-icon-unselected-focus-icon-color),
      pressed: map.get($theme, with-icon-unselected-pressed-icon-color),
    )
  );
  @include icon-color(
    (
      disabled: map.get($theme, with-leading-icon-disabled-leading-icon-color),
      focus: map.get($theme, with-leading-icon-focus-leading-icon-color),
      hover: map.get($theme, with-leading-icon-hover-leading-icon-color),
      enabled: map.get($theme, with-leading-icon-leading-icon-color),
      pressed: map.get($theme, with-leading-icon-pressed-leading-icon-color),
    )
  );
  @include trailing-action-color(
    (
      disabled: map.get($theme, with-trailing-icon-disabled-trailing-icon-color),
      focus: map.get($theme, with-trailing-icon-focus-trailing-icon-color),
      hover: map.get($theme, with-trailing-icon-hover-trailing-icon-color),
      enabled: map.get($theme, with-trailing-icon-trailing-icon-color),
      pressed: map.get($theme, with-trailing-icon-pressed-trailing-icon-color),
    )
  );
  @include _ripple-theme(
    (
      focus-state-layer-color: map.get($theme, focus-state-layer-color),
      focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
      hover-state-layer-color: map.get($theme, hover-state-layer-color),
      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
      pressed-state-layer-color: map.get($theme, pressed-state-layer-color),
      pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),
    )
  );
  @include _selected-ripple-theme(
    (
      focus-state-layer-color: map.get($theme, selected-focus-state-layer-color),
      focus-state-layer-opacity:
        map.get($theme, selected-focus-state-layer-opacity),
      hover-state-layer-color: map.get($theme, selected-hover-state-layer-color),
      hover-state-layer-opacity:
        map.get($theme, selected-hover-state-layer-opacity),
      pressed-state-layer-color:
        map.get($theme, selected-pressed-state-layer-color),
      pressed-state-layer-opacity:
        map.get($theme, selected-pressed-state-layer-opacity),
    )
  );
  @include _unselected-ripple-theme(
    (
      focus-state-layer-color:
        map.get($theme, unselected-focus-state-layer-color),
      focus-state-layer-opacity:
        map.get($theme, unselected-focus-state-layer-opacity),
      hover-state-layer-color:
        map.get($theme, unselected-hover-state-layer-color),
      hover-state-layer-opacity:
        map.get($theme, unselected-hover-state-layer-opacity),
      pressed-state-layer-color:
        map.get($theme, unselected-pressed-state-layer-color),
      pressed-state-layer-opacity:
        map.get($theme, unselected-pressed-state-layer-opacity),
    )
  );
}

@mixin _ripple-theme($ripple-theme) {
  .mdc-evolution-chip__action--primary {
    @include ripple-theme.internal-theme-styles(
      (
        focus-state-layer-color: map.get($ripple-theme, focus-state-layer-color),
        focus-state-layer-opacity:
          map.get($ripple-theme, focus-state-layer-opacity),
        hover-state-layer-color: map.get($ripple-theme, hover-state-layer-color),
        hover-state-layer-opacity:
          map.get($ripple-theme, hover-state-layer-opacity),
        pressed-state-layer-color:
          map.get($ripple-theme, pressed-state-layer-color),
        pressed-state-layer-opacity:
          map.get($ripple-theme, pressed-state-layer-opacity),
      ),
      $ripple-target: $ripple-target
    );
  }
}

@mixin _selected-ripple-theme($ripple-theme) {
  @include _is-selected() {
    @include _ripple-theme($ripple-theme);
  }
}

@mixin _unselected-ripple-theme($ripple-theme) {
  @include _is-unselected() {
    @include _ripple-theme($ripple-theme);
  }
}

///
/// Sets the ripple color of the chip.
/// @param {Color} $color - The color of the ripple.
/// @param {Map} $opacity-map [null] - The optional opacity map for the states.
///
@mixin ripple-color(
  $color,
  $opacity-map: null,
  $query: feature-targeting.all()
) {
  @include _ripple-color($color, $opacity-map, $query);
}

///
/// Sets the selected ripple color of the chip.
/// @param {Color} $color - The color of the ripple.
/// @param {Map} $opacity-map [null] - The optional opacity map for the states.
///
@mixin selected-ripple-color(
  $color,
  $opacity-map: null,
  $query: feature-targeting.all()
) {
  &.mdc-evolution-chip--selected {
    @include ripple-color($color, $opacity-map, $query: $query);
  }
}

@mixin _ripple-color($color, $opacity-map, $query) {
  .mdc-evolution-chip__action--primary {
    @include ripple-theme.states(
      $color: $color,
      $opacity-map: $opacity-map,
      $query: $query,
      $ripple-target: $ripple-target
    );
  }
}

///
/// Sets the ripple color of the chip's trailing action.
/// @param {Color} $color - The color of the ripple.
/// @param {Map} $opacity-map [null] - The optional opacity map for the states.
///
@mixin trailing-action-ripple-color(
  $color,
  $opacity-map: null,
  $query: feature-targeting.all()
) {
  .mdc-evolution-chip__action--trailing {
    @include ripple-theme.states(
      $color: $color,
      $opacity-map: $opacity-map,
      $query: $query,
      $ripple-target: $ripple-target
    );
  }
}

///
/// Sets the size of the trailing action's ripple.
/// @param {Number} $size - The size of the ripple.
///
@mixin trailing-action-ripple-size($size, $query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);
  .mdc-evolution-chip__ripple--trailing {
    @include feature-targeting.targets($feat-structure) {
      @include theme.property(height, $size);
      @include theme.property(width, $size);
    }
  }
}

///
/// Sets the density scale for the chip.
/// @param {Number | String} $density-scale - Density scale value for component.
///     Supported density scale values are `-2`, `-1`, `0`.
///
@mixin density($density-scale, $query: feature-targeting.all()) {
  $height: density.prop-value(
    $density-config: $density-config,
    $density-scale: $density-scale,
    $property-name: height,
  );

  @include height($height, $query: $query);

  @if $density-scale != 0 {
    @include _reset-touch-target($query: $query);
  }
}

///
/// Resets touch target-related styles. This is called from the density mixin to
/// automatically remove the increased touch target, since dense components
/// don't have the same default a11y requirements.
/// @access private
///
@mixin _reset-touch-target($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-evolution-chip__action-touch {
    @include feature-targeting.targets($feat-structure) {
      display: none;
    }
  }
}

///
/// Sets custom height for the chip.
/// @param {Number} $height - The height of the chip.
///
@mixin height($height, $query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  @include feature-targeting.targets($feat-structure) {
    @include theme.property(height, $height);
  }
}

@mixin _container-shape($radius) {
  @include shape.radius($radius);

  #{$ripple-target} {
    @include shape.radius($radius);
  }

  .mdc-evolution-chip__action--primary:before {
    @include shape.radius($radius);
  }
}

@mixin _avatar-shape($radius) {
  .mdc-evolution-chip__icon--primary {
    @include shape.radius($radius);
  }
}

///
/// Sets the shape radius of the chip.
/// @param {Number|List} $radius - Shape radius in `border-radius` CSS format.
/// @param {Boolean} $rtl-reflexive - True flips radius corners in RTL.
///
@mixin shape-radius(
  $radius,
  $rtl-reflexive: false,
  $density-scale: $density-scale,
  $query: feature-targeting.all()
) {
  $height: density.prop-value(
    $density-config: $density-config,
    $density-scale: $density-scale,
    $property-name: height,
  );

  @include shape.radius(
    $radius,
    $rtl-reflexive,
    $component-height: $height,
    $query: $query
  );

  #{$ripple-target} {
    @include shape.radius(
      $radius,
      $rtl-reflexive,
      $component-height: $height,
      $query: $query
    );
  }

  .mdc-evolution-chip__action--primary:before {
    @include shape.radius(
      $radius,
      $rtl-reflexive,
      $component-height: $height,
      $query: $query
    );
  }

  .mdc-evolution-chip__icon--primary {
    @include shape.radius(
      $radius,
      $rtl-reflexive,
      $component-height: $height,
      $query: $query
    );
  }
}

///
/// Sets the width of the chip outline.
/// @param {Number} $width - The width of the chip outline.
///
@mixin outline-width($width, $query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-evolution-chip__action--primary:before {
    @include feature-targeting.targets($feat-structure) {
      @include theme.property(border-width, $width);
    }
  }
}

@mixin _selected-outline-width($width) {
  @include _is-selected() {
    @include outline-width($width);
  }
}

@mixin _unselected-outline-width($width) {
  @include _is-unselected() {
    @include outline-width($width);
  }
}

///
/// Customizes the outline color, using a Color or state Map.
/// - To set only the default color, provide a single Color.
/// - To set one or more state colors, provide a state Map with optional keys.
/// - Supported state Map keys: `default`, `enabled`, `focus`, `disabled`.
///
/// @example
///   @include outline-color(blue);
///   @include outline-color((disabled: gray));
///
/// @param {Color | Map} $color-or-map - The outline's color or a state Map
///
@mixin outline-color($color-or-map, $query: feature-targeting.all()) {
  @include _outline-color(state.get-default-state($color-or-map), $query);
  @include _is-enabled() {
    @include _outline-color(state.get-enabled-state($color-or-map), $query);
  }
  @include _focus-outline-color(state.get-focus-state($color-or-map), $query);
  @include _is-disabled() {
    @include _outline-color(state.get-disabled-state($color-or-map), $query);
  }
}

@mixin _selected-outline-color($color-or-map) {
  @include _is-selected() {
    @include _outline-color($color-or-map);
  }
}

///
/// Customizes the selected outline color, using a Color or state Map.
/// - To set only the default color, provide a single Color.
/// - To set one or more state colors, provide a state Map with optional keys.
/// - Supported state Map keys: `default`, `enabled`, `focus`, `disabled`.
///
/// @example
///   @include selected-outline-color(blue);
///   @include selected-outline-color((disabled: gray));
///
/// @param {Color | Map} $color-or-map - The outline's color or a state Map
///
@mixin selected-outline-color($color-or-map, $query: feature-targeting.all()) {
  @include _is-selected() {
    @include outline-color($color-or-map, $query: $query);
  }
}

@mixin _unselected-outline-color($color-or-map) {
  @include _is-unselected() {
    @include outline-color($color-or-map);
  }
}

@mixin _outline-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  .mdc-evolution-chip__action--primary:before {
    @include feature-targeting.targets($feat-color) {
      @if $color {
        @include theme.property(border-color, $color);
      }

      // TODO(b/206694742): Find a better solution.
      @if $color == transparent {
        @include dom.forced-colors-mode($exclude-ie11: true) {
          @include theme.property(border-color, CanvasText);
        }
      }
    }
  }
}

@mixin _focus-outline-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational) {
    @include ripple-theme.focus() {
      &:before {
        @include feature-targeting.targets($feat-color) {
          @if $color {
            @include theme.property(border-color, $color);
          }
        }
      }
    }
  }
}

///
/// Sets the style of the chip outline.
/// @param {String} $style - The style of the chip outline.
///
@mixin outline-style($style, $query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-evolution-chip__action--primary:before {
    @include feature-targeting.targets($feat-structure) {
      @include theme.property(border-style, $style);
    }
  }
}

///
/// Customizes the container color, using a Color or state Map.
/// - To set only the default color, provide a single Color.
/// - To set one or more state colors, provide a state Map with optional keys.
/// - Supported state Map keys: `default`, `enabled`, `disabled`.
///
/// @example
///   @include container-color(blue);
///   @include container-color((disabled: gray));
///
/// @param {Color | Map} $color-or-map - The container's color or a state Map
///
@mixin container-color($color-or-map, $query: feature-targeting.all()) {
  @include _container-color(state.get-default-state($color-or-map), $query);
  @include _is-enabled() {
    @include _container-color(state.get-enabled-state($color-or-map), $query);
  }
  @include _is-disabled() {
    @include _container-color(state.get-disabled-state($color-or-map), $query);
  }
}

///
/// Customizes the selected container color, using a Color or state Map.
/// - To set only the default color, provide a single Color.
/// - To set one or more state colors, provide a state Map with optional keys.
/// - Supported state Map keys: `default`, `enabled`, `disabled`.
///
/// @example
///   @include selected-container-color(blue);
///   @include selected-container-color((disabled: gray));
///
/// @param {Color | Map} $color-or-map - The container's color or a state Map
///
@mixin selected-container-color(
  $color-or-map,
  $query: feature-targeting.all()
) {
  @include _is-selected() {
    @include container-color($color-or-map, $query: $query);
  }
}

@mixin _unselected-container-color($color-or-map) {
  @include _is-unselected() {
    @include container-color($color-or-map);
  }
}

@mixin _container-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  @include feature-targeting.targets($feat-color) {
    @if $color {
      @include theme.property(background-color, $color);
    }
  }
}

///
/// Customizes the text label color, using a Color or state Map.
/// - To set only the default color, provide a single Color.
/// - To set one or more state colors, provide a state Map with optional keys.
/// - Supported state Map keys: `default`, `enabled`, `hover`, `focus`, `disabled`.
///
/// @example
///   @include text-label-color(blue);
///   @include text-label-color((disabled: gray));
///
/// @param {Color | Map} $color-or-map - The label's color or a state Map
///
@mixin text-label-color($color-or-map, $query: feature-targeting.all()) {
  @include _text-label-color(state.get-default-state($color-or-map), $query);
  @include _is-enabled() {
    @include _text-label-color(state.get-enabled-state($color-or-map), $query);
  }
  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):hover {
    @include _text-label-color(state.get-hover-state($color-or-map), $query);
  }

  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational) {
    @include ripple-theme.focus() {
      @include _text-label-color(state.get-focus-state($color-or-map), $query);
    }
  }

  @include _is-disabled() {
    @include _text-label-color(state.get-disabled-state($color-or-map), $query);
  }
}

@mixin _label-text-typography($typography-theme) {
  .mdc-evolution-chip__text-label {
    @include typography.theme-styles($typography-theme);
  }
}

///
/// Customizes the selected text label color, using a Color or state Map.
/// - To set only the default color, provide a single Color.
/// - To set one or more state colors, provide a state Map with optional keys.
/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`.
///
/// @example
///   @include selected-text-label-color(blue);
///   @include selected-text-label-color((disabled: gray));
///
/// @param {Color | Map} $color-or-map - The label's color or a state Map
///
@mixin selected-text-label-color(
  $color-or-map,
  $query: feature-targeting.all()
) {
  @include _is-selected() {
    @include text-label-color($color-or-map, $query: $query);
  }
}

@mixin _unselected-text-label-color($color-or-map) {
  @include _is-unselected() {
    @include text-label-color($color-or-map);
  }
}

@mixin _text-label-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  .mdc-evolution-chip__text-label {
    @include feature-targeting.targets($feat-color) {
      @if $color {
        @include theme.property(color, $color);
      }
    }
  }
}

///
/// Sets the type scale of the text label.
/// @param {String} $type-scale - The type scale of the text label.
///
@mixin text-label-type-scale($type-scale, $query: feature-targeting.all()) {
  .mdc-evolution-chip__text-label {
    @include typography.typography($type-scale, $query: $query);
  }
}

///
/// Sets the size of the graphic.
/// @param {Number} $size - The size of the graphic.
///
@mixin graphic-size($size, $query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  // Expose the width as a readable custom property that can be used when
  // computing the chip bounding client rect as an additive value for the chip
  // width. This solves for selectable chips without icons growing/shrinking as
  // they toggle their selected state. The ripple dimensions will have been
  // computed based on the unselected bounding client react which will not have
  // enough horizontal space to account for the growth in width.
  &.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon) {
    @if $size {
      @include theme.property(--mdc-chip-graphic-selected-width, $size);
    }
  }

  .mdc-evolution-chip__graphic {
    @include feature-targeting.targets($feat-structure) {
      @include theme.property(height, $size);
      @include theme.property(width, $size);
      @include theme.property(font-size, $size);
    }
  }
}

///
/// Customizes the icon color, using a Color or state Map.
/// - To set only the default color, provide a single Color.
/// - To set one or more state colors, provide a state Map with optional keys.
/// - Supported state Map keys: `default`, `enabled`, `focus`, `disabled`.
///
/// @example
///   @include icon-color(blue);
///   @include icon-color((disabled: gray));
///
/// @param {Color | Map} $color-or-map - The icon's color or a state Map
///
@mixin icon-color($color-or-map, $query: feature-targeting.all()) {
  @include _icon-color(state.get-default-state($color-or-map), $query);

  @include _is-enabled() {
    @include _icon-color(state.get-enabled-state($color-or-map), $query);
  }

  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):hover {
    @include _icon-color(state.get-hover-state($color-or-map), $query);
  }

  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational) {
    @include ripple-theme.focus() {
      @include _icon-color(state.get-focus-state($color-or-map), $query);
    }
  }

  @include _is-disabled() {
    @include _icon-color(state.get-disabled-state($color-or-map), $query);
  }
}

@mixin _selected-icon-color($color-or-map) {
  @include checkmark-color($color-or-map);
}

@mixin _unselected-icon-color($color-or-map) {
  @include _is-unselected() {
    @include icon-color($color-or-map);
  }
}

@mixin _icon-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  .mdc-evolution-chip__icon--primary {
    @include feature-targeting.targets($feat-color) {
      @if $color {
        @include theme.property(color, $color);
      }
    }
  }
}

///
/// Customizes the icon container color, using a Color or state Map.
/// - To set only the default color, provide a single Color.
/// - To set one or more state colors, provide a state Map with optional keys.
/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`.
///
/// @example
///   @include icon-container-color(blue);
///   @include icon-container-color((disabled: gray));
///
/// @param {Color | Map} $color-or-map - The icon's container color or a state Map
///
@mixin icon-container-color($color-or-map, $query: feature-targeting.all()) {
  @include _icon-container-color(
    state.get-default-state($color-or-map),
    $query
  );

  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):hover {
    @include _icon-container-color(
      state.get-hover-state($color-or-map),
      $query
    );
  }

  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational) {
    @include ripple-theme.focus() {
      @include _icon-container-color(
        state.get-focus-state($color-or-map),
        $query
      );
    }
  }

  &.mdc-evolution-chip--disabled {
    @include _icon-container-color(
      state.get-disabled-state($color-or-map),
      $query
    );
  }
}

@mixin _icon-container-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  .mdc-evolution-chip__icon--primary {
    @include feature-targeting.targets($feat-color) {
      @if $color {
        @include theme.property(background-color, $color);
      }
    }
  }
}

///
/// Sets the size of the icon.
/// @param {Number} $size - The size of the icon.
///
@mixin icon-size($size, $query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-evolution-chip__icon--primary {
    @include feature-targeting.targets($feat-structure) {
      @include theme.property(height, $size);
      @include theme.property(width, $size);
      @include theme.property(font-size, $size);
    }
  }
}

///
/// Sets the size of the trailing action.
/// @param {Number} $size - The size of the trailing action.
///
@mixin trailing-action-size($size, $query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-evolution-chip__icon--trailing {
    @include feature-targeting.targets($feat-structure) {
      @include theme.property(height, $size);
      @include theme.property(width, $size);
      @include theme.property(font-size, $size);
    }
  }
}

///
/// Customizes the trailing action color, using a Color or state Map.
/// - To set only the default color, provide a single Color.
/// - To set one or more state colors, provide a state Map with optional keys.
/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`.
///
/// @example
///   @include trailing-action-color(blue);
///   @include trailing-action-color((disabled: gray));
///
/// @param {Color | Map} $color-or-map - The trailing action's color or a state Map
///
@mixin trailing-action-color($color-or-map, $query: feature-targeting.all()) {
  @include _trailing-action-color(
    state.get-default-state($color-or-map),
    $query
  );

  @include _is-enabled() {
    @include _trailing-action-color(
      state.get-enabled-state($color-or-map),
      $query
    );
  }

  .mdc-evolution-chip__action--trailing:hover {
    @include _trailing-action-color(
      state.get-hover-state($color-or-map),
      $query
    );
  }

  .mdc-evolution-chip__action--trailing {
    @include ripple-theme.focus() {
      @include _trailing-action-color(
        state.get-focus-state($color-or-map),
        $query
      );
    }
  }

  @include _is-disabled() {
    @include _trailing-action-color(
      state.get-disabled-state($color-or-map),
      $query
    );
  }
}

@mixin _trailing-action-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  .mdc-evolution-chip__icon--trailing {
    @include feature-targeting.targets($feat-color) {
      @if $color {
        @include theme.property(color, $color);
      }
    }
  }
}

///
/// Sets the size of the checkmark.
/// @param {Number} $size - The size of the checkmark.
///
@mixin checkmark-size($size, $query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-evolution-chip__checkmark {
    @include feature-targeting.targets($feat-structure) {
      @include theme.property(height, $size);
      @include theme.property(width, $size);
    }
  }
}

///
/// Customizes the checkmark color, using a Color or state Map.
/// - To set only the default color, provide a single Color.
/// - To set one or more state colors, provide a state Map with optional keys.
/// - Supported state Map keys: `default`, `enabled`, `hover`, `focus`, `disabled`.
///
/// @example
///   @include checkmark-color(blue);
///   @include checkmark-color((disabled: gray));
///
/// @param {Color | Map} $color-or-map - The checkmark's color or a state Map
///
@mixin checkmark-color($color-or-map, $query: feature-targeting.all()) {
  @include _checkmark-color(state.get-default-state($color-or-map), $query);

  @include _is-enabled() {
    @include _checkmark-color(state.get-enabled-state($color-or-map), $query);
  }

  .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):hover {
    @include _checkmark-color(state.get-hover-state($color-or-map), $query);
  }

  .mdc-evolution-chip__action--primary {
    @include ripple-theme.focus() {
      @include _checkmark-color(state.get-focus-state($color-or-map), $query);
    }
  }

  @include _is-disabled() {
    @include _checkmark-color(state.get-disabled-state($color-or-map), $query);
  }
}

@mixin _checkmark-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  .mdc-evolution-chip__checkmark {
    @include feature-targeting.targets($feat-color) {
      @if $color {
        @include theme.property(color, $color);
      }
    }
  }
}

///
/// Customizes the checkmark container color, using a Color or state Map.
/// - To set only the default color, provide a single Color.
/// - To set one or more state colors, provide a state Map with optional keys.
/// - Supported state Map keys: `default`, `hover`, `focus`, `disabled`.
///
/// @example
///   @include checkmark-container-color(blue);
///   @include checkmark-container-color((disabled: gray));
///
/// @param {Color | Map} $color-or-map - The checkmark container's color or a state Map
///
@mixin checkmark-container-color(
  $color-or-map,
  $query: feature-targeting.all()
) {
  @include _checkmark-container-color(
    state.get-default-state($color-or-map),
    $query
  );

  &.mdc-evolution-chip--disabled {
    @include _checkmark-container-color(
      state.get-disabled-state($color-or-map),
      $query
    );
  }
}

@mixin _checkmark-container-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  .mdc-evolution-chip__checkmark-background {
    @include feature-targeting.targets($feat-color) {
      @if $color {
        @include theme.property(background-color, $color);
      }
    }
  }
}

///
/// Sets the horizontal padding for the chip.
/// @param {Number} $leading - The leading padding for the chip.
/// @param {Number} $trailing [$leading] - The trailing padding for the chip.
///
@mixin horizontal-padding(
  $leading,
  $trailing: $leading,
  $query: feature-targeting.all()
) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-evolution-chip__action--primary {
    @include feature-targeting.targets($feat-structure) {
      @include rtl.reflexive-property(padding, $leading, $trailing);
    }
  }
}

///
/// Sets the horizontal padding for chips with a graphic.
/// @param {Number} $graphic-leading - The leading padding for the graphic.
/// @param {Number} $graphic-trailing - The trailing padding for the graphic.
/// @param {Number} $primary-trailing - The trailing padding for the primary action.
///
@mixin with-graphic-horizontal-padding(
  $graphic-leading,
  $graphic-trailing,
  $primary-trailing,
  $query: feature-targeting.all()
) {
  $feat-structure: feature-targeting.create-target($query, structure);

  &.mdc-evolution-chip--with-primary-graphic {
    .mdc-evolution-chip__graphic {
      @include feature-targeting.targets($feat-structure) {
        @include rtl.reflexive-property(
          padding,
          $graphic-leading,
          $graphic-trailing
        );
      }
    }

    .mdc-evolution-chip__action--primary {
      @include feature-targeting.targets($feat-structure) {
        @include rtl.reflexive-property(padding, 0, $primary-trailing);
      }
    }
  }
}

///
/// Sets the horizontal padding for chips with a trailing action.
/// @param {Number} $primary-leading - The leading padding for the primary action.
/// @param {Number} $trailing-action-leading - The leading padding for the trailing action.
/// @param {Number} $trailing-action-trailing - The trailing padding for the trailing action.
///
@mixin with-trailing-action-horizontal-padding(
  $primary-leading,
  $trailing-action-leading,
  $trailing-action-trailing,
  $query: feature-targeting.all()
) {
  $feat-structure: feature-targeting.create-target($query, structure);

  &.mdc-evolution-chip--with-trailing-action {
    .mdc-evolution-chip__action--trailing {
      @include feature-targeting.targets($feat-structure) {
        @include rtl.reflexive-property(
          padding,
          $trailing-action-leading,
          $trailing-action-trailing
        );
      }
    }

    #{$ripple-target-trailing} {
      @include feature-targeting.targets($feat-structure) {
        @include rtl.reflexive-position(left, $trailing-action-leading);
      }
    }

    .mdc-evolution-chip__action--primary {
      @include feature-targeting.targets($feat-structure) {
        @include rtl.reflexive-property(padding, $primary-leading, 0);
      }
    }
  }
}

///
/// Sets the horizontal padding for chips with a graphic and trailing action.
/// @param {Number} $graphic-leading - The leading padding for the graphic.
/// @param {Number} $graphic-trailing - The trailing padding for the graphic.
/// @param {Number} $trailing-action-leading - The leading padding for the trailing action.
/// @param {Number} $trailing-action-trailing - The trailing padding for the trailing action.
///
@mixin with-graphic-and-trailing-action-horizontal-padding(
  $graphic-leading,
  $graphic-trailing,
  $trailing-action-leading,
  $trailing-action-trailing,
  $query: feature-targeting.all()
) {
  $feat-structure: feature-targeting.create-target($query, structure);
  &.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action {
    .mdc-evolution-chip__graphic {
      @include feature-targeting.targets($feat-structure) {
        @include rtl.reflexive-property(
          padding,
          $graphic-leading,
          $graphic-trailing
        );
      }
    }

    .mdc-evolution-chip__action--trailing {
      @include feature-targeting.targets($feat-structure) {
        @include rtl.reflexive-property(
          padding,
          $trailing-action-leading,
          $trailing-action-trailing
        );
      }
    }

    #{$ripple-target-trailing} {
      @include feature-targeting.targets($feat-structure) {
        @include rtl.reflexive-position(left, $trailing-action-leading);
      }
    }

    .mdc-evolution-chip__action--primary {
      @include feature-targeting.targets($feat-structure) {
        @include rtl.reflexive-property(padding, 0, 0);
      }
    }
  }
}

@mixin _container-elevation($resolver, $shadow-color, $map) {
  @include _is-enabled() {
    @if (state.get-enabled-state($map)) {
      @include elevation-theme.with-resolver(
        $resolver,
        $elevation: state.get-enabled-state($map),
        $shadow-color: $shadow-color
      );
    }
  }

  @include ripple-theme.hover() {
    @if state.get-hover-state($map) {
      @include elevation-theme.with-resolver(
        $resolver,
        $elevation: state.get-hover-state($map),
        $shadow-color: $shadow-color
      );
    }
  }

  @include ripple-theme.focus() {
    @if (state.get-focus-state($map)) {
      @include elevation-theme.with-resolver(
        $resolver,
        $elevation: state.get-focus-state($map),
        $shadow-color: $shadow-color
      );
    }
  }

  @include ripple-theme.pressed() {
    @if (state.get-pressed-state($map)) {
      @include elevation-theme.with-resolver(
        $resolver,
        $elevation: state.get-pressed-state($map),
        $shadow-color: $shadow-color
      );
    }
  }

  @include _is-disabled() {
    @if (state.get-disabled-state($map)) {
      @include elevation-theme.with-resolver(
        $resolver,
        $elevation: state.get-disabled-state($map),
        $shadow-color: $shadow-color
      );
    }
  }
}

@mixin _selected-container-elevation($resolver, $shadow-color, $map) {
  @include _is-selected() {
    @include _container-elevation($resolver, $shadow-color, $map);
  }
}

@mixin _unselected-container-elevation($resolver, $shadow-color, $map) {
  @include _is-unselected() {
    @include _container-elevation($resolver, $shadow-color, $map);
  }
}

@mixin _is-enabled() {
  &:not(.mdc-evolution-chip--disabled) {
    @content;
  }
}

@mixin _is-disabled() {
  &.mdc-evolution-chip--disabled {
    @content;
  }
}

@mixin _is-selected() {
  &.mdc-evolution-chip--selected {
    @content;
  }
}

@mixin _is-unselected() {
  &:not(.mdc-evolution-chip--selected) {
    @content;
  }
}