@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@import '/assets/81bb177646c04c3e4b7b3947e81bf23113b4013cdd4356e89706829f1e2d2267/components/kbd/kbd.css';

@layer cinder.components {
  .cinder-shortcut-field {
    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);
    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);
    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;
    }
  }
}