@source inline("button-{primary,secondary,destructive,outline}");
@source inline("button-{sm,md,lg,xl}");

@utility ui-button {
  :where(&) {
    @apply whitespace-nowrap inline-flex items-center justify-center rounded-md transition-colors cursor-pointer font-medium w-fit;

    @variant focus-visible {
      @apply outline-none ring-1;
    }

    @variant disabled {
      @apply pointer-events-none opacity-50;
    }

    /* Variants */

    &.button-primary {
      @apply ui/button-primary;
    }

    &.button-secondary {
      @apply ui/button-secondary;
    }

    &.button-destructive {
      @apply ui/button-destructive;
    }

    &.button-outline {
      @apply ui/button-outline;
    }

    /* Sizes */

    /*Set md button as default*/
    &:not(:has(.button-sm, .button-md, .button-lg, .button-xl)){
      @apply ui/button-md;
    }

    &.button-sm {
      @apply ui/button-sm;
    }

    &.button-md {
      @apply ui/button-md;
    }

    &.button-lg {
      @apply ui/button-lg;
    }

    &.button-xl {
      @apply ui/button-xl;
    }
  }
}

@utility ui/button-primary {
  @apply bg-primary text-primary-foreground;

  @variant hover {
    @apply bg-primary/90;
  }

  @variant disabled {
    @apply text-white;
  }
}

@utility ui/button-secondary {
  @apply bg-secondary text-secondary-foreground;

  @variant hover {
    @apply bg-secondary/90;
  }
}

@utility ui/button-destructive {
  @apply bg-destructive text-white shadow-sm;

  @variant hover {
    @apply bg-destructive/60 hover:text-primary;
  }
}

@utility ui/button-outline {
 @apply border border-input bg-background shadow-sm;

  @variant hover {
    @apply bg-accent text-accent-foreground;
  }
}

@utility ui/button-sm {
  @apply px-3 py-1.5 h-8 text-xs;
}

@utility ui/button-md {
  @apply px-4 py-1 h-9 text-sm;
}

@utility ui/button-lg {
  @apply px-4 py-2 h-10;
}

@utility ui/button-xl {
  @apply px-6 py-3 h-12;
}