@utility btn {
  @apply flex-space-2 justify-center;
  @apply text-white;
  @apply text-sm font-medium leading-none;
  @apply border border-inherit rounded-lg;
  @apply px-5 py-2.5;
  @apply focus:outline-hidden focus:ring-3;
  @apply cursor-pointer;
  @apply transition-colors;
  @apply appearance-none;

  &:disabled {
    @apply opacity-60 cursor-not-allowed;
  }

  &:active {
    @apply scale-[0.95] transition-transform ease-in-out;
  }

  &.pill {
    @apply rounded-full;
  }

  &.xxs,
  .btn-xxs {
    @apply text-xxs px-1.5 py-1 flex-space-1;
  }

  &.xs,
  &.btn-xs {
    @apply text-xs px-3 py-1.5 flex-space-1;
  }

  &.sm,
  &.btn-sm {
    @apply text-sm px-3 py-2 flex-space-1;
  }

  &.lg,
  &.btn-lg {
    @apply text-base px-5 py-3;
  }

  &.xl,
  &.btn-xl {
    @apply text-lg px-6 py-4;
  }

  &.xxl,
  &.btn-xxl {
    @apply text-xl px-8 py-6;
  }

  &.btn-light {
    @apply text-black;
  }
}

@utility btn-backtop {
  @apply fixed z-10 bottom-8 end-8 translate-y-96 transition-transform;

  &.show {
    @apply translate-y-0;
  }
}

@utility btn-* {
  background-color: --value(--color- *);
  border-color: --value(--color- *);
  color: --value(--text-bg- *);

  &:hover {
    background-color: --value(--color- * -700);
    border-color: --value(--color- * -700);
  }

  &:focus {
    --tw-ring-color: --value(--color- * -300);
  }

  &.gradient {
    background-image: linear-gradient(
      to top left,
      --value(--color- * -500),
      --value(--color- *),
      --value(--color- * -700)
    );

    &:hover {
      background-image: linear-gradient(
        to bottom right,
        --value(--color- * -500),
        --value(--color- *),
        --value(--color- * -700)
      );
    }
  }
}

@utility btn-outline-* {
  background-color: transparent;
  border-color: --value(--color- *) !important;
  color: --value(--color- *);

  @variant hover {
    background-color: --value(--color- *);
    color: --value(--color-bg- *);
  }
}
@utility btn-circle {
  @apply inline-flex items-center justify-center;
  @apply text-white;
  @apply text-sm font-medium leading-none;
  @apply border border-inherit rounded-full;
  @apply p-0;
  @apply focus:outline-hidden focus:ring-3;
  @apply cursor-pointer;
  @apply transition-colors;
  @apply appearance-none;
  @apply w-8 h-8;

  &:disabled {
    @apply opacity-60 cursor-not-allowed;
  }

  &:active {
    @apply scale-[0.95] transition-transform ease-in-out;
  }
}
@utility btn-circle-* {
  background-color: --value(--color- *);
  border-color: --value(--color- *);
  color: --value(--text-bg- *);

  &:hover {
    background-color: --value(--color- * -700);
    border-color: --value(--color- * -700);
  }

  &:focus {
    --tw-ring-color: --value(--color- * -300);
  }
}
@utility btn-circle-gradient-* {
  background-image: linear-gradient(
    to top left,
    --value(--color- * -500),
    --value(--color- *),
    --value(--color- * -700)
  );

  &:hover {
    background-image: linear-gradient(
      to bottom right,
      --value(--color- * -500),
      --value(--color- *),
      --value(--color- * -700)
    );
  }
}

@utility btn-circle-outline-* {
  @apply border focus:ring-0;
  background-color: transparent;
  border-color: --value(--color- *);
  color: --value(--color- *);

  @variant hover {
    background-color: --value(--color- *);
    color: --value(--color-bg- *);
  }
}
@utility btn-circle-sm {
  @apply text-xs w-6 h-6;
}