/* set default button */
button {
  @apply hover:cursor-pointer;

  &:disabled {
    @apply hover:scale-100 hover:cursor-not-allowed;
  }
}

.btn {
  .ti,
  i {
    @apply shrink-0;
  }
}

@utility btn {
  @apply flex items-center justify-center gap-2 rounded-md px-4 py-2 text-center text-sm font-medium transition-all duration-300 hover:scale-105;
}

@layer components {
  /* button styles - solid */

  .btn-primary {
    @apply btn bg-primary text-secondary hover:bg-black/70;

    &.active {
      @apply bg-primary/70;
    }

    &:disabled {
      @apply bg-primary/50 text-secondary/50;
    }
  }

  .btn-secondary {
    @apply btn bg-secondary text-primary hover:bg-secondary/70;

    &:disabled {
      @apply bg-secondary/50 text-primary/50;
    }
  }

  .btn-success {
    @apply btn bg-success text-white hover:bg-success/70;

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

  .btn-warning {
    @apply btn bg-warning text-white hover:bg-warning/70;

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

  .btn-danger {
    @apply btn bg-danger text-white hover:bg-danger/70;

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

  /* button styles - outline */
  .btn-outline-primary {
    @apply bg-transparent text-primary outline-1 -outline-offset-1 outline-primary hover:bg-primary hover:text-secondary;

    &.active {
      @apply bg-primary text-secondary;
    }

    &:disabled {
      @apply bg-transparent text-primary/50 outline-primary/50 hover:bg-transparent;
    }
  }

  .btn-outline-secondary {
    @apply bg-transparent text-secondary outline-1 -outline-offset-1 outline-secondary hover:bg-secondary hover:text-black;

    &:disabled {
      @apply outline-secondary/50;
    }
  }

  .btn-error {
    @apply bg-error text-white hover:bg-erroremphasis;
  }

  .btn-light-primary {
    @apply w-full bg-lightprimary text-primary hover:bg-primaryemphasis hover:text-white dark:bg-darkprimary hover:dark:bg-primary hover:dark:text-white;
  }

  .btn-light-error {
    @apply bg-lighterror text-error hover:bg-error hover:text-white dark:bg-darkerror dark:text-error dark:hover:bg-error dark:hover:text-white;
  }

  .btn-light-warning {
    @apply bg-lightwarning text-warning hover:bg-warning hover:text-white dark:bg-darkwarning dark:text-warning dark:hover:bg-warning dark:hover:text-white;
  }

  .btn-light-success {
    @apply bg-lightsuccess text-success hover:bg-success hover:text-white dark:bg-darksuccess dark:text-success dark:hover:bg-success dark:hover:text-white;
  }

  .btn-light-info {
    @apply bg-lightinfo text-info hover:bg-info hover:text-white dark:bg-darkinfo dark:text-info dark:hover:bg-info dark:hover:text-white;
  }

  .btn-light-secondary {
    @apply bg-lightsecondary text-secondary hover:bg-secondary hover:text-white dark:bg-darksecondary dark:text-secondary dark:hover:bg-secondary dark:hover:text-white;
  }

  /* button sizes */
  .btn-sm {
    @apply !px-2 !py-1 !text-sm;
  }

  .btn-lg {
    @apply !px-4 !py-2 !text-lg;
  }

  /* preview button */
  .preview-btn {
    @apply invisible absolute right-0 left-0 z-[1] mx-auto btn flex w-fit items-center justify-center text-xs group-hover:visible;
  }

  /* button groups */
  .btn-group {
    @apply flex flex-wrap gap-2;

    &.btn-group-horizontal {
      @apply flex-col;
    }
  }

  /* button icons */
  .btn-icon {
    @apply size-[40px];

    &.btn-sm {
      @apply size-[24px];
    }
  }

  .btn-action {
    @apply size-[30px] rounded-full p-1.5 transition-all duration-300 hover:bg-primary/10;

    &.btn-sm {
      @apply size-[24px] p-1;

      i {
        @apply text-[16px];
      }
    }

    i {
      @apply text-[20px] text-primary;
    }

    &:disabled {
      @apply opacity-50;
    }
  }
}