@charset "UTF-8";
@layer bf-reset, bf-base, bf-auto, bf-tokens, bf-components, bf-utilities, bf-overrides;
@layer bf-components {
  /* iOS-style switch.
   *
   * Visual recipe ported from Radix Themes' SwitchRoot: a single wide background
   * gradient is rendered behind the track (length = 2× track + thumb) and slid
   * left/right via background-position. That gives a single clean transition
   * between the "on" accent colour and the "off" neutral colour without ever
   * cross-fading two backgrounds. The thumb slides on top via translateX. */
  .bf-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--bf-space-2_5);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    font-size: var(--bf-text-sm);
    color: var(--bf-color-text-base);
  }
  .bf-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .bf-toggle__track {
    --_track-h: 20px;
    --_track-w: calc(var(--_track-h) * 1.75);
    --_thumb-inset: 2px;
    --_thumb-size: calc(var(--_track-h) - var(--_thumb-inset) * 2);
    --_thumb-translate: calc(var(--_track-w) - var(--_track-h));
    --_track-on: var(--bf-color-primary-9);
    --_track-off: var(--bf-color-border-strong);
    position: relative;
    display: inline-block;
    width: var(--_track-w);
    height: var(--_track-h);
    border-radius: var(--bf-radius-full);
    flex-shrink: 0;
    /* Wide gradient: track-w of "on" colour, track-h of feathered transition,
     * track-w of "off" colour. We slide between background-position 0% (on)
     * and 100% (off). */
    background-color: var(--_track-off);
    background-image: linear-gradient(to right, var(--_track-on) 0, var(--_track-on) calc(50% - var(--_track-h) / 2), var(--_track-off) calc(50% + var(--_track-h) / 2), var(--_track-off) 100%);
    background-size: calc(var(--_track-w) * 2 + var(--_track-h)) 100%;
    background-repeat: no-repeat;
    background-position-x: 100%;
    transition: background-position var(--bf-duration-base) var(--bf-ease-out), box-shadow var(--bf-duration-fast) var(--bf-ease-out);
  }
  /* Thumb. Slides on top of the gradient via transform — the gradient handles
   * the colour change underneath so the two animations stay independent. */
  .bf-toggle__track::after {
    content: "";
    position: absolute;
    top: var(--_thumb-inset);
    left: var(--_thumb-inset);
    width: var(--_thumb-size);
    height: var(--_thumb-size);
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transition: transform var(--bf-duration-base) var(--bf-ease-emphasized);
  }
  .bf-toggle__input:checked + .bf-toggle__track {
    background-position-x: 0%;
  }
  .bf-toggle__input:checked + .bf-toggle__track::after {
    transform: translateX(var(--_thumb-translate));
  }
  .bf-toggle__input:focus-visible + .bf-toggle__track {
    outline: 2px solid var(--bf-color-primary-8);
    outline-offset: 2px;
  }
  .bf-toggle__input:disabled + .bf-toggle__track {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .bf-toggle:has(.bf-toggle__input:disabled) {
    cursor: not-allowed;
    color: var(--bf-color-text-disabled);
  }
  /* Sizes */
  .bf-toggle--sm .bf-toggle__track {
    --_track-h: 16px;
  }
  .bf-toggle--lg .bf-toggle__track {
    --_track-h: 24px;
  }
  /* Variant: with a check glyph that appears on the "on" side of the track.
   * Sits at the leading edge so the thumb covers it on the off state. */
  .bf-toggle--marked .bf-toggle__track::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--bf-space-1_5);
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3.5 8.5 6.5 11.5 12.5 5'/></svg>") no-repeat center/contain;
    opacity: 0;
    transition: opacity var(--bf-duration-fast) var(--bf-ease-out);
  }
  .bf-toggle--marked .bf-toggle__input:checked + .bf-toggle__track::before {
    opacity: 1;
  }
} /* end @layer */
/*# sourceMappingURL=bf.toggle.css.map */