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

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

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

  // Unchecked
  --lf-switch-background: var(--lf-color-gray-200);
  --lf-switch-handle: var(--lf-color-white);

  // Checked
  --lf-switch-checked-background: var(--lf-color-primary-500);
  --lf-switch-checked-handle: var(--lf-color-white);

  // Disabled Unchecked
  --lf-switch-disabled-unchecked-handle: var(--lf-color-white);

  // Disabled Checked
  --lf-switch-disabled-checked-handle: var(--lf-color-white);

  /* ---------------------------------- *\
           Switch sizes
  \* ---------------------------------- */

  /* Tiny */
  --lf-switch-tiny-height: #{rem(16)};
  --lf-switch-tiny-width: #{rem(30)};
  --lf-switch-tiny-font-size: #{rem(12)};
  --lf-switch-tiny-line-height: #{rem(15)};

  /* Small */
  --lf-switch-small-height: #{rem(20)};
  --lf-switch-small-width: #{rem(40)};
  --lf-switch-small-font-size: #{rem(13)};
  --lf-switch-small-line-height: #{rem(16.25)};

  /* Medium */
  --lf-switch-medium-height: #{rem(24)};
  --lf-switch-medium-width: #{rem(44)};
  --lf-switch-medium-font-size: #{rem(14)};
  --lf-switch-medium-line-height: #{rem(17.5)};
}
