: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");
}

@utility 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;
}

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

@utility 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;
  }
}

@utility 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;
}