/* faq-page.css */
.faq-list {
  /* style */
}
.faq-item {
  display: grid;
  background: #fff;
  border-top: 1px solid var(--color-gray-400);
  border-bottom: 1px solid var(--color-gray-400);
}
.faq-item + .faq-item {
  border-top: 0;
}
.faq-item-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 16px;
  -webkit-user-select: none;
  user-select: none;
}
@media all and (max-width: 1087.98px) {
.faq-item-header {
    padding: 8px;
}
  }
.faq-item-header .icons {
    position: relative;
    width: 24px;
    height: 24px;
  }
.faq-item-header .icon-open,
  .faq-item-header .icon-close {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center center;
  }
.faq-question {
  font-weight: 700;
}
.faq-answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0 16px 16px;
}
@media all and (max-width: 1087.98px) {
.faq-answer {
    padding: 0;
}
  }
/* ----- toggle styles */
.faq-item[data-is-state='open'] {
  padding: 0 16px 16px;
}
@media all and (max-width: 1087.98px) {
.faq-item[data-is-state='open'] {
    padding: 0 0 8px;
}
  }
.faq-item[data-is-state='open'] .icon-close {
    opacity: 0;
  }
.faq-item[data-is-state='open'] .icon-open {
    opacity: 1;
  }
@media all and (max-width: 1087.98px) {
.faq-item[data-is-state='open'] .faq-answer {
      padding: 0 8px;
  }
    }
.faq-item[data-is-state='close'] {
  padding: 0 16px;
}
@media all and (max-width: 1087.98px) {
.faq-item[data-is-state='close'] {
    padding: 0;
}
  }
.faq-item[data-is-state='close'] .icon-close {
    opacity: 1;
  }
.faq-item[data-is-state='close'] .icon-open {
    opacity: 0;
  }
/* hover */
@media (any-hover: hover) {
    .faq-item-header:hover .faq-question {
      color: var(--color-primary-900);
    }
}