@charset "UTF-8";
@layer bf-reset, bf-base, bf-auto, bf-tokens, bf-components, bf-utilities, bf-overrides;
@layer bf-components {
  /* Field wrapper — pairs label + control + helper text. */
  .bf-field {
    display: flex;
    flex-direction: column;
    gap: var(--bf-space-1_5);
    min-width: 0;
  }
  .bf-field__label {
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-medium);
    color: var(--bf-color-text-strong);
    display: flex;
    align-items: center;
    gap: var(--bf-space-1);
  }
  .bf-field__label[data-bf-required=true]::after {
    content: "*";
    color: var(--bf-color-danger-fg);
    font-weight: var(--bf-weight-bold);
  }
  .bf-field__hint {
    font-size: var(--bf-text-xs);
    color: var(--bf-color-text-muted);
  }
  .bf-field__error {
    font-size: var(--bf-text-xs);
    color: var(--bf-color-danger-fg);
    display: flex;
    align-items: center;
    gap: var(--bf-space-1);
  }
  /* Locked variant — read-only field rendered with a muted
   * surface and a lock-hint after the input. Used for IdP-owned
   * identity rows (account settings) and framework-managed
   * columns on edit forms (id, created_by, …). The actual input
   * keeps its native rendering — operators see why the row is
   * locked via the hint, not via a styled-out input. */
  .bf-field--locked .bf-input,
  .bf-field--locked input,
  .bf-field--locked textarea,
  .bf-field--locked select {
    background-color: var(--bf-color-bg-subtle);
    color: var(--bf-color-text-muted);
    cursor: not-allowed;
  }
  .bf-field--locked .bf-field__hint i {
    margin-right: var(--bf-space-1);
  }
  /* Base input — applies to <input>, <textarea>, <select> alike.
   *
   * Variants modeled on Radix Themes text-field:
   *   .bf-input             (default surface look — bordered, panel bg)
   *   .bf-input--surface    (alias for the default; explicit class)
   *   .bf-input--soft       (subtle primary tint, no border)
   */
  .bf-input {
    --_h: 36px;
    --_radius: var(--bf-radius-md);
    --_bg: var(--bf-color-bg-base);
    --_border: var(--bf-color-border-base);
    --_fg: var(--bf-color-text-base);
    --_placeholder: var(--bf-color-text-subtle);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 100%;
    height: var(--_h);
    padding: 0 var(--bf-space-3);
    background-color: var(--_bg);
    border: 1px solid var(--_border);
    border-radius: var(--_radius);
    color: var(--_fg);
    font-family: inherit;
    font-size: var(--bf-text-sm);
    line-height: 1.4;
    outline: none;
    transition: border-color var(--bf-duration-fast) var(--bf-ease-out), background-color var(--bf-duration-fast) var(--bf-ease-out), box-shadow var(--bf-duration-fast) var(--bf-ease-out);
  }
  textarea.bf-input {
    height: auto;
    min-height: calc(var(--_h) * 2);
    padding-block: var(--bf-space-2);
    line-height: var(--bf-leading-snug);
    resize: vertical;
  }
  .bf-input::-moz-placeholder {
    color: var(--_placeholder);
  }
  .bf-input::placeholder {
    color: var(--_placeholder);
  }
  .bf-input:hover:not(:disabled):not(:focus):not(:-moz-read-only) {
    border-color: var(--bf-color-border-strong);
  }
  .bf-input:hover:not(:disabled):not(:focus):not(:read-only) {
    border-color: var(--bf-color-border-strong);
  }
  .bf-input:focus {
    border-color: var(--bf-color-border-focus);
    box-shadow: 0 0 0 1px var(--bf-ring-color);
  }
  .bf-input:disabled,
  .bf-input[readonly] {
    background-color: var(--bf-color-bg-subtle);
    color: var(--bf-color-text-disabled);
    cursor: not-allowed;
  }
  .bf-input[readonly] {
    cursor: text;
  }
  .bf-input[aria-invalid=true] {
    border-color: var(--bf-color-danger-solid);
  }
  .bf-input[aria-invalid=true]:focus {
    border-color: var(--bf-color-danger-solid);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--bf-color-danger-solid) 25%, transparent);
  }
  /* Variants */
  .bf-input--surface {
    /* Default surface look — explicit class for parity with Radix. */
    --_bg: var(--bf-color-bg-base);
    --_border: var(--bf-color-border-base);
  }
  .bf-input--soft {
    --_bg: var(--bf-color-primary-3);
    --_border: transparent;
    --_fg: var(--bf-color-primary-12);
    --_placeholder: color-mix(in oklab, var(--bf-color-primary-12) 50%, transparent);
  }
  .bf-input--soft:hover:not(:disabled):not(:focus):not(:-moz-read-only) {
    background-color: var(--bf-color-primary-4);
    border-color: transparent;
  }
  .bf-input--soft:hover:not(:disabled):not(:focus):not(:read-only) {
    background-color: var(--bf-color-primary-4);
    border-color: transparent;
  }
  .bf-input--soft:focus {
    border-color: var(--bf-color-primary-8);
  }
  /* Sizes */
  .bf-input--xs {
    --_h: 24px;
    font-size: var(--bf-text-xs);
    padding: 0 var(--bf-space-2);
  }
  .bf-input--sm {
    --_h: 30px;
  }
  .bf-input--md {
    --_h: 36px;
  }
  .bf-input--lg {
    --_h: 42px;
    font-size: var(--bf-text-base);
  }
  .bf-input--xl {
    --_h: 48px;
    font-size: var(--bf-text-md);
  }
  /* Input group — wraps an input with a leading or trailing icon / addon. */
  .bf-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
  }
  .bf-input-group .bf-input {
    padding-inline: var(--bf-space-3);
  }
  .bf-input-group__leading,
  .bf-input-group__trailing {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: var(--bf-color-text-subtle);
    pointer-events: none;
    font-size: var(--bf-text-sm);
  }
  .bf-input-group__leading {
    left: var(--bf-space-3);
  }
  .bf-input-group__trailing {
    right: var(--bf-space-3);
  }
  .bf-input-group:has(.bf-input-group__leading) .bf-input {
    padding-left: calc(var(--bf-space-3) + var(--bf-space-5));
  }
  .bf-input-group:has(.bf-input-group__trailing) .bf-input {
    padding-right: calc(var(--bf-space-3) + var(--bf-space-5));
  }
  .bf-input-group__trailing--button {
    pointer-events: auto;
  }
  /* Search variant — consistent with the topbar search affordance in the references.
   *
   * Layout: flex with `align-items: center` so the absolute icon/kbd center via
   * the static-position rule (no explicit `top` needed). `flex: 1; min-width: 0`
   * on the input prevents the input's intrinsic min-width from squeezing the
   * available space when the parent is narrow.
   */
  .bf-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .bf-search > .bf-input {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: calc(var(--bf-space-3) + var(--bf-space-5));
    padding-right: calc(var(--bf-space-3) + var(--bf-space-5));
  }
  .bf-search:not(:has(kbd)) > .bf-input {
    padding-right: var(--bf-space-3);
  }
  /* `!important` is needed because Font Awesome's `.fa-duotone { position: relative }`
   * is unlayered, and unlayered normal declarations beat any layered rule regardless
   * of specificity. Layered `!important` reverses that and wins. */
  .bf-search > i {
    position: absolute !important;
    top: 50%;
    left: var(--bf-space-3);
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    color: var(--bf-color-text-subtle);
    font-size: var(--bf-text-sm);
    line-height: 1;
    pointer-events: none;
  }
  .bf-search > kbd {
    position: absolute;
    right: var(--bf-space-3);
    pointer-events: none;
  }
} /* end @layer */
/*# sourceMappingURL=bf.input.css.map */