.p-accordionpanel {
  @apply flex flex-col border-b border-surface-200 dark:border-surface-700;
}

.p-accordionheader {
  @apply flex cursor-pointer items-center justify-between bg-surface-0 p-[1.125rem] font-semibold text-surface-500 transition-colors duration-200 disabled:cursor-auto dark:bg-surface-900 dark:text-surface-400;
}

.p-accordionpanel:first-child > .p-accordionheader {
  @apply rounded-se-md rounded-ss-md;
}

.p-accordionpanel:last-child > .p-accordionheader {
  @apply rounded-ee-md rounded-es-md;
}

.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {
  @apply rounded-ee-md rounded-es-md;
}

.p-accordionheader-toggle-icon {
  @apply text-surface-500 dark:text-surface-400;
}

.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
  @apply outline outline-1 outline-offset-[-1px] outline-primary;
}

.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {
  @apply bg-surface-0 text-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled)
  .p-accordionheader:hover
  .p-accordionheader-toggle-icon {
  @apply text-surface-700 dark:text-surface-0;
}

.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {
  @apply bg-surface-0 text-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-accordionpanel:not(.p-disabled).p-accordionpanel-active
  > .p-accordionheader
  .p-accordionheader-toggle-icon {
  @apply text-surface-700 dark:text-surface-0;
}

.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover {
  @apply bg-surface-0 text-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-accordionpanel:not(.p-disabled).p-accordionpanel-active
  > .p-accordionheader:hover
  .p-accordionheader-toggle-icon {
  @apply text-surface-700 dark:text-surface-0;
}

.p-accordioncontent-content {
  @apply bg-surface-0 px-[1.125rem] pb-[1.125rem] pt-0 text-surface-700 dark:bg-surface-900 dark:text-surface-0;
}
