VLEX/BPM-UI/node_modules/@material/checkbox/_mixins.scss

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

@use "sass:math";
@use "@material/animation/functions" as functions2;
@use "@material/density/functions" as density-functions;
@use "@material/feature-targeting/functions" as feature-targeting-functions;
@use "@material/feature-targeting/mixins" as feature-targeting-mixins;
@use "@material/ripple/mixins" as ripple-mixins;
@use "@material/touch-target/mixins" as touch-target-mixins;
@use "@material/theme/functions" as theme-functions;
@use "./functions";
@use "./keyframes";
@use "./variables";
@use "@material/theme/mixins" as theme-mixins;
@use "@material/touch-target/variables" as touch-target-variables;

//
// Public
//

$ripple-target: ".mdc-checkbox__ripple";

///
/// Checkbox core styles.
///
@mixin core-styles($query: feature-targeting-functions.all()) {
  @include without-ripple($query);
  @include ripple($query);
}

// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead.
@mixin without-ripple($query: feature-targeting-functions.all()) {
  // postcss-bem-linter: define checkbox

  $feat-animation: feature-targeting-functions.create-target($query, animation);
  $feat-color: feature-targeting-functions.create-target($query, color);
  $feat-structure: feature-targeting-functions.create-target($query, structure);

  @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE

  @include feature-targeting-mixins.targets($feat-animation) {
    @include keyframes.mark-keyframes_;
  }

  .mdc-checkbox {
    @include feature-targeting-mixins.targets($feat-structure) {
      @include base_;
    }

    @include focus-indicator-color(variables.$baseline-theme-color, $query: $query);
    @include density(variables.$density-scale, $query: $query);
  }

  @include container-colors($query: $query);
  @include disabled-container-colors($query: $query);
  @include ink-color(variables.$mark-color, $query: $query);
  @include disabled-ink-color(variables.$mark-color, $query: $query);

  @media screen and (-ms-high-contrast: active) {
    @include disabled-container-colors(
      $unmarked-stroke-color: GrayText,
      $unmarked-fill-color: transparent,
      $marked-stroke-color: GrayText,
      $marked-fill-color: transparent,
      $query: $query
    );
    @include disabled-ink-color(GrayText, $query: $query);

    .mdc-checkbox__mixedmark {
      @include feature-targeting-mixins.targets($feat-structure) {
        margin: 0 1px; // Extra horizontal space around mixedmark symbol.
      }
    }
  }

  // Needed to disable hover effects on CSS-only (non-JS) checkboxes
  .mdc-checkbox--disabled {
    @include feature-targeting-mixins.targets($feat-structure) {
      @include disabled_;
    }
  }

  .mdc-checkbox__background {
    @include background_($query);
  }

  .mdc-checkbox__checkmark {
    @include checkmark_($query);
  }

  .mdc-checkbox__checkmark-path {
    @include checkmark-path_($query);
  }

  .mdc-checkbox__mixedmark {
    @include mixedmark_($query);
  }

  // JS checkbox
  .mdc-checkbox--upgraded {
    .mdc-checkbox__background,
    .mdc-checkbox__checkmark,
    .mdc-checkbox__checkmark-path,
    .mdc-checkbox__mixedmark {
      @include feature-targeting-mixins.targets($feat-animation) {
        @include child--upgraded_;
      }
    }
  }

  .mdc-checkbox--anim {
    @include feature-targeting-mixins.targets($feat-animation) {
      @include anim_;
    }
  }

  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
    @include feature-targeting-mixins.targets($feat-animation) {
      @include background--marked_;
    }

    .mdc-checkbox__checkmark-path {
      @include feature-targeting-mixins.targets($feat-structure) {
        @include checkmark-path--marked_;
      }
    }
  }

  // The frame's ::before element is used as a focus indicator for the checkbox
  .mdc-checkbox__background::before {
    @include focus-indicator_($query);
  }

  .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background::before {
    @include focus-indicator--focused_($query);
  }

  .mdc-checkbox__native-control {
    @include feature-targeting-mixins.targets($feat-structure) {
      @include native-control_;
    }

    &:disabled {
      @include feature-targeting-mixins.targets($feat-structure) {
        @include disabled_;
      }
    }
  }

  .mdc-checkbox--touch {
    @include touch-target-mixins.margin(
      $component-height: variables.$ripple-size,
      $component-width: variables.$ripple-size,
      $query: $query);
    @include touch-target(touch-target-variables.$height, $query: $query);
  }

  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
    .mdc-checkbox__checkmark {
      @include checkmark--checked_($query);
    }

    .mdc-checkbox__mixedmark {
      @include feature-targeting-mixins.targets($feat-structure) {
        @include mixedmark--checked_;
      }
    }
  }

  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
    .mdc-checkbox__checkmark {
      @include checkmark--indeterminate_($query);
    }

    .mdc-checkbox__mixedmark {
      @include feature-targeting-mixins.targets($feat-structure) {
        @include mixedmark--indeterminate_;
      }
    }
  }

  // postcss-bem-linter: end
}

// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead.
@mixin ripple($query: feature-targeting-functions.all()) {
  $feat-structure: feature-targeting-functions.create-target($query, structure);

  @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE

  .mdc-checkbox {
    @include ripple-mixins.surface($query: $query, $ripple-target: $ripple-target);
    @include ripple-mixins.states($color: on-surface, $query: $query, $ripple-target: $ripple-target);
    @include ripple-mixins.radius-unbounded($query: $query, $ripple-target: $ripple-target);
  }

  #{$ripple-target} {
    @include ripple-mixins.target-common($query: $query);
  }

  .mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {
    @include feature-targeting-mixins.targets($feat-structure) {
      content: none;
    }
  }
}

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

  @include ripple-size($size, $query: $query);

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

@mixin ripple-size($ripple-size, $query: feature-targeting-functions.all()) {
  $feat-structure: feature-targeting-functions.create-target($query, structure);
  $checkbox-padding: ($ripple-size - variables.$icon-size) / 2;

  @include feature-targeting-mixins.targets($feat-structure) {
    padding: $checkbox-padding;
  }

  .mdc-checkbox__background {
    @include feature-targeting-mixins.targets($feat-structure) {
      top: $checkbox-padding;
      left: $checkbox-padding;
    }
  }

  .mdc-checkbox__background::before {
    @include feature-targeting-mixins.targets($feat-structure) {
      top: -(variables.$border-width) - $checkbox-padding;
      left: -(variables.$border-width) - $checkbox-padding;
      width: $ripple-size;
      height: $ripple-size;
    }
  }

  @include touch-target($ripple-size, $ripple-size: $ripple-size, $query: $query);
}

///
/// Sets stroke & fill colors for both marked and unmarked state of enabled checkbox.
/// Set $generate-keyframes to false to prevent the mixin from generating @keyframes
/// @param {Color} $unmarked-stroke-color - The desired stroke color for the unmarked state
/// @param {Color} $unmarked-fill-color - The desired fill color for the unmarked state
/// @param {Color} $marked-stroke-color - The desired stroke color for the marked state
/// @param {Color} $marked-fill-color - The desired fill color for the marked state
/// @param {Boolean} $generate-keyframes [true] - Whether animation keyframes should be generated
///
@mixin container-colors(
  $unmarked-stroke-color: variables.$border-color,
  $unmarked-fill-color: transparent,
  $marked-stroke-color: variables.$baseline-theme-color,
  $marked-fill-color: variables.$baseline-theme-color,
  $generate-keyframes: true,
  $query: feature-targeting-functions.all()
) {
  $feat-animation: feature-targeting-functions.create-target($query, animation);
  $feat-color: feature-targeting-functions.create-target($query, color);

  @include if-unmarked-enabled_ {
    @include container-colors_($unmarked-stroke-color, $unmarked-fill-color, $query: $query);
  }

  @include if-marked-enabled_ {
    @include container-colors_($marked-stroke-color, $marked-fill-color, $query: $query);
  }

  @if $generate-keyframes {
    $uid: theme-functions.color-hash($unmarked-stroke-color) +
      theme-functions.color-hash($marked-stroke-color) +
      theme-functions.color-hash($unmarked-fill-color) +
      theme-functions.color-hash($marked-fill-color);

    $anim-selector: if(&, "&.mdc-checkbox--anim", ".mdc-checkbox--anim");

    @include feature-targeting-mixins.targets($feat-animation, $feat-color) {
      @include keyframes.container-keyframes_(
        $from-stroke-color: $unmarked-stroke-color,
        $to-stroke-color: $marked-stroke-color,
        $from-fill-color: $unmarked-fill-color,
        $to-fill-color: $marked-fill-color,
        $uid: #{$uid}
      );
    }

    // stylelint-disable max-nesting-depth

    #{$anim-selector} {
      &-unchecked-checked,
      &-unchecked-indeterminate {
        .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
          @include feature-targeting-mixins.targets($feat-animation) {
            animation-name: mdc-checkbox-fade-in-background-#{$uid};
          }
        }
      }

      &-checked-unchecked,
      &-indeterminate-unchecked {
        .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
          @include feature-targeting-mixins.targets($feat-animation) {
            animation-name: mdc-checkbox-fade-out-background-#{$uid};
          }
        }
      }
    }

    // stylelint-enable max-nesting-depth
  }
}

///
/// Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.
/// @param {Color} $unmarked-stroke-color - The desired stroke color for the unmarked state
/// @param {Color} $unmarked-fill-color - The desired fill color for the unmarked state
/// @param {Color} $marked-stroke-color - The desired stroke color for the marked state
/// @param {Color} $marked-fill-color - The desired fill color for the marked state
///
@mixin disabled-container-colors(
  $unmarked-stroke-color: variables.$disabled-color,
  $unmarked-fill-color: transparent,
  $marked-stroke-color: transparent,
  $marked-fill-color: variables.$disabled-color,
  $query: feature-targeting-functions.all()
) {
  @include if-unmarked-disabled_ {
    @include container-colors_($unmarked-stroke-color, $unmarked-fill-color, $query: $query);
  }

  @include if-marked-disabled_ {
    @include container-colors_($marked-stroke-color, $marked-fill-color, $query: $query);
  }
}

///
/// Sets the ink color of the checked and indeterminate icons for an enabled checkbox
/// @param {Color} $color - The desired ink color in enabled state
///
@mixin ink-color($color, $query: feature-targeting-functions.all()) {
  @include if-enabled_ {
    @include ink-color_($color, $query: $query);
  }
}

///
/// Sets the ink color of the checked and indeterminate icons for a disabled checkbox
/// @param {Color} $color - The desired ink color in disabled state
///
@mixin disabled-ink-color($color, $query: feature-targeting-functions.all()) {
  $feat-color: feature-targeting-functions.create-target($query, color);

  @include if-disabled_ {
    @include ink-color_($color, $query: $query);
  }
}

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

  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background::before,
  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background::before {
    @include feature-targeting-mixins.targets($feat-color) {
      @include theme-mixins.prop(background-color, $color);
    }
  }

  &.mdc-checkbox--selected {
    @include ripple-mixins.states($color: $color, $query: $query, $ripple-target: $ripple-target);
  }

  &.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected {
    @include ripple-mixins.states-base-color($color: $color, $query: $query, $ripple-target: $ripple-target);
  }
}

///
/// Sets checkbox touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom
/// ripple size.
///
/// @param {Number} $size Size of touch target (Native input) in `px`.
/// @param {Number} $ripple-size Size of ripple in `px`. Required only for custom ripple size.
///
@mixin touch-target(
  $size: variables.$ripple-size,
  $ripple-size: variables.$ripple-size,
  $query: feature-targeting-functions.all()) {
  $feat-structure: feature-targeting-functions.create-target($query, structure);
  $offset: ($ripple-size - $size) / 2;

  @include feature-targeting-mixins.targets($feat-structure) {
    .mdc-checkbox__native-control {
      top: $offset;
      right: $offset;
      left: $offset;
      width: $size;
      height: $size;
    }
  }
}

//
// Private
//

@mixin base_ {
  display: inline-block;
  position: relative;
  flex: 0 0 variables.$icon-size;
  box-sizing: content-box;
  width: variables.$icon-size;
  height: variables.$icon-size;
  line-height: 0;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: bottom;
}

@mixin disabled_ {
  cursor: default;
  pointer-events: none;
}

@mixin child--upgraded_ {
  // Due to the myriad of selector combos used to properly style a CSS-only checkbox, all of
  // which have varying selector precedence and make use of transitions, it is cleaner and more
  // efficient here to simply use !important, since the mdc-checkbox--anim-* classes will take
  // over from here.
  transition: none !important;
}

// Animation

@mixin anim_ {
  $mdc-checkbox-indeterminate-change-duration_: 500ms;

  // stylelint-disable selector-max-type

  &-unchecked-checked,
  &-unchecked-indeterminate,
  &-checked-unchecked,
  &-indeterminate-unchecked {
    .mdc-checkbox__background {
      animation-duration: variables.$transition-duration * 2;
      animation-timing-function: linear;
    }
  }

  &-unchecked-checked {
    .mdc-checkbox__checkmark-path {
      // Instead of delaying the animation, we simply multiply its length by 2 and begin the
      // animation at 50% in order to prevent a flash of styles applied to a checked checkmark
      // as the background is fading in before the animation begins.
      animation: mdc-checkbox-unchecked-checked-checkmark-path variables.$transition-duration * 2 linear 0s;
      transition: none;
    }
  }

  &-unchecked-indeterminate {
    .mdc-checkbox__mixedmark {
      animation: mdc-checkbox-unchecked-indeterminate-mixedmark variables.$transition-duration linear 0s;
      transition: none;
    }
  }

  &-checked-unchecked {
    .mdc-checkbox__checkmark-path {
      animation: mdc-checkbox-checked-unchecked-checkmark-path variables.$transition-duration linear 0s;
      transition: none;
    }
  }

  &-checked-indeterminate {
    .mdc-checkbox__checkmark {
      animation: mdc-checkbox-checked-indeterminate-checkmark variables.$transition-duration linear 0s;
      transition: none;
    }

    .mdc-checkbox__mixedmark {
      animation: mdc-checkbox-checked-indeterminate-mixedmark variables.$transition-duration linear 0s;
      transition: none;
    }
  }

  &-indeterminate-checked {
    .mdc-checkbox__checkmark {
      animation: mdc-checkbox-indeterminate-checked-checkmark $mdc-checkbox-indeterminate-change-duration_ linear 0s;
      transition: none;
    }

    .mdc-checkbox__mixedmark {
      animation: mdc-checkbox-indeterminate-checked-mixedmark $mdc-checkbox-indeterminate-change-duration_ linear 0s;
      transition: none;
    }
  }

  &-indeterminate-unchecked {
    .mdc-checkbox__mixedmark {
      // stylelint-disable-next-line declaration-colon-space-after
      animation:
        mdc-checkbox-indeterminate-unchecked-mixedmark $mdc-checkbox-indeterminate-change-duration_ * .6 linear 0s;
      transition: none;
    }
  }

  // stylelint-enable selector-max-type
}

// Background

///
/// Helps select the checkbox background only when its native control is in
/// enabled state.
/// @access private
///
@mixin if-enabled_ {
  .mdc-checkbox__native-control:enabled ~ {
    @content;
  }
}

///
/// Helps select the checkbox background only when its native control is in
/// disabled state.
/// @access private
///
@mixin if-disabled_ {
  .mdc-checkbox__native-control:disabled ~ {
    @content;
  }
}

///
/// Helps select the checkbox background only when its native control is in
/// unmarked & enabled state.
/// @access private
///
@mixin if-unmarked-enabled_ {
  .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ {
    @content;
  }
}

///
/// Helps select the checkbox background only when its native control is in
/// unmarked & disabled state.
/// @access private
///
@mixin if-unmarked-disabled_ {
  // Note: we must use `[disabled]` instead of `:disabled` below because Edge does not always recalculate the style
  // property when the `:disabled` pseudo-class is followed by a sibling combinator. See:
  // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/
  .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ {
    @content;
  }
}

///
/// Helps select the checkbox background only when its native control is in
/// marked & enabled state.
/// @access private
///
@mixin if-marked-enabled_ {
  .mdc-checkbox__native-control:enabled:checked,
  .mdc-checkbox__native-control:enabled:indeterminate {
    ~ {
      @content;
    }
  }
}

///
/// Helps select the checkbox background only when its native control is in
/// marked & disabled state.
/// @access private
///
@mixin if-marked-disabled_ {
  // Note: we must use `[disabled]` instead of `:disabled` below because Edge does not always recalculate the style
  // property when the `:disabled` pseudo-class is followed by a sibling combinator. See:
  // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/
  .mdc-checkbox__native-control[disabled]:checked,
  .mdc-checkbox__native-control[disabled]:indeterminate {
    ~ {
      @content;
    }
  }
}

@mixin background_($query: feature-targeting-functions.all()) {
  $feat-animation: feature-targeting-functions.create-target($query, animation);
  $feat-structure: feature-targeting-functions.create-target($query, structure);
  $feat-color: feature-targeting-functions.create-target($query, color);

  @include feature-targeting-mixins.targets($feat-structure) {
    display: inline-flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: variables.$icon-size;
    height: variables.$icon-size;
    // border-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin
    border: variables.$border-width solid currentColor;
    border-radius: 2px;
    background-color: transparent;
    pointer-events: none;
    will-change: background-color, border-color;
  }

  .mdc-checkbox__background::before {
    @include feature-targeting-mixins.targets($feat-color) {
      @include theme-mixins.prop(background-color, on-surface);
    }
  }

  @include feature-targeting-mixins.targets($feat-animation) {
    transition:
      functions.transition-exit(background-color),
      functions.transition-exit(border-color);
  }
}

@mixin background--marked_ {
  transition:
    functions.transition-enter(border-color),
    functions.transition-enter(background-color);
}

///
/// Sets the stroke & fill colors for the checkbox.
/// This mixin should be wrapped in a mixin that qualifies state such as
/// `mdc-checkbox-if-unmarked-enabled_`.
/// @access private
///
@mixin container-colors_($stroke-color, $fill-color, $query: feature-targeting-functions.all()) {
  $feat-color: feature-targeting-functions.create-target($query, color);

  .mdc-checkbox__background {
    @include feature-targeting-mixins.targets($feat-color) {
      @include theme-mixins.prop(border-color, $stroke-color);
      @include theme-mixins.prop(background-color, $fill-color);
    }
  }
}

// Focus indicator

@mixin focus-indicator_($query: feature-targeting-functions.all()) {
  $feat-animation: feature-targeting-functions.create-target($query, animation);
  $feat-structure: feature-targeting-functions.create-target($query, structure);

  @include feature-targeting-mixins.targets($feat-structure) {
    position: absolute;
    transform: scale(0, 0);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: "";
    will-change: opacity, transform;
  }

  @include feature-targeting-mixins.targets($feat-animation) {
    transition:
      functions.transition-exit(opacity),
      functions.transition-exit(transform);
  }
}

@mixin focus-indicator--focused_($query: feature-targeting-functions.all()) {
  $feat-animation: feature-targeting-functions.create-target($query, animation);
  $feat-structure: feature-targeting-functions.create-target($query, structure);

  @include feature-targeting-mixins.targets($feat-structure) {
    transform: scale(1);
    opacity: variables.$focus-indicator-opacity;
  }

  @include feature-targeting-mixins.targets($feat-animation) {
    transition:
      functions.transition-enter(opacity, 0ms, 80ms),
      functions.transition-enter(transform, 0ms, 80ms);
  }
}

// Native input

@mixin native-control_ {
  position: absolute;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: inherit;
}

// Check mark

@mixin checkmark_($query: feature-targeting-functions.all()) {
  $feat-animation: feature-targeting-functions.create-target($query, animation);
  $feat-structure: feature-targeting-functions.create-target($query, structure);

  @include feature-targeting-mixins.targets($feat-structure) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 0;
  }

  @include feature-targeting-mixins.targets($feat-animation) {
    transition: functions.transition-exit(opacity, 0ms, variables.$transition-duration * 2);
  }

  .mdc-checkbox--upgraded & {
    @include feature-targeting-mixins.targets($feat-structure) {
      opacity: 1;
    }
  }
}

@mixin checkmark--checked_($query: feature-targeting-functions.all()) {
  $feat-animation: feature-targeting-functions.create-target($query, animation);
  $feat-structure: feature-targeting-functions.create-target($query, structure);

  @include feature-targeting-mixins.targets($feat-animation) {
    transition:
      functions.transition-enter(opacity, 0ms, variables.$transition-duration * 2),
      functions.transition-enter(transform, 0ms, variables.$transition-duration * 2);
  }

  @include feature-targeting-mixins.targets($feat-structure) {
    opacity: 1;
  }
}

@mixin checkmark--indeterminate_($query: feature-targeting-functions.all()) {
  $feat-animation: feature-targeting-functions.create-target($query, animation);
  $feat-structure: feature-targeting-functions.create-target($query, structure);

  @include feature-targeting-mixins.targets($feat-structure) {
    transform: rotate(45deg);
    opacity: 0;
  }

  @include feature-targeting-mixins.targets($feat-animation) {
    transition:
      functions.transition-exit(opacity, 0ms, variables.$transition-duration),
      functions.transition-exit(transform, 0ms, variables.$transition-duration);
  }
}

///
/// Sets the ink color of the checked and indeterminate icons for a checkbox.
/// This mixin should be wrapped in a mixin that qualifies state such as
/// `mdc-checkbox-if-unmarked_`.
/// @access private
///
@mixin ink-color_($color, $query: feature-targeting-functions.all()) {
  $feat-color: feature-targeting-functions.create-target($query, color);

  .mdc-checkbox__background {
    .mdc-checkbox__checkmark {
      @include feature-targeting-mixins.targets($feat-color) {
        @include theme-mixins.prop(color, $color);
      }
    }

    .mdc-checkbox__mixedmark {
      @include feature-targeting-mixins.targets($feat-color) {
        @include theme-mixins.prop(border-color, $color);
      }
    }
  }
}

// Check mark path

@mixin checkmark-path_($query: feature-targeting-functions.all()) {
  $feat-animation: feature-targeting-functions.create-target($query, animation);
  $feat-structure: feature-targeting-functions.create-target($query, structure);

  @include feature-targeting-mixins.targets($feat-animation) {
    transition: functions.transition-exit(stroke-dashoffset, 0ms, variables.$transition-duration * 2);
  }

  @include feature-targeting-mixins.targets($feat-structure) {
    stroke: currentColor;
    stroke-width: variables.$mark-stroke-size * 1.3;
    stroke-dashoffset: variables.$mark-path-length_;
    stroke-dasharray: variables.$mark-path-length_;
  }
}

@mixin checkmark-path--marked_ {
  stroke-dashoffset: 0;
}

// Mixed mark

@mixin mixedmark_($query: feature-targeting-functions.all()) {
  $feat-animation: feature-targeting-functions.create-target($query, animation);
  $feat-structure: feature-targeting-functions.create-target($query, structure);

  @include feature-targeting-mixins.targets($feat-structure) {
    width: 100%;
    height: 0;
    transform: scaleX(0) rotate(0deg);
    border-width: math.floor(variables.$mark-stroke-size) / 2;
    border-style: solid;
    opacity: 0;
  }

  @include feature-targeting-mixins.targets($feat-animation) {
    transition:
      functions.transition-exit(opacity),
      functions.transition-exit(transform);
  }
}

@mixin mixedmark--checked_ {
  transform: scaleX(1) rotate(-45deg);
}

@mixin mixedmark--indeterminate_ {
  transform: scaleX(1) rotate(0deg);
  opacity: 1;
}

///
/// 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 touch-target-reset_($query: feature-targeting-functions.all()) {
  $feat-structure: feature-targeting-functions.create-target($query, structure);

  @include feature-targeting-mixins.targets($feat-structure) {
    margin: 0;
  }
}