.c-checkbox {
  font-size: var(--lf-checkbox-font-size);
  line-height: var(--lf-checkbox-line-height);
  font-weight: var(--lf-checkbox-text-font-weight);
  color: var(--lf-checkbox-text-color);
  @apply inline-flex items-center flex-wrap relative mr-7.5 mt-2;

  input {
    height: var(--lf-checkbox-size);
    width: var(--lf-checkbox-size);
    border: rem(1) solid var(--lf-checkbox-border);
    background: var(--lf-checkbox-background);
    border-radius: var(--lf-checkbox-border-radius);
    box-shadow: var(--lf-checkbox-shadow);

    --lf-checkbox-border: var(--lf-checkbox-unchecked-border);
    --lf-checkbox-background: var(--lf-checkbox-unchecked-background);

    @apply transition-all appearance-none p-0 my-0 ml-0 inline-block mr-2 cursor-pointer;

    // Text
    & + span {
      @apply cursor-pointer select-none;
    }

    // Icon
    &::after {
      left: var(--lf-checkbox-mark-left);
      top: var(--lf-checkbox-mark-top);
      content: "";
      border: var(--lf-checkbox-mark-border) solid var(--lf-checkbox-icon);
      height: var(--lf-checkbox-mark-height);
      transform: rotate(45deg) scaleY(0);
      transition: transform 0.15s ease-in 0.05s;
      transform-origin: center;
      @apply box-content border-l-0 border-t-0 absolute w-[3px];
    }

    // Checked
    &:checked, &:indeterminate {
      --lf-checkbox-border: var(--lf-checkbox-checked-border);
      --lf-checkbox-background: var(--lf-checkbox-checked-background);
      --lf-checkbox-icon: var(--lf-checkbox-checked-icon); 
    }

    &:checked::after {
      transform: rotate(45deg) scaleY(1);
    }
    
    &:indeterminate::after {
      @apply border-b-0 ;
      top: calc(var(--lf-checkbox-mark-top) - 1px);
      transform: rotate(90deg) scaleY(1);
    }

    // Disabled
    &:disabled {
      --lf-checkbox-border: var(--lf-checkbox-disabled-unchecked-border);
      --lf-checkbox-background: var(
        --lf-checkbox-disabled-unchecked-background
      );
      --lf-checkbox-icon: var(--lf-checkbox-disabled-unchecked-icon);
      @apply cursor-not-allowed;

      &:checked {
        --lf-checkbox-border: var(--lf-checkbox-disabled-checked-border);
        --lf-checkbox-background: var(
          --lf-checkbox-disabled-checked-background
        );
        --lf-checkbox-icon: var(--lf-checkbox-disabled-checked-icon);
      }

      & + span {
        @apply cursor-not-allowed;
      }
    }
  }

  // Checkbox sizes
  &--small {
    --lf-checkbox-size: var(--lf-checkbox-small-size);
    --lf-checkbox-font-size: var(--lf-checkbox-small-font-size);
    --lf-checkbox-line-height: var(--lf-checkbox-small-line-height);
    --lf-checkbox-mark-left: var(--lf-checkbox-small-mark-left);
    --lf-checkbox-mark-top: var(--lf-checkbox-small-mark-top);
    --lf-checkbox-mark-height: var(--lf-checkbox-small-mark-height);
    --lf-checkbox-mark-border: var(--lf-checkbox-small-mark-border);
  }

  &--medium {
    --lf-checkbox-size: var(--lf-checkbox-medium-size);
    --lf-checkbox-font-size: var(--lf-checkbox-medium-font-size);
    --lf-checkbox-line-height: var(--lf-checkbox-medium-line-height);
    --lf-checkbox-mark-left: var(--lf-checkbox-medium-mark-left);
    --lf-checkbox-mark-top: var(--lf-checkbox-medium-mark-top);
    --lf-checkbox-mark-height: var(--lf-checkbox-medium-mark-height);
    --lf-checkbox-mark-border: var(--lf-checkbox-medium-mark-border);
  }

  &--large {
    --lf-checkbox-size: var(--lf-checkbox-large-size);
    --lf-checkbox-font-size: var(--lf-checkbox-large-font-size);
    --lf-checkbox-line-height: var(--lf-checkbox-large-line-height);
    --lf-checkbox-mark-left: var(--lf-checkbox-large-mark-left);
    --lf-checkbox-mark-top: var(--lf-checkbox-large-mark-top);
    --lf-checkbox-mark-height: var(--lf-checkbox-large-mark-height);
    --lf-checkbox-mark-border: var(--lf-checkbox-large-mark-border);
  }

  // Multiple state
  // Change icon to subtract-line
  &--multiple {
    input:before {
      content: "\f1af";
    }
  }

  p {
    font-size: var(--lf-checkbox-description-font-size);
    line-height: var(--lf-checkbox-description-line-height);
    font-weight: var(--lf-checkbox-description-font-weight);
    color: var(--lf-checkbox-description-color);
    margin-top: var(--lf-checkbox-description-spacing);
  }
}
