:root {
  --tus-acc-highlight: var(--ast-global-color-0, #2ed9c3);
  --tus-acc-text: var(--ast-global-color-2, #f9f9f9);
  --tus-acc-hover-bg: var(--ast-global-color-6, #2c2c2c);
  --tus-acc-bg: var(--ast-global-color-7, #111111);
  --tus-acc-border: var(--ast-global-color-6, #2c2c2c);
}

.tus-custom-accordion {
  margin-bottom: 10px;
  border: 1px solid var(--tus-acc-border);
  border-width: 1px 0 1px 0;
}

.tus-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1rem 0;
  margin: 0;
}

.tus-accordion-header svg {
  width: 1rem;
  height: 1rem;
}

.tus-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

.tus-accordion-content.active {
  grid-template-rows: 1fr;
}

.tus-accordion-wrap {
  overflow: hidden;
}

/* Icon Toggling */
.tus-accordion-header .expand-icon,
.tus-accordion-header .collapse-icon {
  display: flex;
  align-items: center;
  color: var(--tus-acc-highlight);
}
/* Fill the SVG with the current color */
.tus-accordion-header .expand-icon svg,
.tus-accordion-header .collapse-icon svg {
  fill: currentColor;
}

/* Default: Show expand, hide collapse */
.tus-accordion-header .collapse-icon {
  display: none;
}
.tus-accordion-header .expand-icon {
  display: block;
}

/* Active: Hide expand, show collapse */
.tus-accordion-header.active .collapse-icon {
  display: block;
}
.tus-accordion-header.active .expand-icon {
  display: none;
}

@media (max-width: 768px) {
  .tus-accordion-wrap {
    overflow-x: auto;
  }
}