@layer components {
  body:not(.full-page) .button,
  body.full-page .button {
    @apply transition hover:bg-gray-100 text-sm font-medium cursor-pointer py-1 px-5 bg-white ring-1 ring-gray-300 ring-gray-300 rounded-xl outline-none focus:ring-2 focus:ring focus:ring-orange-400 dark:bg-neutral-900 dark:text-gray-200 dark:ring-[#333] dark:hover:bg-neutral-800;
    position: relative;

    &.button--primary {
      background-color: var(--color-primary);
      @apply hover:!bg-orange-500 text-white font-semibold border-0 focus:outline-none ring-0 ring-offset-2 dark:ring-gray-900 focus:ring-2 focus:ring-orange-400;
    }

    &.button--sm {
      @apply text-sm py-1 px-2 !h-auto !leading-8 rounded-lg;
    }

    &.button--xs {
      @apply text-xs py-1 px-2 !h-auto !leading-6 rounded-lg;
    }

    &.button--danger-outline {
      @apply border-red-200 text-red-600 hover:bg-red-50 dark:border-red-800 dark:text-red-400 dark:hover:bg-red-900/30;
    }

    &.button--danger {
      @apply border-none text-white bg-red-500 hover:bg-red-600 hover:text-white;
    }

    /* Loading state styles */
    &.loading {
      @apply pointer-events-none;
      opacity: 0.8;
    }

    &.loading:before {
      content: "";
      @apply absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(238, 238, 238, 0.8);
      z-index: 30;
      border-radius: inherit;
    }

    &.loading:after {
      content: "";
      @apply absolute border-2 !border-gray-500 !border-t-transparent rounded-full;
      top: 50%;
      left: 50%;
      width: 16px;
      height: 16px;
      margin-top: -8px;
      margin-left: -8px;
      animation: spin 0.3s linear infinite;
      z-index: 31;
    }

    &.button--primary.loading:after {
      @apply border-orange-100 border-t-transparent;
    }

    &[disabled],
    &.button--disabled {
      @apply bg-gray-100 dark:bg-gray-900 dark:ring-gray-800 text-gray-400 dark:text-gray-500 ring-1 ring-offset-0 ring-gray-300;
      filter: saturate(0);
      pointer-events: none;
    }

    &[data-with-notification]{
      &:before{
        content: "";
        width: 8px;
        height: 8px;
        background-color: rgb(255, 59, 59);
        position: absolute;
        top: -1px;
        right: -1px;
        display: block;
        border-radius: 100%;
        box-shadow: 0 0 10px rgb(255, 85, 85);
      }
    }
  }

  /* Keyframes for spinning animation */
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
