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

@import "@material/animation/functions";
@import "@material/density/functions";
@import "@material/feature-targeting/functions";
@import "@material/feature-targeting/mixins";
@import "@material/ripple/mixins";
@import "@material/touch-target/mixins";
@import "./functions";
@import "./keyframes";
@import "./variables";

//
// Public
//

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

@mixin mdc-checkbox-core-styles($query: mdc-feature-all()) {
  @include mdc-checkbox-without-ripple($query);
  @include mdc-checkbox-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 mdc-checkbox-without-ripple($query: mdc-feature-all()) {
  // postcss-bem-linter: define checkbox

  $feat-animation: mdc-feature-create-target($query, animation);
  $feat-color: mdc-feature-create-target($query, color);
  $feat-structure: mdc-feature-create-target($query, structure);

  @include mdc-touch-target-wrapper($query);

  @include mdc-feature-targets($feat-animation) {
    @include mdc-checkbox-mark-keyframes_;
  }

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

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

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

  @media screen and (-ms-high-contrast: active) {
    .mdc-checkbox__mixedmark {
      @include mdc-feature-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 mdc-feature-targets($feat-structure) {
      @include mdc-checkbox--disabled_;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

    &:disabled {
      @include mdc-feature-targets($feat-structure) {
        @include mdc-checkbox--disabled_;
      }
    }
  }

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

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

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

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

    .mdc-checkbox__mixedmark {
      @include mdc-feature-targets($feat-structure) {
        @include mdc-checkbox__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 mdc-checkbox-ripple($query: mdc-feature-all()) {
  $feat-structure: mdc-feature-create-target($query, structure);

  @include mdc-ripple-common($query);

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

  #{$mdc-checkbox-ripple-target} {
    @include mdc-ripple-target-common($query: $query);
  }

  .mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {
    @include mdc-feature-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 mdc-checkbox-density($density-scale, $query: mdc-feature-all()) {
  $size: mdc-density-prop-value(
    $density-config: $mdc-checkbox-density-config,
    $density-scale: $density-scale,
    $property-name: size,
  );

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

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

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

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

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

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

  @include mdc-checkbox-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 mdc-checkbox-container-colors(
  $unmarked-stroke-color: $mdc-checkbox-border-color,
  $unmarked-fill-color: transparent,
  $marked-stroke-color: $mdc-checkbox-baseline-theme-color,
  $marked-fill-color: $mdc-checkbox-baseline-theme-color,
  $generate-keyframes: true,
  $query: mdc-feature-all()
) {
  $feat-animation: mdc-feature-create-target($query, animation);
  $feat-color: mdc-feature-create-target($query, color);

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

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

  @if $generate-keyframes {
    $uid: unique-id();
    $anim-selector: if(&, "&.mdc-checkbox--anim", ".mdc-checkbox--anim");

    @include mdc-feature-targets($feat-animation, $feat-color) {
      @include mdc-checkbox-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 mdc-feature-targets($feat-animation) {
            animation-name: mdc-checkbox-fade-in-background-#{$uid};
          }
        }
      }

      &-checked-unchecked,
      &-indeterminate-unchecked {
        .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
          @include mdc-feature-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 mdc-checkbox-disabled-container-colors(
  $unmarked-stroke-color: $mdc-checkbox-disabled-color,
  $unmarked-fill-color: transparent,
  $marked-stroke-color: transparent,
  $marked-fill-color: $mdc-checkbox-disabled-color,
  $query: mdc-feature-all()
) {
  @include mdc-checkbox-if-unmarked-disabled_ {
    @include mdc-checkbox-container-colors_($unmarked-stroke-color, $unmarked-fill-color, $query: $query);
  }

  @include mdc-checkbox-if-marked-disabled_ {
    @include mdc-checkbox-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 mdc-checkbox-ink-color($color, $query: mdc-feature-all()) {
  @include mdc-checkbox-if-enabled_ {
    @include mdc-checkbox-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 mdc-checkbox-disabled-ink-color($color, $query: mdc-feature-all()) {
  $feat-color: mdc-feature-create-target($query, color);

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

@mixin mdc-checkbox-focus-indicator-color($color, $query: mdc-feature-all()) {
  $feat-color: mdc-feature-create-target($query, color);

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

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

  &.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected {
    @include mdc-states-base-color($color: $color, $query: $query, $ripple-target: $mdc-checkbox-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 mdc-checkbox-touch-target(
  $size: $mdc-checkbox-ripple-size,
  $ripple-size: $mdc-checkbox-ripple-size,
  $query: mdc-feature-all()) {
  $feat-structure: mdc-feature-create-target($query, structure);
  $offset: ($ripple-size - $size) / 2;

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

//
// Private
//

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

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

@mixin mdc-checkbox__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 mdc-checkbox--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: $mdc-checkbox-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 $mdc-checkbox-transition-duration * 2 linear 0s;
      transition: none;
    }
  }

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

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

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

    .mdc-checkbox__mixedmark {
      animation: mdc-checkbox-checked-indeterminate-mixedmark $mdc-checkbox-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 mdc-checkbox-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 mdc-checkbox-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 mdc-checkbox-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 mdc-checkbox-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 mdc-checkbox-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 mdc-checkbox-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 mdc-checkbox__background_($query: mdc-feature-all()) {
  $feat-animation: mdc-feature-create-target($query, animation);
  $feat-structure: mdc-feature-create-target($query, structure);
  $feat-color: mdc-feature-create-target($query, color);

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

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

  @include mdc-feature-targets($feat-animation) {
    transition:
      mdc-checkbox-transition-exit(background-color),
      mdc-checkbox-transition-exit(border-color);
  }
}

@mixin mdc-checkbox__background--marked_ {
  transition:
    mdc-checkbox-transition-enter(border-color),
    mdc-checkbox-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 mdc-checkbox-container-colors_($stroke-color, $fill-color, $query: mdc-feature-all()) {
  $feat-color: mdc-feature-create-target($query, color);

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

// Focus indicator

@mixin mdc-checkbox__focus-indicator_($query: mdc-feature-all()) {
  $feat-animation: mdc-feature-create-target($query, animation);
  $feat-structure: mdc-feature-create-target($query, structure);

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

  @include mdc-feature-targets($feat-animation) {
    transition:
      mdc-checkbox-transition-exit(opacity),
      mdc-checkbox-transition-exit(transform);
  }
}

@mixin mdc-checkbox__focus-indicator--focused_($query: mdc-feature-all()) {
  $feat-animation: mdc-feature-create-target($query, animation);
  $feat-structure: mdc-feature-create-target($query, structure);

  @include mdc-feature-targets($feat-structure) {
    transform: scale(1);
    opacity: $mdc-checkbox-focus-indicator-opacity;
  }

  @include mdc-feature-targets($feat-animation) {
    transition:
      mdc-checkbox-transition-enter(opacity, 0ms, 80ms),
      mdc-checkbox-transition-enter(transform, 0ms, 80ms);
  }
}

// Native input

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

// Check mark

@mixin mdc-checkbox__checkmark_($query: mdc-feature-all()) {
  $feat-animation: mdc-feature-create-target($query, animation);
  $feat-structure: mdc-feature-create-target($query, structure);

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

  @include mdc-feature-targets($feat-animation) {
    transition: mdc-checkbox-transition-exit(opacity, 0ms, $mdc-checkbox-transition-duration * 2);
  }

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

@mixin mdc-checkbox__checkmark--checked_($query: mdc-feature-all()) {
  $feat-animation: mdc-feature-create-target($query, animation);
  $feat-structure: mdc-feature-create-target($query, structure);

  @include mdc-feature-targets($feat-animation) {
    transition:
      mdc-checkbox-transition-enter(opacity, 0ms, $mdc-checkbox-transition-duration * 2),
      mdc-checkbox-transition-enter(transform, 0ms, $mdc-checkbox-transition-duration * 2);
  }

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

@mixin mdc-checkbox__checkmark--indeterminate_($query: mdc-feature-all()) {
  $feat-animation: mdc-feature-create-target($query, animation);
  $feat-structure: mdc-feature-create-target($query, structure);

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

  @include mdc-feature-targets($feat-animation) {
    transition:
      mdc-checkbox-transition-exit(opacity, 0ms, $mdc-checkbox-transition-duration),
      mdc-checkbox-transition-exit(transform, 0ms, $mdc-checkbox-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 mdc-checkbox-ink-color_($color, $query: mdc-feature-all()) {
  $feat-color: mdc-feature-create-target($query, color);

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

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

// Check mark path

@mixin mdc-checkbox__checkmark-path_($query: mdc-feature-all()) {
  $feat-animation: mdc-feature-create-target($query, animation);
  $feat-structure: mdc-feature-create-target($query, structure);

  @include mdc-feature-targets($feat-animation) {
    transition: mdc-checkbox-transition-exit(stroke-dashoffset, 0ms, $mdc-checkbox-transition-duration * 2);
  }

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

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

// Mixed mark

@mixin mdc-checkbox__mixedmark_($query: mdc-feature-all()) {
  $feat-animation: mdc-feature-create-target($query, animation);
  $feat-structure: mdc-feature-create-target($query, structure);

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

  @include mdc-feature-targets($feat-animation) {
    transition:
      mdc-checkbox-transition-exit(opacity),
      mdc-checkbox-transition-exit(transform);
  }
}

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

@mixin mdc-checkbox__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 mdc-checkbox-touch-target-reset_($query: mdc-feature-all()) {
  $feat-structure: mdc-feature-create-target($query, structure);

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