// Copyright (C) 2023 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import "../theme";

// This checkbox element is expected to contain a checkbox type input followed
// by an empty span element.
// The input is completely hidden and an entirely new checkbox is drawn inside
// the span element. This allows us to style it how we like, and also add some
// fancy transitions.
// The box of the checkbox is a fixed sized span element. The tick is also a
// fixed sized rectange rotated 45 degrees with only the bottom and right
// borders visible.
// When unchecked, the tick size and border width is 0, so the tick is
// completely invsible. When we transition to checked, the border size on the
// bottom and right sides is immmdiately set to full width, and the tick morphs
// into view first by expanding along the x axis first, then expanding up the
// y-axis. This has the effect of making the tick look like it's being drawn
// onto the page with a pen.
// When transitioning from checked to unchecked, the animation plays in reverse,
// and the border width is set to 0 right at the end in order to make the tick
// completely invisible again.

$box-label-padding: 0.33em;

.pf-checkbox {
  $tick-anim-time-width: 100ms;
  $tick-anim-time-height: 150ms;
  $tick-anim-time: $tick-anim-time-width + $tick-anim-time-height;
  $tick-easing: linear;

  $tick-height: 0.55em;
  $tick-width: 0.3em;

  display: inline;
  align-items: baseline;
  position: relative; // Turns this container into a positioned element
  user-select: none;
  cursor: pointer;

  // Hide the default checkbox
  input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  &__box {
    display: inline-block;
    position: relative; // Align ::after to this box
    top: -0.1em;
    vertical-align: middle;
    height: 1em;
    transition: background $anim-timing;

    &:after {
      content: "";
      position: absolute;
    }
  }

  input:focus-visible + .pf-checkbox__box {
    @include focus;
  }

  &.pf-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

  &__label {
    padding-left: $box-label-padding;
  }

  &__label-left {
    padding-right: $box-label-padding;
  }

  // 'Check' style checkbox

  &__box--check {
    aspect-ratio: 1;
    border-radius: $border-radius;
    border: solid 2px currentColor;
    background: none;

    // The :after element forms the "tick" of the checkbox
    &:after {
      bottom: 0.4em;
      left: 0em;
      width: 0px;
      height: 0px;
      border-color: var(--pf-color-text-on-primary);
      border-style: solid;
      border-width: 0;
      transform-origin: 0% 100%; // Put the origin at the short edge of the tick
      transform: rotate(45deg);
      transition:
        height $tick-anim-time-height $tick-easing,
        width $tick-anim-time-width $tick-anim-time-height $tick-easing,
        border-width 0ms $tick-anim-time;
    }
  }

  &:hover .pf-checkbox__box--check {
    background: color_hover(transparent);
  }

  input:checked + .pf-checkbox__box--check {
    border-color: var(--pf-color-primary);
    background: var(--pf-color-primary);
  }

  input:checked + .pf-checkbox__box--check:after {
    width: $tick-width;
    height: $tick-height;
    border-width: 0 0.15em 0.15em 0;
    transition:
      width $tick-anim-time-height $tick-easing,
      height $tick-anim-time-height $tick-anim-time-width $tick-easing,
      border-width 0ms;
  }

  // 'Switch' style checkbox

  &__box--switch {
    height: 16px;
    width: 30px;
    border-radius: 1em; // Pill shape
    background: var(--pf-color-border);
    vertical-align: middle;

    // The :after element forms the "thumb" of the switch
    &:after {
      content: "";
      display: block;
      position: absolute;
      left: 2px;
      top: 0;
      bottom: 0;
      margin-top: auto;
      margin-bottom: auto;
      width: 12px;
      height: 12px;
      background: white;
      box-sizing: border-box;
      border-radius: 50%;
      transition: left $anim-timing;
    }
  }

  input:checked + .pf-checkbox__box--switch {
    background: var(--pf-color-primary);
  }

  input:checked + .pf-checkbox__box--switch:after {
    left: 16px;
  }
}
