:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  --neeto-ui-kbd-font-size: var(--neeto-ui-text-sm);
  --neeto-ui-kbd-font-weight: var(--neeto-ui-font-semibold);
  --neeto-ui-kbd-color: rgb(var(--neeto-ui-gray-700));
  --neeto-ui-kbd-bg-color: rgb(var(--neeto-ui-gray-200));
  --neeto-ui-kbd-border-radius: var(--neeto-ui-rounded);
  --neeto-ui-kbd-min-width: 1.5rem;
  --neeto-ui-kbd-height: 1.5rem;
  --neeto-ui-kbd-padding: 0.25rem;
}

.neeto-ui-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--neeto-ui-kbd-padding);
  height: var(--neeto-ui-kbd-height);
  min-width: var(--neeto-ui-kbd-min-width);
  color: var(--neeto-ui-kbd-color);
  font-size: var(--neeto-ui-kbd-font-size);
  font-weight: var(--neeto-ui-kbd-font-weight);
  background-color: var(--neeto-ui-kbd-bg-color);
  border-radius: var(--neeto-ui-kbd-border-radius);
}

.neetix-kbd {
  --neeto-ui-kbd-font-size: var(--neeto-ui-text-base);
  --neeto-ui-kbd-color: rgb(var(--neeto-ui-primary-800));
  --neeto-ui-kbd-bg-color: rgb(var(--neeto-ui-primary-100));
  --neeto-ui-kbd-border-radius: var(--neeto-ui-rounded-sm);
  --neeto-ui-kbd-min-width: 2rem;
  --neeto-ui-kbd-height: 2rem;
}
