@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@import '/assets/21cabcf6456efb05611aa619177e21baca6995e06a54c7daf0b136269a24bea0/components/button/button.css';
@import '/assets/21cabcf6456efb05611aa619177e21baca6995e06a54c7daf0b136269a24bea0/components/form-field/form-field.css';
@import '/assets/21cabcf6456efb05611aa619177e21baca6995e06a54c7daf0b136269a24bea0/components/input/input.css';

@layer cinder.components {
  .cinder-find-bar {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-2);
    min-inline-size: 0;
    flex-wrap: wrap;
    padding: var(--cinder-space-2);
    border-block-end: 1px solid var(--cinder-border-muted);
    background: var(--cinder-surface-raised);
  }
  /* Direct child, not a descendant selector: FindBar's own FormField renders
     `.cinder-form-field` as a direct child of `.cinder-find-bar`, but since
     CIN-511 the Input inside it *also* renders its own nested
     `.cinder-form-field` (Input always frames itself when it has field
     context now, with label/description/error simply absent). A descendant
     selector would match that inner frame too, applying `flex`/
     `min-inline-size` to it a second time inside the outer frame's own flex
     column and distorting the row's layout. */
  .cinder-find-bar > .cinder-form-field {
    flex: 1 1 12rem;
    min-inline-size: min(12rem, 100%);
  }
  .cinder-find-bar__status {
    min-inline-size: 5rem;
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
    text-align: center;
  }
  .cinder-find-bar__actions {
    display: flex;
    gap: var(--cinder-space-1);
  }
}