/* Tailwind version */
@layer components {
  .rating {
    @apply flex items-center;

    .stars-wrap {
      @apply flex items-center m-0 p-0;
    }

    .stars {
      @apply relative flex leading-none;
    }

    .stars .stars-inactive {
      @apply relative flex flex-row text-black/25 gap-1;
    }

    .stars .stars-active {
      @apply absolute left-0 top-0 flex flex-row whitespace-nowrap overflow-hidden z-[1] text-amber-500 pointer-events-none gap-1;
    }

    .stars i {
      @apply text-base;
    }

    .stars-wrap.stars-lg .stars i {
      @apply text-xl;
    }
  }

  .stars-description {
    @apply text-xs text-gray-600;
  }
}