parcel/style/components/button.css

@layer components {
  .button {
    @apply rounded-lg flex flex-row gap-1;
    @apply px-5 py-2;
    @apply text-white bg-primary-600;
    @apply focus:ring-2 focus:outline-none focus:ring-primary-300;
    @apply dark:focus:ring-primary-800;
    @apply text-center text-sm font-medium;

    &:not(:disabled) {
      @apply hover:text-white hover:bg-primary-700;
    }

    &:disabled {
      @apply text-white/75 dark:text-white/50;
      @apply bg-primary-400 dark:bg-primary-900;
    }

    &.success {
      @apply bg-green-600 text-white;
      @apply dark:bg-green-500 dark:text-black;
      @apply focus:ring-green-300;

      &:not(:disabled) {
        @apply hover:bg-green-500 hover:dark:bg-green-400 hover:dark:text-black;
      }

      &:disabled {
        @apply bg-green-600/50 dark:bg-green-500/25 text-white/50;
      }
    }

    &.danger {
      @apply bg-red-800 text-white;
      @apply focus:ring-red-500;

      &:not(:disabled) {
        @apply hover:bg-red-700;
      }

      &:disabled {
        @apply bg-red-800/50 text-white/50;
      }
    }

    &.hollow {
      @apply bg-transparent text-primary-600 dark:text-primary-400;
      @apply border border-primary-600;

      &:not(:disabled) {
        @apply hover:bg-primary-600/25 hover:text-primary-800 dark:hover:text-primary-300;
      }

      &:disabled {
        @apply text-primary-600/50 dark:text-primary-400/25;
      }

      &.success {
        @apply text-green-600 border-green-600;

        &:not(:disabled) {
          @apply hover:bg-green-600/25 hover:text-green-800 hover:dark:text-green-400;
        }

        &:disabled {
          @apply bg-transparent text-green-600/50;
        }
      }

      &.danger {
        @apply text-red-800 dark:text-red-600 border-red-600;

        &:not(:disabled) {
          @apply hover:bg-red-600/25 hover:text-red-800 hover:dark:text-red-400;
        }

        &:disabled {
          @apply bg-transparent text-red-600/50 dark:text-red-700/75;
        }
      }
    }
  }

  .buttons {
    @apply flex flex-col md:flex-row md:items-center gap-2;

    &.reverse {
      @apply flex-col-reverse md:flex-row-reverse;
    }

    &.end {
      @apply justify-end;

      &.reverse {
        @apply justify-start;
      }
    }
  }

  input + .buttons {
    @apply mt-2;
  }
}