ujiro99/tlt

.TagButton {
  --shadow-color: 0, 0, 0;

  @apply inline-block;
  @apply px-2;
  @apply pt-[1px];
  @apply pb-[2px];
  @apply ml-1;
  @apply font-mono;
  @apply text-xs;
  @apply tracking-tight;
  @apply select-none;
  @apply rounded-xl;
  @apply leading-4;
  @apply transition;
  @apply duration-300;
  @apply ease-out;
  @apply shadow-none;

  &:hover {
    opacity: 0.8;
    box-shadow: 0 4px 8px -1px rgba(var(--shadow-color), 0.4),
      0 2px 4px -2px rgba(var(--shadow-color), 0.4);
  }

  &.mod-selected {
    outline: solid 2px var(--indigo-400);
  }
  
  &--backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-index-contextmenu);
  }

  span {
    pointer-events: none;
    user-select: none;
  }
}