// * FAQ
// *******************************************************************************

@use '../_bootstrap-extended/include' as light;
@use '../_bootstrap-extended/include-dark' as dark;
@import '../_custom-variables/pages';

.faq-header {
  .input-wrapper {
    position: relative;
    width: 100%;
    max-width: 450px;
  }

  @include light.media-breakpoint-down(sm) {
    .input-wrapper {
      max-width: calc(100% - 30%);
    }
  }
}

.faq-nav-icon {
  font-size: 1.125rem;
}

.faq-banner-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: left;
  border-radius: light.$border-radius;
}

@if $enable-light-style {
  .light-style {
    .bg-faq-section {
      background-color: light.$gray-60;
    }
    .faq-header {
      .input-wrapper {
        .input-group-text,
        .form-control {
          background-color: light.$card-bg;
        }
      }
    }
  }
}

@if $enable-dark-style {
  .dark-style {
    .bg-faq-section {
      background-color: dark.$gray-60;
    }
    .faq-header {
      .input-wrapper {
        .input-group-text,
        .form-control {
          background-color: dark.$card-bg;
        }
      }
    }
  }
}