$icon-check: url('data:image/svg+xml;base64, PHN2ZyBpZD0iY2hlY2siIGNsYXNzPSJtYXJrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yNSAtMjUgNTAgNTAiIHdpZHRoPSI1MCI+CiAgPHBhdGggY2xhc3M9ImNoZWNrbWFya19fY2hlY2siIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iNnB4IiBkPSJNLTE1IDAgLTQgMTAgMTIgLTkiLz4KPC9zdmc+');

$icon-dash: url('data:image/svg+xml;base64, PHN2ZyBpZD0iaHlwaGVuIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yNSAtMjUgNTAgNTAiIHdpZHRoPSI1MCI+CiAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI2cHgiIGQ9Ik0gLTE1IDAgMTUgMCIvPgo8L3N2Zz4=');

// these are mixins because placeholders can't be used in keyframes
@mixin empty() {
  width: 1rem;
  height: 1rem;
  opacity: 0;
  background-image: none;
}

@mixin fill($icon: $icon-check) {
  opacity: 1;
  border: none;
  background-image: $icon;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  transform: scale(1);
}

@mixin animate-fill($icon) {

  $checkbox-animation: unique-id();
  animation: $checkbox-animation 300ms forwards ease-out;

  @keyframes #{$checkbox-animation} {
    0% { @include empty(); }
    60% {
      opacity: 0.3;
      transform: scale(2.0);
    }
    100% { @include fill($icon); }
  }

}

%nio-checkbox {
  display: inline-block;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  color: $palette-black;
}

%nio-checkbox__input {
  display: none;
}

%nio-checkbox__label {
  display: inline-block;
  position: relative;
  margin-left: 1.5rem;
  padding-left: 1.3rem;
  font-size: $font-size-medium;

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: -6px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px $palette-dark;
    cursor: pointer;
  }

  &:hover {
    &::before {
      box-shadow: 0 0 0 1px $palette-primary;
    }
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: -6px;
    width: 1rem;
    height: 1rem;
    opacity: 0;
    border-radius: 100%;
    transform: scale(0);
  }

}

%nio-checkbox__label--checked {
  @extend %nio-checkbox__label;

  &:hover {
    &::before {
      box-shadow: 0 0 0 2px $palette-primary;
    }
  }

  &::before {
    box-shadow: 0 0 0 2px $palette-primary;
  }

  &::after {
    @include animate-fill($icon-check);
    background-color: $palette-primary;
    cursor: pointer;
  }

}

%nio-checkbox__label--mixed {
  @extend %nio-checkbox__label--checked;

  &::after {
    @include animate-fill($icon-dash);
    background-color: $palette-primary;
    cursor: pointer;
  }
}

%nio-checkbox__label--disabled {
  @extend %nio-checkbox__label;
  color: $palette-light;

  &:hover {
    &::before {
      box-shadow: 0 0 0 1px $palette-light;
    }
  }

  &::before {
    box-shadow: 0 0 0 1px $palette-light;
    cursor: not-allowed;
  }

  &::after {
    animation: none;
    background-color: transparent;
    cursor: not-allowed;
  }
}

%nio-checkbox__label--disabled-checked {
  &::after {
    @include fill($icon-check);
    background-color: $palette-light;
  }
}

%nio-checkbox__label--disabled-mixed {
  &::after {
    @include fill($icon-dash);
    background-color: $palette-light;
  }
}