@import "src/style/vars_mixins";

.faq-container.section-container {
  @include themify(night) {
    @apply bg-dark-default;
  }
}

.faq-container {
  .section {
    cursor: pointer;
  }
  .section :hover {
    @include themify(day) {
      @apply bg-blue-light-powder;
    }

    @include themify(night) {
      @apply bg-gunmetal;
    }
  }
  .section-body {
    padding: 9px 0px;
  }

  .section-title {
    font-weight: bold;
    font-size: 1rem;

    @include themify(day) {
      @apply text-gray-charcoal-010;
    }

    @include themify(night) {
      @apply text-white;
    }
  }

  .section-card {
    padding: 1rem;
  }

  .section-content:hover {
    @apply bg-light-400;
  }

  .section-content {
    font-size: 0.875rem;
    padding: 1rem 2.2rem;
    font-weight: 400;
    display: block;
    @media (max-width: $sm-break) {
      padding: 0.7rem 2.2rem;
    }
  }
}
