:root {
  --accordion-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-chevron-down%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.646%204.646a.5.5%200%200%201%20.708%200L8%2010.293l5.646-5.647a.5.5%200%200%201%20.708.708l-6%206a.5.5%200%200%201-.708%200l-6-6a.5.5%200%200%201%200-.708%22/%3E%3C/svg%3E");
}

@layer components {
  .accordion {
    @apply bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg divide-y divide-gray-200 dark:divide-gray-600;
  }

  .accordion-item {
    &.active {
      .accordion-header {
        &::after {
          @apply rotate-180;
        }
      }
    }
  }

  .accordion-header {
    @apply flex items-center justify-between w-full px-3 py-2 cursor-pointer text-gray-700 dark:text-gray-100;

    &::after {
      @apply content-[""] transition-transform duration-300;
      width: 1em;
      height: 1em;
      -webkit-mask-image: var(--accordion-icon);
      mask-image: var(--accordion-icon);
      background-color: currentColor;
      display: inline-block;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
  }

  .accordion-body {
    @apply px-3 py-2 text-sm text-gray-600 dark:text-gray-200 border-t border-gray-200 dark:border-gray-600;
  }
}