.form-check-input[type="checkbox"] {
  --checkbox-width: #{unit(4.5)};
  --checkbox-bg: white;
  --checkbox-radius: 4px;
  --checkbox-border-color: var(--secondary-color);
  --checkbox-hover-border-color: var(--secondary-color-darker);
  --checkbox-checked-bg: var(--primary-color);
  --checkbox-disabled-bg: var(--secondary-color-lighter);
  --checkbox-disabled-checked-bg: var(--secondary-color-darker);

  @include square(var(--checkbox-width));
  position: relative;
  background: var(--checkbox-checked-bg);
  border: none;
  border-radius: var(--checkbox-radius);
  transition: 0.3s;
  appearance: none;
  margin: 0;
  cursor: pointer;

  & #{$sibling-selector} .form-check-label {
    margin-left: unit(2.5);
    cursor: pointer;
    transition: 0.3s;
  }

  &::before {
    position: absolute;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' fill='none' stroke-width='2px' stroke='white' stroke-linecap='round' viewBox='0 0 21 21'%3E%3Cpolyline points='5 10.75 8.5 14.25 16 6'%3E%3C/polyline%3E%3C/svg%3E");
    transform: scale(0);
  }

  &::after {
    @include cover;
    content: "";
    background: var(--checkbox-bg);
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--checkbox-border-color);
    transition: 0.2s;
  }

  &:hover {
    --checkbox-border-color: var(--checkbox-hover-border-color);
  }

  &:checked {
    &::before {
      animation: scale-in 0.1s 0.2s linear forwards;
    }

    &::after {
      transform: scale(0);
    }
  }

  &:disabled {
    --checkbox-bg: var(--checkbox-disabled-bg);
    --checkbox-checked-bg: var(--checkbox-disabled-checked-bg);

    cursor: not-allowed;

    & #{$sibling-selector} .form-check-label {
      cursor: not-allowed;
    }
  }

  &:indeterminate {
    &::after {
      transform: scale(0.5);
    }
  }
}
