:root {
  /* ---------------------------------- *\
           Checkbox style
  \* ---------------------------------- */

  // General style
  --lf-checkbox-shadow: var(--shadow-s);
  --lf-checkbox-border-radius: #{rem(4)};

  // Text style
  --lf-checkbox-text-font-weight: var(--font-medium);
  --lf-checkbox-text-color: var(--lf-color-gray-900);

  // Description style
  --lf-checkbox-description-font-size: #{rem(12)};
  --lf-checkbox-description-line-height: #{rem(15)};
  --lf-checkbox-description-font-weight: var(--font-normal);
  --lf-checkbox-description-color: var(--lf-color-gray-500);
  --lf-checkbox-description-spacing: #{rem(4)};

  // Unchecked
  --lf-checkbox-unchecked-border: var(--lf-color-gray-300);
  --lf-checkbox-unchecked-background: var(--lf-color-white);
  --lf-checkbox-unchecked-icon: var(--lf-color-white);

  // Checked
  --lf-checkbox-checked-border: var(--lf-color-primary-500);
  --lf-checkbox-checked-background: var(--lf-color-primary-500);
  --lf-checkbox-checked-icon: var(--lf-color-white);

  // Disabled Unchecked
  --lf-checkbox-disabled-unchecked-border: var(--lf-color-gray-200);
  --lf-checkbox-disabled-unchecked-background: var(--lf-color-white);
  --lf-checkbox-disabled-unchecked-icon: var(--lf-color-white);

  // Disabled Checked
  --lf-checkbox-disabled-checked-border: var(--lf-color-gray-400);
  --lf-checkbox-disabled-checked-background: var(--lf-color-gray-400);
  --lf-checkbox-disabled-checked-icon: var(--lf-color-white);

  /* ---------------------------------- *\
           Checkbox sizes
  \* ---------------------------------- */

  /* Small */
  --lf-checkbox-small-size: #{rem(14)};
  --lf-checkbox-small-font-size: #{rem(13)};
  --lf-checkbox-small-line-height: 1.25;
  --lf-checkbox-small-mark-left: #{rem(5)};
  --lf-checkbox-small-mark-top: #{rem(2)};
  --lf-checkbox-small-mark-height: #{rem(7)};
  --lf-checkbox-small-mark-border: #{rem(1)};

  /* Medium */
  --lf-checkbox-medium-size: #{rem(16)};
  --lf-checkbox-medium-font-size: #{rem(14)};
  --lf-checkbox-medium-line-height: 1.25;
  --lf-checkbox-medium-mark-left: #{rem(6)};
  --lf-checkbox-medium-mark-top: #{rem(4)};
  --lf-checkbox-medium-mark-height: #{rem(7)};
  --lf-checkbox-medium-mark-border: #{rem(1)};
  
  /* Large */
  --lf-checkbox-large-size: #{rem(20)};
  --lf-checkbox-large-font-size: #{rem(14)};
  --lf-checkbox-large-line-height: 1.25;
  --lf-checkbox-large-mark-left: #{rem(8)};
  --lf-checkbox-large-mark-top: #{rem(3)};
  --lf-checkbox-large-mark-height: #{rem(10)};
  --lf-checkbox-large-mark-border: #{rem(2)};
}
