@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@import '/assets/21cabcf6456efb05611aa619177e21baca6995e06a54c7daf0b136269a24bea0/components/button/button.css';
@layer cinder.components {
  /*
   * A soft strip, not a status banner: the tone is carried by the prompt
   * (text color, and a glyph when destructive) rather than by a saturated
   * fill. The fills are status backgrounds mixed into the raised surface in
   * oklab, which keeps the status hue instead of travelling toward the
   * neutrals' (see status-mix-space.test.ts).
   */
  .cinder-inline-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cinder-space-3);
    padding: var(--cinder-space-3);
    background: color-mix(
      in oklab,
      var(--cinder-status-neutral-background) 60%,
      var(--cinder-surface-raised)
    );
    border-block: 1px solid var(--cinder-status-neutral-border);
  }
  /*
   * `flush`: the strip sits inside a bordered container, where its own rule at
   * the container's start or end would sit on the container's edge and double
   * it, so it leaves that edge to the container. Opt-in, because CSS cannot see
   * whether a parent draws a border: a standalone strip keeps both edges.
   */
  .cinder-inline-confirm[data-cinder-flush]:first-child {
    border-block-start: 0;
  }
  .cinder-inline-confirm[data-cinder-flush]:last-child {
    border-block-end: 0;
  }
  .cinder-inline-confirm__prompt {
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-1-5);
    margin: 0;
    color: var(--cinder-status-neutral-text);
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-medium);
  }
  .cinder-inline-confirm__glyph {
    flex: none;
  }
  .cinder-inline-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cinder-space-2);
  }
  .cinder-inline-confirm[data-cinder-destructive] {
    background: color-mix(
      in oklab,
      var(--cinder-status-danger-background) 45%,
      var(--cinder-surface-raised)
    );
    border-color: var(--cinder-status-danger-border);
  }
  .cinder-inline-confirm[data-cinder-destructive] .cinder-inline-confirm__prompt {
    color: var(--cinder-status-danger-text);
  }
}