:root,
:host {
  --spacing: 4px;
}

details>*, .faq_inner {
  padding-bottom: calc(var(--spacing) * 8);
  margin: 0;
}

.faqs_accordion, details {

  &[open] summary:after, .faq_toggle.expanded:after {
    transform: rotate(0);
  }

  .faq_toggle, summary {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    font-family: Roboto Slab, serif;
    color: #00387d;
    padding-block: calc(var(--spacing) * 6);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);

    &::after {
      transform: rotate(180deg);
      margin-left: auto;
      display: block;
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
      --tw-translate-y: 2px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 15L12 9L6 15' stroke='%2300387D' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
      --tw-content: '';
      background-size: cover;
      content: var(--tw-content);
      flex-shrink: 0;
    }
  }

  & > li{
    margin: 0 !important;
    padding: 0 !important;
  }

  ~details, li~li {
    border-top: 1px solid #d1d1d1;
    margin: 0;
  }
}