//
// 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/rtl/mixins";
@import "./functions";
@import "./keyframes";
@import "./variables";

//
// Public
//

@mixin mdc-checkbox-container-colors(
  $unmarked-stroke-color: $mdc-checkbox-border-color,
  $unmarked-fill-color: transparent,
  $marked-fill-color: $mdc-checkbox-baseline-theme-color,
  $generate-keyframes: true) {
  @include mdc-checkbox-unmarked-background-selector-enabled_ {
    @include mdc-theme-prop(border-color, $unmarked-stroke-color);
    @include mdc-theme-prop(background-color, $unmarked-fill-color);
  }

  @include mdc-checkbox-marked-background-selector-enabled_ {
    @include mdc-theme-prop(border-color, $marked-fill-color);
    @include mdc-theme-prop(background-color, $marked-fill-color);
  }

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

    @include mdc-checkbox-container-keyframes_(
      $from-stroke-color: $unmarked-stroke-color,
      $to-stroke-color: $marked-fill-color,
      $from-fill-color: $unmarked-fill-color,
      $to-fill-color: $marked-fill-color,
      $uid: $uid);

    #{$anim-selector} {
      &-unchecked-checked,
      &-unchecked-indeterminate {
        .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
          animation-name: mdc-checkbox-fade-in-background-#{$uid};
        }
      }

      &-checked-unchecked,
      &-indeterminate-unchecked {
        .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
          animation-name: mdc-checkbox-fade-out-background-#{$uid};
        }
      }
    }
  }
}

@mixin mdc-checkbox-ink-color($color) {
  .mdc-checkbox__checkmark {
    @include mdc-theme-prop(color, $color);
  }

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

@mixin mdc-checkbox-focus-indicator-color($color) {
  // The ::before element is used as a focus indicator for the checkbox
  .mdc-checkbox__background::before {
    @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
  }
}

//
// Private
//

@mixin mdc-checkbox-base_ {
  display: inline-block;
  position: relative;
  flex: 0 0 $mdc-checkbox-size;
  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;
}

@mixin mdc-checkbox-disabled-container-color_ {
  @include mdc-checkbox-unmarked-background-selector-disabled_ {
    @include mdc-theme-prop(border-color, $mdc-checkbox-disabled-color);
  }

  @include mdc-checkbox-marked-background-selector-disabled_ {
    @include mdc-theme-prop(border-color, transparent);
    @include mdc-theme-prop(background-color, $mdc-checkbox-disabled-color);
  }
}

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

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

@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-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;
    }
  }

  // stylelint-enable selector-max-type
}

// Background

@mixin mdc-checkbox-unmarked-background-selector-enabled_ {
  // stylelint-disable-next-line selector-max-specificity
  .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
    @content;
  }
}

@mixin mdc-checkbox-unmarked-background-selector-disabled_ {
  // stylelint-disable-next-line selector-max-specificity
  .mdc-checkbox__native-control:disabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
    @content;
  }
}

@mixin mdc-checkbox-marked-background-selector-enabled_ {
  .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
  .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
    @content;
  }
}

@mixin mdc-checkbox-marked-background-selector-disabled_ {
  .mdc-checkbox__native-control:disabled:checked ~ .mdc-checkbox__background,
  .mdc-checkbox__native-control:disabled:indeterminate ~ .mdc-checkbox__background {
    @content;
  }
}

@mixin mdc-checkbox__background_ {
  @include mdc-rtl-reflexive-position(
    left, ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2, ".mdc-checkbox");

  display: inline-flex;
  position: absolute;
  top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
  bottom: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: $mdc-checkbox-ui-pct;
  height: $mdc-checkbox-ui-pct;
  transition:
    mdc-checkbox-transition-exit(background-color),
    mdc-checkbox-transition-exit(border-color);
  // 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;
}

@mixin mdc-checkbox__background--marked_ {
  transition:
    mdc-checkbox-transition-enter(border-color),
    mdc-checkbox-transition-enter(background-color);
}

// Focus indicator

@mixin mdc-checkbox__focus-indicator_ {
  @include mdc-checkbox__child--cover-parent_;

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

@mixin mdc-checkbox__focus-indicator--focused_ {
  transform: scale(2.75, 2.75);
  transition:
    mdc-checkbox-transition-enter(opacity, 0ms, 80ms),
    mdc-checkbox-transition-enter(transform, 0ms, 80ms);
  opacity: $mdc-checkbox-focus-indicator-opacity;
}

@mixin mdc-checkbox__focus-indicator--ripple-upgraded-unbounded_ {
  content: none;
}

// Native input

@mixin mdc-checkbox__native-control_ {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: inherit;
}

// Check mark

@mixin mdc-checkbox__checkmark_ {
  @include mdc-checkbox__child--cover-parent_;

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

  .mdc-checkbox--upgraded & {
    opacity: 1;
  }
}

@mixin mdc-checkbox__checkmark--checked_ {
  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;
}

@mixin mdc-checkbox__checkmark--indeterminate_ {
  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;
}

// Check mark path

@mixin mdc-checkbox__checkmark-path_ {
  transition:
    mdc-checkbox-transition-exit(
      stroke-dashoffset,
      0ms,
      $mdc-checkbox-transition-duration * 2
    );
  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_ {
  width: 100%;
  height: 0;
  transform: scaleX(0) rotate(0deg);
  transition: mdc-checkbox-transition-exit(opacity), mdc-checkbox-transition-exit(transform);
  border-width: floor($mdc-checkbox-mark-stroke-size) / 2;
  border-style: solid;
  opacity: 0;
}

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

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