/**
 * Tag
 */

@layer dx-components {
  .dx-tag {
    @apply inline-block text-xs font-semibold m-0.5 px-1 rounded-sm cursor-default truncate;
    padding-block: var(--spacing-tag-padding-block);
    user-select: none;
  }

  .dx-tag--anchor {
    /* NOTE: Margin offsets padding so that border is flush with text. This should only apply to anchor tags inside of Codemirror. */
    @apply inline cursor-pointer px-[4px] py-0.5;
    /** TODO(burdon): Configure secondary color. */
    @apply bg-input-surface ring ring-neutral-border rounded-sm;
    &:hover {
      @apply bg-hover-surface;
    }
  }

  .dx-tag[data-hue='neutral'],
  .dx-tag--neutral {
    @apply bg-neutral-surface text-neutral-fg;
  }

  .dx-tag[data-hue='red'],
  .dx-tag--red {
    @apply bg-red-surface text-red-fg;
  }

  .dx-tag[data-hue='orange'],
  .dx-tag--orange {
    @apply bg-orange-surface text-orange-fg;
  }

  .dx-tag[data-hue='amber'],
  .dx-tag--amber {
    @apply bg-amber-surface text-amber-fg;
  }

  .dx-tag[data-hue='yellow'],
  .dx-tag--yellow {
    @apply bg-yellow-surface text-yellow-fg;
  }

  .dx-tag[data-hue='lime'],
  .dx-tag--lime {
    @apply bg-lime-surface text-lime-fg;
  }

  .dx-tag[data-hue='green'],
  .dx-tag--green {
    @apply bg-green-surface text-green-fg;
  }

  .dx-tag[data-hue='emerald'],
  .dx-tag--emerald {
    @apply bg-emerald-surface text-emerald-fg;
  }

  .dx-tag[data-hue='teal'],
  .dx-tag--teal {
    @apply bg-teal-surface text-teal-fg;
  }

  .dx-tag[data-hue='cyan'],
  .dx-tag--cyan {
    @apply bg-cyan-surface text-cyan-fg;
  }

  .dx-tag[data-hue='sky'],
  .dx-tag--sky {
    @apply bg-sky-surface text-sky-fg;
  }

  .dx-tag[data-hue='blue'],
  .dx-tag--blue {
    @apply bg-blue-surface text-blue-fg;
  }

  .dx-tag[data-hue='indigo'],
  .dx-tag--indigo {
    @apply bg-indigo-surface text-indigo-fg;
  }

  .dx-tag[data-hue='violet'],
  .dx-tag--violet {
    @apply bg-violet-surface text-violet-fg;
  }

  .dx-tag[data-hue='purple'],
  .dx-tag--purple {
    @apply bg-purple-surface text-purple-fg;
  }

  .dx-tag[data-hue='fuchsia'],
  .dx-tag--fuchsia {
    @apply bg-fuchsia-surface text-fuchsia-fg;
  }

  .dx-tag[data-hue='pink'],
  .dx-tag--pink {
    @apply bg-pink-surface text-pink-fg;
  }

  .dx-tag[data-hue='rose'],
  .dx-tag--rose {
    @apply bg-rose-surface text-rose-fg;
  }

  .dx-tag[data-hue='info'],
  .dx-tag--info {
    @apply bg-cyan-surface text-cyan-fg;
  }

  .dx-tag[data-hue='success'],
  .dx-tag--success {
    @apply bg-emerald-surface text-emerald-fg;
  }

  .dx-tag[data-hue='warning'],
  .dx-tag--warning {
    @apply bg-amber-surface text-amber-fg;
  }

  .dx-tag[data-hue='error'],
  .dx-tag--error {
    @apply bg-rose-surface text-rose-fg;
  }
}