/**
 * @file
 * Styles the FAQ Field accordion, which is built on <details>.
 *
 * Override the custom properties below to match a theme.
 */

.faqfield-accordion {
  --faqfield-accent: #007fff;
  --faqfield-accent-text: #fff;
  --faqfield-border: #ddd;
}

.faqfield-accordion-item {
  margin-block-end: 0.5rem;
}

.faqfield-accordion-question {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--faqfield-accent-text);
  border: 1px solid var(--faqfield-accent);
  border-radius: 3px;
  background: var(--faqfield-accent);
}

.faqfield-accordion-question:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.faqfield-accordion-question::before {
  display: inline-block;
  margin-inline-end: 0.5rem;
  content: "";
  border-inline-start: 6px solid currentColor;
  border-block: 5px solid transparent;
}

.faqfield-accordion-item[open] > .faqfield-accordion-question {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.faqfield-accordion-item[open] > .faqfield-accordion-question::before {
  border-block-start: 6px solid currentColor;
  border-block-end: 0;
  border-inline: 5px solid transparent;
}

.faqfield-accordion .faqfield-question {
  margin: 0;
  color: inherit;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.4;
}

.faqfield-accordion .faqfield-answer {
  padding: 0 0.75rem;
  border: 1px solid var(--faqfield-border);
  border-block-start: 0;
  border-end-end-radius: 3px;
  border-end-start-radius: 3px;
}