@use "../functions" as *;

$form-label-tokens: () !default;

// scss-docs-start form-label-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$form-label-tokens: defaults(
  (
    --label-margin-bottom: calc(var(--spacer) / 2),
    --label-font-size: null,
    --label-font-style: null,
    --label-font-weight: null,
    --label-color: null,
  ),
  $form-label-tokens
);
// scss-docs-end form-label-tokens

@layer forms {
  .form-label,
  .col-form-label {
    font-size: var(--label-font-size, var(--font-size-sm));
    font-style: var(--label-font-style, inherit);
    font-weight: var(--label-font-weight, inherit);
    color: var(--label-color, var(--fg-body));
  }

  .form-label {
    margin-bottom: var(--label-margin-bottom, calc(var(--spacer) / 2));
  }

  // For use with horizontal and inline forms, when you need the label (or legend)
  // text to align with the form controls.
  .col-form-label {
    --label-padding-y: calc(var(--btn-input-padding-y) + var(--border-width));
    padding-block: var(--label-padding-y);
    margin-bottom: 0; // Override the `<legend>` default
  }

  .col-form-label-lg {
    --label-padding-y: calc(var(--btn-input-lg-padding-y) + var(--border-width));
    font-size: var(--btn-input-lg-font-size);
  }

  .col-form-label-sm {
    --label-padding-y: calc(var(--btn-input-sm-padding-y) + var(--border-width));
    font-size: var(--btn-input-sm-font-size);
  }
}