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

$radio-size: 20px;
$ripple-padding: 12px;
$radio-margin: 12px;
$radio-transition-time-bg: 100ms;
$radio-border-width: 1px;
$radio-icon-width: $radio-size - (2 * $radio-border-width);

.tix-radio.v4 {
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  position: relative;
  padding: 0;
  min-height: $radio-size;
  min-width: $radio-size;
  box-sizing: content-box;
  cursor: pointer;

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

  &.disabled {
    cursor: not-allowed;
  }

  &.block {
    display: block;
  }

  .tc-box {
    height: $radio-size;
    width: $radio-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: #{$radio-size + (2 * $ripple-padding)};
    width: #{$radio-size + (2 * $ripple-padding)};

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

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

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

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

        &::before {
          content: '';
          display: block;
          position: absolute;
          width: $radio-icon-width;
          height: $radio-icon-width;
          border-radius: 50%;
          background-color: $color-N0;
          transform-origin: 50% 50%;
          left: $radio-border-width;
          top: $radio-border-width;
          z-index: 1;

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

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

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

      &:checked {
        + .tc-icon {
          &::before {
            animation: radio-bounce 1000ms linear both;
            transform: scale(0.5);
          }

          &::after {
            background-color: $color-B400;

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

          &::after {
            border-color: $color-B400;

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

  label {
    display: block;
    cursor: pointer;

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

    @at-root {
      .has-label.label-left#{&} {
        padding-left: #{$ripple-padding + $radio-size};
      }
      .has-label.label-right#{&} {
        padding-right: #{$ripple-padding + $radio-size};
      }
    }
  }
}

@keyframes radio-bounce {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    transform: matrix3d(0.797, 0, 0, 0, 0, 0.797, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.81% {
    transform: matrix3d(0.554, 0, 0, 0, 0, 0.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.21% {
    transform: matrix3d(0.387, 0, 0, 0, 0, 0.387, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.61% {
    transform: matrix3d(0.334, 0, 0, 0, 0, 0.334, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  17.52% {
    transform: matrix3d(0.38, 0, 0, 0, 0, 0.38, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  21.32% {
    transform: matrix3d(0.465, 0, 0, 0, 0, 0.465, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  25.23% {
    transform: matrix3d(0.531, 0, 0, 0, 0, 0.531, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.03% {
    transform: matrix3d(0.552, 0, 0, 0, 0, 0.552, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  36.74% {
    transform: matrix3d(0.511, 0, 0, 0, 0, 0.511, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  44.44% {
    transform: matrix3d(0.484, 0, 0, 0, 0, 0.484, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  59.86% {
    transform: matrix3d(0.505, 0, 0, 0, 0, 0.505, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  75.28% {
    transform: matrix3d(0.498, 0, 0, 0, 0, 0.498, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  90.69% {
    transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}