examples/button/style.css
.button {
  @apply
    [--border:rgb(0_0_0/13%)]
    [--highlight:rgb(255_255_255/20%)]
    [--shadow:rgb(0_0_0/10%)]

    dark:[--border:rgb(255_255_255/10%)]
    dark:[--highlight:rgb(255_255_255/5%)]
    dark:[--shadow:rgb(0_0_0/25%)]

    hover:[&:not(:active)]:[--border:rgb(0_0_0/33%)]
    hover:[&:not(:active)]:dark:[--border:rgb(255_255_255/25%)]
}

.primary {
  @apply
    [--border:rgba(0,0,0,0.15)]
    [--highlight:rgba(255,255,255,0.25)]
    [--shadow:rgba(0,0,0,0.15)]

    dark:[--border:rgba(255,255,255,0.25)]
    dark:[--highlight:rgba(255,255,255,0.1)]
    dark:[--shadow:rgba(0,0,0,0.25)]

    hover:[--border:rgba(0,0,0,0.35)]
    dark:hover:[--border:rgba(255,255,255,0.45)]
}

.danger {
  @apply
    [--border:rgba(0,0,0,0.15)]
    [--highlight:rgba(255,255,255,0.25)]
    [--shadow:rgba(0,0,0,0.15)]
    dark:[--border:rgba(255,255,255,0.25)]
    dark:[--highlight:rgba(255,255,255,0.1)]
    dark:[--shadow:rgba(0,0,0,0.25)]
}

.button {
  @apply
    flex
    h-10
    items-center
    justify-center
    gap-1
    rounded-lg
    border-none
    px-4
    text-base
    select-none
    no-underline
    whitespace-nowrap
    aria-disabled:opacity-50
    sm:gap-2
    bg-white
    dark:bg-white/5
    text-black
    dark:text-white
    data-[focus-visible]:outline
    active:pt-0.5
    [box-shadow:inset_0_0_0_1px_var(--border),inset_0_2px_0_var(--highlight),inset_0_-1px_0_var(--shadow),0_1px_1px_var(--shadow)]
    dark:[box-shadow:inset_0_0_0_1px_var(--border),inset_0_-1px_0_1px_var(--shadow),inset_0_1px_0_var(--highlight)]
    active:[box-shadow:inset_0_0_0_1px_var(--border),inset_0_2px_0_var(--border)]
    dark:active:[box-shadow:inset_0_0_0_1px_var(--border),inset_0_1px_1px_1px_var(--shadow)]
    outline-2
    outline-offset-2
    outline-blue-600
  ;
}

.flat {
  @apply
    [box-shadow:none]
    dark:[box-shadow:none]
    dark:active:[box-shadow:none]
  ;
}

.primary {
  @apply
    text-white
    bg-blue-600
    dark:bg-blue-700
    hover:bg-blue-700
    dark:hover:bg-blue-600
  ;
}

.secondary {
  @apply
    text-current
    bg-transparent
    dark:bg-transparent
    hover:bg-black/5
    dark:hover:bg-white/5
    [box-shadow:none]
    dark:[box-shadow:none]
    dark:active:[box-shadow:none]
  ;
}

.danger {
  @apply
    text-white
    bg-red-600
    dark:bg-red-700
    hover:bg-red-700
    dark:hover:bg-red-600
  ;
}
