.accordion {
  @apply w-full font-minecraft text-base;
}

.accordionItem {
  @apply mb-5 border-solid border-[5px] overflow-hidden;
  background-color: var(
    --accordion-item-custom-bg,
    var(--accordion-custom-bg, var(--bg-accordion, white))
  );
  color: var(
    --accordion-item-custom-text,
    var(--accordion-custom-text, var(--text-accordion, black))
  );
  border-image-slice: 3;
  border-image-width: 2;
  border-image-repeat: stretch;
  border-image-outset: 2;
  box-shadow: 2px 2px 0 2px
      var(
        --accordion-item-custom-shadow,
        var(--accordion-custom-shadow, var(--shadow-accordion, #000000))
      ),
    -2px -2px 0 2px
      var(
        --accordion-item-custom-bg,
        var(--accordion-custom-bg, var(--bg-accordion, white))
      );
}

.accordionTrigger {
  @apply w-full flex gap-4 items-center px-4 py-1 text-left cursor-pointer;
  background-color: var(
    --accordion-item-custom-bg,
    var(--accordion-custom-bg, var(--bg-accordion, white))
  );
  color: var(
    --accordion-item-custom-text,
    var(--accordion-custom-text, var(--text-accordion, black))
  );
}

.accordionArrow {
  @apply w-6 h-6 transition-transform duration-300 ease-in-out;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.accordionContent {
  @apply transition-all duration-300 ease-in-out overflow-hidden;
  background-color: var(
    --accordion-item-custom-bg,
    var(--accordion-custom-bg, var(--bg-accordion, white))
  );
  color: var(
    --accordion-item-custom-text,
    var(--accordion-custom-text, var(--text-accordion, black))
  );
}

.accordionContentInner {
  @apply p-4 text-sm border-t border-gray-200;
}
