.forward .aria-busy {
  @apply !w-full;
}

button, input[type="submit"] {
  @apply cursor-pointer;
}

.btn {
  @apply cursor-pointer inline-flex items-center justify-center px-4 py-2 border border-transparent sm:text-base text-sm sm:font-medium font-semibold rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn--primary {
  @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}

.btn--green {
  @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn--destructive {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn--danger {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn--primary-gradient {
  @apply bg-gradient-to-r from-primary-600 to-purple-600 text-white hover:from-primary-700 hover:to-purple-700 transition-all duration-200 font-medium;
}

.btn--accent {
  @apply bg-accent-600 text-white hover:bg-accent-700 focus:ring-accent-500;
}

.btn--icon-right {
  padding-right: 2.2em;
}

.btn--more-arrow-content {
  @apply rounded-xl divide-y divide-primary-500;
  @apply bg-gradient-to-r from-primary-600 to-purple-600 text-white p-3 min-h-fit absolute w-72 bg-white rounded-lg shadow-lg;

  inset-inline-start: -2em;
  bottom: 100%;
  right: 0;
  margin-bottom: 0.5rem;
  z-index: 9999;
}

.btn--more-arrow-content-item {
  @apply p-1 rounded-md my-1 block w-full text-left;

  &:hover {
    @apply bg-primary-500;
  }
}

.btn--more-arrow::before {
  filter: invert(1);
  content: "";
  width: 100%;
  height: 100%;
  margin-top: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url("/assets/svg/down-caret-a9e8669f.svg");
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
  /* background: center / 62% no-repeat; */
}

.btn--secondary {
  @apply bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-800 focus:ring-gray-500;
}

.btn--outline {
  @apply bg-transparent border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
}

.btn--large {
  @apply px-6 py-3 text-lg;
}

.btn--small {
  @apply px-3 py-1.5 text-sm;
}

.as-icon {
  @apply size-8 bg-gray-100 rounded-full dark:bg-gray-800 flex items-center justify-center p-1;
}

.btn--just-icon {
  @apply !size-9 dark:text-white flex rounded-full dark:bg-primary-400 items-center p-1
  
}

.btn--just-icon button {
  @apply !flex !items-center !justify-center;
}