@layer components {
  .accordion {
    $accordion: &;
    @apply flex w-full flex-col divide-y divide-slate-200 overflow-hidden rounded-primary border border-slate-200 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800;

    &-item {
      @apply bg-transparent;
    }

    &-header {
      @apply inline-flex w-full items-center justify-between px-4 py-3 text-sm font-medium text-slate-600 transition-colors duration-150 ease-in-out dark:text-slate-300;

      #{$accordion}-item.active & {
        @apply bg-primary-100 text-primary-500 dark:bg-primary-900/20;
      }
    }

    &-body {
      @apply overflow-hidden transition-all ease-in-out;

      #{$accordion}-item.js-enabled & {
        @apply invisible;
      }

      #{$accordion}-item.active & {
        @apply visible;
      }
    }

    &-icon {
      @apply rotate-0 text-lg text-slate-500 transition-transform duration-150 ease-in-out dark:text-slate-400;

      #{$accordion}-item.active & {
        @apply rotate-90 text-primary-500;
      }
    }

    &-content {
      @apply px-4 py-3 text-sm text-slate-500 dark:text-slate-400;
    }
  }
}
