@function mdc-checkbox-transition($property, $timing-function, $delay: 0ms, $duration: $mdc-checkbox-transition-duration) {
  @return $property $duration $timing-function $delay;
}

@function mdc-checkbox-transition-enter($property, $delay: 0ms, $duration: $mdc-checkbox-transition-duration) {
  @return mdc-animation-enter($property, $duration, $delay);
}

@function mdc-checkbox-transition-exit($property, $delay: 0ms, $duration: $mdc-checkbox-transition-duration) {
  @return mdc-animation-exit($property, $duration, $delay);
}

@mixin mdc-checkbox-cover-element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@mixin mdc-checkbox-outer-box {
  @include mdc-checkbox-cover-element;

  top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
  left: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
  border-radius: 2px;
  box-sizing: border-box;
  pointer-events: none;
}

// postcss-bem-linter: define checkbox
.mdc-checkbox {
  display: inline-block;
  position: relative;
  box-sizing: content-box;
  width: $mdc-checkbox-size;
  height: $mdc-checkbox-size;
  padding: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
  line-height: 0;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: bottom;

  &__background {
    @include mdc-checkbox-outer-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: $mdc-checkbox-ui-pct;
    height: $mdc-checkbox-ui-pct;
    box-sizing: border-box;
    transition:
      mdc-checkbox-transition-exit(background-color),
      mdc-checkbox-transition-exit(border-color);
    border: $mdc-checkbox-border-width solid $mdc-checkbox-border-color;
    background-color: transparent;
    will-change: background-color, border-color;

    @include mdc-theme-dark(".mdc-checkbox") {
      border-color: $mdc-checkbox-border-color-dark;
    }

    // The frame's ::before element is used as a focus indicator for the checkbox
    &::before {
      @include mdc-checkbox-cover-element;

      width: 100%;
      height: 100%;
      transform: scale(0, 0);
      transition: mdc-checkbox-transition-exit(opacity), mdc-checkbox-transition-exit(transform);
      border-radius: 50%;
      content: "";
      opacity: 0;
      pointer-events: none;
      will-change: opacity, transform;

      @include mdc-theme-prop(background, primary);
    }
  }

  &__native-control {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: inherit;
    opacity: 0;
  }

  &__checkmark {
    @include mdc-checkbox-cover-element;

    width: 100%;
    transition: mdc-checkbox-transition-exit(opacity, 0ms, $mdc-checkbox-transition-duration * 2);
    opacity: 0;
    fill: $mdc-checkbox-mark-color;

    &__path {
      transition:
        mdc-checkbox-transition-exit(
          stroke-dashoffset,
          0ms,
          $mdc-checkbox-transition-duration * 2
        );
      // !important is needed here because a stroke must be set as an attribute on the SVG in order
      // for line animation to work properly.
      stroke: $mdc-checkbox-mark-color !important;
      stroke-width: $mdc-checkbox-mark-stroke-size * 1.3;
      stroke-dashoffset: $_mdc-checkbox-mark-path-length;
      stroke-dasharray: $_mdc-checkbox-mark-path-length;
    }
  }

  &__mixedmark {
    width: 100%;
    height: floor($mdc-checkbox-mark-stroke-size);
    transform: scaleX(0) rotate(0deg);
    transition: mdc-checkbox-transition-exit(opacity), mdc-checkbox-transition-exit(transform);
    background-color: $mdc-checkbox-mark-color;
    opacity: 0;
  }
}

.mdc-checkbox__native-control:focus {
  ~ .mdc-checkbox__background::before {
    transform: scale(2.75, 2.75);
    transition:
      mdc-checkbox-transition-enter(opacity, 0ms, 80ms),
      mdc-checkbox-transition-enter(transform, 0ms, 80ms);
    opacity: .26;
  }
}

.mdc-checkbox__native-control:checked {
  ~ .mdc-checkbox__background {
    transition:
      mdc-checkbox-transition-enter(border-color),
      mdc-checkbox-transition-enter(background-color);

    @include mdc-theme-prop(border-color, primary);
    @include mdc-theme-prop(background-color, primary);

    .mdc-checkbox__checkmark {
      transition:
        mdc-checkbox-transition-enter(opacity, 0ms, $mdc-checkbox-transition-duration * 2),
        mdc-checkbox-transition-enter(transform, 0ms, $mdc-checkbox-transition-duration * 2);
      opacity: 1;

      &__path {
        stroke-dashoffset: 0;
      }
    }

    .mdc-checkbox__mixedmark {
      transform: scaleX(1) rotate(-45deg);
    }
  }
}

.mdc-checkbox__native-control:indeterminate {
  ~ .mdc-checkbox__background {
    @include mdc-theme-prop(border-color, primary);
    @include mdc-theme-prop(background-color, primary);

    .mdc-checkbox__checkmark {
      transform: rotate(45deg);
      transition:
        mdc-checkbox-transition-exit(opacity, 0ms, $mdc-checkbox-transition-duration),
        mdc-checkbox-transition-exit(transform, 0ms, $mdc-checkbox-transition-duration);
      opacity: 0;

      &__path {
        stroke-dashoffset: 0;
      }
    }

    .mdc-checkbox__mixedmark {
      transform: scaleX(1) rotate(0deg);
      opacity: 1;
    }
  }
}

.mdc-checkbox__native-control:disabled,
fieldset:disabled .mdc-checkbox__native-control,
[aria-disabled="true"] .mdc-checkbox__native-control {
  cursor: default;

  // postcss-bem-linter: ignore
  ~ .mdc-checkbox__background {
    border-color: $mdc-checkbox-disabled-color;

    @include mdc-theme-dark(".mdc-checkbox") {
      border-color: $mdc-checkbox-disabled-color-dark;
    }
  }

  &:checked,
  &:indeterminate {
    ~ .mdc-checkbox__background {
      border-color: transparent;
      background-color: $mdc-checkbox-disabled-color;
      // stylelint-disable selector-max-compound-selectors, selector-max-specificity
      @include mdc-theme-dark(".mdc-checkbox") {
        background-color: $mdc-checkbox-disabled-color-dark;
      }
      // stylelint-enable selector-max-compound-selectors, selector-max-specificity
    }
  }
}

.mdc-checkbox--upgraded {
  .mdc-checkbox__background,
  .mdc-checkbox__checkmark,
  .mdc-checkbox__checkmark__path,
  .mdc-checkbox__mixedmark {
    // 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;
  }
}

.mdc-checkbox--anim {
  $_mdc-checkbox-indeterminate-change-duration: 500ms;

  &-unchecked-checked,
  &-unchecked-indeterminate {
    .mdc-checkbox__background {
      animation: mdc-checkbox-fade-in-background $mdc-checkbox-transition-duration * 2 linear;

      @include mdc-theme-dark(".mdc-checkbox") {
        animation-name: mdc-checkbox-fade-in-background-dark;
      }
    }
  }

  &-checked-unchecked,
  &-indeterminate-unchecked {
    .mdc-checkbox__background {
      animation: mdc-checkbox-fade-out-background $mdc-checkbox-transition-duration * 2 linear;

      @include mdc-theme-dark(".mdc-checkbox") {
        animation-name: mdc-checkbox-fade-out-background-dark;
      }
    }
  }

  &-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-transition-duration * 2 linear 0s mdc-checkbox-unchecked-checked-checkmark-path;
      transition: none;
    }
  }

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

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

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

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

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

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

  &-indeterminate-unchecked {
    .mdc-checkbox__mixedmark {
      animation: $_mdc-checkbox-indeterminate-change-duration * .6 linear 0s mdc-checkbox-indeterminate-unchecked-mixedmark;
      transition: none;
    }
  }
}
// postcss-bem-linter: end

.mdc-checkbox.mdc-ripple-upgraded {
  @include mdc-ripple-base;
  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));

  .mdc-checkbox__background::before {
    content: none;
  }
}