prenix_components

@layer components {
  .chip-default {
    --chip: hsl(var(--default));
    --chip-foreground: hsl(var(--default-foreground));
    --chip-soft: hsl(var(--default) / 0.4);
    --chip-soft-foreground: hsl(var(--default-foreground));
  }

  .chip-primary {
    --chip: hsl(var(--primary));
    --chip-foreground: hsl(var(--primary-foreground));
    --chip-soft: hsl(var(--primary) / 0.2);
    --chip-soft-foreground: hsl(var(--primary));
  }

  .chip-secondary {
    --chip: hsl(var(--secondary));
    --chip-foreground: hsl(var(--secondary-foreground));
    --chip-soft: hsl(var(--secondary) / 0.2);
    --chip-soft-foreground: hsl(var(--secondary));
  }

  .chip-success {
    --chip: hsl(var(--success));
    --chip-foreground: hsl(var(--success-foreground));
    --chip-soft: hsl(var(--success) / 0.2);
    --chip-soft-foreground: hsl(var(--success));
  }

  .chip-warning {
    --chip: hsl(var(--warning));
    --chip-foreground: hsl(var(--warning-foreground));
    --chip-soft: hsl(var(--warning) / 0.2);
    --chip-soft-foreground: hsl(var(--warning));
  }

  .chip-danger {
    --chip: hsl(var(--danger));
    --chip-foreground: hsl(var(--danger-foreground));
    --chip-soft: hsl(var(--danger) / 0.2);
    --chip-soft-foreground: hsl(var(--danger));
  }

  .chip {
    @apply relative max-w-fit inline-flex items-center justify-between;
    @apply whitespace-nowrap box-border;
  }

  .chip .chip-content {
    @apply flex-1 text-inherit font-normal px-2;
  }

  .chip.chip-sm {
    @apply px-1 h-6 text-xs;
  }

  .chip.chip-sm .chip-content {
    @apply px-1;
  }

  .chip.chip-md {
    @apply px-1 h-7 text-sm;
  }

  .chip.chip-md .chip-content {
    @apply px-2;
  }

  .chip.chip-lg {
    @apply px-2 h-8 text-base;
  }

  .chip.chip-lg .chip-content {
    @apply px-2;
  }

  .chip.chip-solid {
    @apply bg-[--chip];
    @apply text-[--chip-foreground];
  }

  .chip.chip-outline {
    @apply bg-transparent border-[--chip] text-[--chip-soft-foreground] border-2;
  }

  .chip.chip-soft {
    @apply text-[--chip-soft-foreground] bg-[--chip-soft];
  }

  .chip.chip-radius-full {
    @apply rounded-full;
  }

  .chip.chip-radius-sm {
    @apply rounded-md;
  }

  .chip.chip-radius-md {
    @apply rounded-lg;
  }

  .chip.chip-radius-lg {
    @apply rounded-xl;
  }
}