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

@layer cinder.components {
  /* The outer element is now FormFieldFrame's `.cinder-form-field` root
   * (column layout: label above control). The textbox + Clear row keeps its
   * original horizontal layout on `.cinder-shortcut-field__row`, the
   * `controlClass` FormFieldFrame wraps the control snippet in. */
  .cinder-shortcut-field__row {
    display: flex;
    gap: var(--cinder-space-2);
    align-items: center;
  }
  .cinder-shortcut-field__control {
    min-height: 2rem;
    display: flex;
    align-items: center;
    gap: var(--cinder-space-1);
    flex: 1;
    padding: var(--cinder-space-2);
    border: 1px solid var(--cinder-border-control);
    border-radius: var(--cinder-radius-sm);
    cursor: text;
  }
  .cinder-shortcut-field--disabled .cinder-shortcut-field__control {
    background: var(--cinder-surface-inset);
    color: var(--cinder-text-muted);
    cursor: not-allowed;
    opacity: 0.65;
  }
  .cinder-shortcut-field__control:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }
  .cinder-shortcut-field__placeholder {
    color: var(--cinder-text-muted);
  }
  .cinder-shortcut-field__error {
    color: var(--cinder-status-danger-text);
    font-size: var(--cinder-text-sm);
  }
  .cinder-shortcut-field__clear {
    min-height: 2rem;
    padding: var(--cinder-space-2) var(--cinder-space-3);
    border: 1px solid var(--cinder-border-strong);
    border-radius: var(--cinder-radius-sm);
    background: var(--cinder-surface);
    color: var(--cinder-text-default);
    cursor: pointer;
  }
  @media (hover: hover) {
    .cinder-shortcut-field__clear:hover {
      background: var(--cinder-surface-inset);
    }
  }
  .cinder-shortcut-field__clear:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  @media (forced-colors: active) {
    .cinder-shortcut-field__control:focus-visible,
    .cinder-shortcut-field__clear:focus-visible {
      outline-color: Highlight;
    }
  }
}