@import '../colors';
@import '../mixins';

$checkbox-size: 20px;
$ripple-padding: 12px;
$checkbox-margin: 12px;
$checkbox-border-radius: 2px;
$checkbox-transition-time-bg: 100ms;
$checkbox-icon-width: 18px;

.tix-check.v4 {
  display: inline-block;
  position: relative;
  padding: 0;
  min-height: $checkbox-size;
  min-width: $checkbox-size;
  box-sizing: content-box;
  cursor: pointer;

  // Add margin if has sibling
  & + .tix-check.v4,
  &:not(:nth-last-of-type(1)) {
    margin: $checkbox-margin;
  }

  &.disabled {
    cursor: not-allowed;
  }

  &.block {
    display: block;
  }

  .tc-box {
    height: $checkbox-size;
    width: $checkbox-size;
    position: absolute;
    left: $ripple-padding;

    @at-root {
      .has-label.label-right#{&} {
        left: auto;
        right: 0;
      }
    }
  }

  .tc-checkbox {
    position: absolute;
    left: -#{$ripple-padding};
    top: -#{$ripple-padding};
    height: #{$checkbox-size + (2 * $ripple-padding)};
    width: #{$checkbox-size + (2 * $ripple-padding)};

    @at-root {
      .label-right#{&} {
        left: auto;
        right: 0;
      }
    }

    input[type='checkbox'] {
      margin: 0;
      opacity: 0;
      z-index: 2;
      left: 0;
      height: #{$checkbox-size + (2 * $ripple-padding)};
      width: #{$checkbox-size + (2 * $ripple-padding)};
      cursor: pointer;

      @at-root {
        .disabled#{&} {
          cursor: not-allowed;
        }
      }

      + .tc-icon {
        position: absolute;
        left: $ripple-padding;
        top: $ripple-padding;
        width: $checkbox-size;
        height: $checkbox-size;
        display: block;
        border-radius: $checkbox-border-radius;

        &::before {
          content: '';
          display: block;
          position: absolute;
          left: $checkbox-size/2;
          top: 50%;
          width: 0;
          height: 0;
          border-radius: 50%;
          transform: translate(-50%, -50%);
          opacity: 0;
          background-color: $color-B400;

          @at-root {
            .danger#{&} {
              background-color: $color-R400;
            }
          }
        }

        &::after {
          content: '';
          display: block;
          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          top: 0;
          border: solid 1px $color-N400;
          border-radius: $checkbox-border-radius;

          @at-root {
            .disabled#{&} {
              background-color: $color-N100;
              border-color: $color-N400;
            }
            .danger#{&} {
              border-color: $color-R400;
            }
          }
        }

        i {
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          height: $checkbox-size;
          width: 0;
          overflow: hidden;

          svg {
            position: relative;
            z-index: 1;
            width: $checkbox-icon-width;
            height: auto;
            margin-left: #{($checkbox-size - $checkbox-icon-width) / 2};
            transform: scale(0);

            g {
              @at-root {
                .disabled#{&} {
                  fill: $color-N400;
                }
              }
            }
          }
        }
      }

      &:checked {
        + .tc-icon {
          &::before {
            transition: width $checkbox-transition-time-bg ease,
              height $checkbox-transition-time-bg ease,
              border-radius $checkbox-transition-time-bg ease,
              opacity 500ms ease;
            opacity: 1;
            height: $checkbox-size;
            width: $checkbox-size;
            border-radius: $checkbox-border-radius;

            @at-root {
              .disabled#{&} {
                display: none;
              }
            }
          }

          &::after {
            border: solid 1px $color-B400;
            @at-root {
              .disabled#{&} {
                border: solid 1px $color-N400;
                background-color: $color-N400;
              }
            }
          }

          i {
            transition: width 1000ms cubic-bezier(0.15, 0.9, 0.43, 0.99);
            transition-delay: 100ms;
            width: $checkbox-size;

            svg {
              animation: check-bounce 1000ms linear both;
              animation-delay: 100ms;
            }
          }
        }
      }
    }
  }

  label {
    display: block;
    cursor: pointer;

    @at-root {
      .disabled#{&} {
        cursor: not-allowed;
      }

      .label-left#{&} {
        padding-left: #{$checkbox-size + $ripple-padding};
      }

      .label-right#{&} {
        padding-right: #{$checkbox-size + $ripple-padding};
      }
    }
  }
}

@keyframes check-bounce {
  0% {
    transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  4.7% {
    transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  9.41% {
    transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  14.11% {
    transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  18.72% {
    transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  24.32% {
    transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  29.93% {
    transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  35.54% {
    transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  41.04% {
    transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  52.15% {
    transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  63.26% {
    transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  85.49% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}