@use '../settings/variables' as v;
@use '../settings/mixins' as m;

.qpp-c-page-header {
  width: 100%;
  height: auto;

  .qpp-c-page-header__main-content {
    background: linear-gradient(-45deg, rgb(46, 116, 187) 0%, v.$blue-80 100%);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    padding-top: v.$spacing-32;
    padding-bottom: v.$spacing-32;
  }

  // TODO: responsively adjust padding for small screens

  // TODO: figure out way to adjust padding for various page layouts
  // e.g. with and without sidenav

  .qpp-c-breadcrumbs {
    flex: auto;
    order: -1;
    margin-bottom: v.$spacing-40;
  }

  .qpp-c-page-header__title {
    @include m.h1;
    color: v.$white;
    flex: auto;
    font-family: v.$font-rubik;
    margin-bottom: 0;
    margin-top: v.$spacing-8;
  }

  .qpp-c-page-header__eyebrow {
    color: v.$white;
    flex: auto;
    font-family: v.$font-rubik;
    font-size: v.$font-size-14;
    font-weight: v.$font-regular;
    line-height: v.$line-height-md;
    order: -1;
    margin-bottom: 0;
    margin-top: v.$spacing-8;
    text-transform: uppercase;
  }

  .qpp-c-page-header__description {
    color: v.$white;
    flex: auto;
    font-family: v.$font-rubik;
    font-size: v.$font-size-16;
    margin-bottom: v.$spacing-16;
    margin-top: v.$spacing-16;

    &--no-margin:not(:last-of-type) {
      margin-bottom: 0;
    }
  }

  .qpp-c-page-header__subheader {
    border-bottom: 1px solid v.$gray-10;
    background-color: v.$white;
    padding-top: v.$spacing-24;
    padding-bottom: v.$spacing-24;
  }

  &--tertiary {
    .qpp-c-breadcrumbs {
      margin-bottom: v.$spacing-20;
    }

    .qpp-c-page-header__title {
      margin-top: 0;
      color: v.$gray-80;
    }

    .qpp-c-page-header__main-content {
      background: none;
      padding-bottom: 0;

      &::after {
        content: '';
        display: block;
        width: 119px;
        height: 12px;
        background: linear-gradient(
          -90deg,
          rgb(46, 116, 187) 0%,
          rgb(7, 61, 116) 89%,
          rgb(0, 51, 102) 100%
        );
        border-radius: 0;
        margin-top: v.$spacing-20;
      }
    }

    .qpp-c-page-header__description {
      color: v.$gray-80;
      margin-bottom: 0;
    }
  }
}