@use "00-base/configure" as *;

.ma__search-banner {
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  font-size: 0;
  padding: 30px 0 20px;

  @media ($bp-small-min) {
    height: 1px; // IE11 hack to vertially align content with min-height
    min-height: 800px;
    padding: 20px 0;
  }

  .page-content &:last-child {
    margin-bottom: -45px; // compensating for main-content margin

    @media ($bp-large-min) {
      margin-bottom: -60px; // compensating for main-content margin
    }
  }


  &:after {
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
  }

  &__container {

    @include ma-container;
    padding-bottom: 25px;
    font-size: $fonts-medium;
    position: relative;
    z-index: 2;

    @media ($bp-small-min) {
      padding-bottom: 90px;
    }
  }

  .ma__page-intro {
    text-align: center;

    h1 {

      @media ($bp-large-min) {
        font-size: $fonts-10xlarge;
      }
    }

    &__sub-title {

      @include ma-h3;
      padding: 0;
      width: 100%;
    }
  }

  // backward compatible with v5.6 - title was replaced with Page Intro

  &__title {
    margin-bottom: .4em;
    text-align: center;

    @media ($bp-large-min) {
      font-size: $fonts-10xlarge;
    }
  }

  // backward compatible with v5.6 - intro was replaced with Page Intro

  &__intro {

    @include ma-h3;
    margin-bottom: .5em;
    text-align: center;
  }

  &__form {
    display: flex;
    margin: 0 auto 60px;
    max-width: 746px;
  }

  &__input {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    height: 40px;
    margin-right: 2px;

    @media ($bp-small-min) {
      height: 60px;
    }

    @media ($bp-medium-min) {
      height: 90px;
    }

    label {

      @include ma-visually-hidden;
    }

    input {
      border: none;
      font-size: $fonts-large;
      height: 100%;
      width: 100%;

      @media ($bp-small-min) {
        font-size: $fonts-2xlarge;
      }
    }
  }

  &__button {

    @include ma-button-reset;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    font-size: $fonts-smaller;
    letter-spacing: $letter-spacing-large;
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: uppercase;
    transition: color .5s, fill .5s, background .5s;

    @media ($bp-small-min) {
      height: 60px;
      padding-left: 20px;
      padding-right: 20px;
    }

    @media ($bp-medium-min) {
      height: 90px;
      padding-left: 30px;
      padding-right: 30px;
    }

    & > span {
      display: inline-block;
      margin-right: 5px;
      vertical-align: middle;

      @media ($bp-small-max) {

        @include ma-visually-hidden;
      }
    }

    & > svg {
      display: inline-block;
      height: 20px;
      transition: color .5s, fill .5s, background .5s;
      vertical-align: middle;
      width: 20px;

      @media ($bp-small-min) {
        height: 30px;
        width: 30px;
      }
    }
  }

  &__links {
    margin-left: auto;
    margin-right: auto;
    max-width: 706px;

    .ma__comp-heading {
      font-size: $fonts-medium;
      letter-spacing: $letter-spacing-large;
      margin-bottom: .75em;
      text-transform: uppercase;

      &:after {
        //left: calc(50% - 42px); // half width -- only necessary if not centered.
        left: calc(50%);
        width: 84px;
      }
    }

    .ma__helpful-links__item {
      padding: 5px 0;
    }

    .ma__content-link {
      font-size: $fonts-large;

      span {
        border-bottom-width: 1px;
        transition: border .3s ease;

        &:hover {
          border-bottom-width: 3px;
        }
      }
    }
  }

  .ma__banner-credit {

    @include ma-container;
    z-index: 3;
    width: 100%;
  }

  // Start backward compatible with v5.7 - converted image-credit to new Banner Credit molecule

  &__image-credit {

    @include ma-container;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 3;

    @media ($bp-small-max) {
      position: relative;
      left: auto;
      transform: none;
      bottom: 0;
    }

  }

  &__credits-container {
    padding: 8px 30px;
    position: relative;
  }

  &__icon {
    position: absolute;
      top: 0;
      left: 0;

    & > svg {
      height: 27px;
      width: 20px;
    }
  }

  &__image-name {
    font-size: $fonts-xsmall;
    line-height: 1.125rem;
  }

  &__image-author {
    font-size: $fonts-2xsmall;
    line-height: 1.125rem;
  }
  // End backward compatible with v5.7 - converted image-credit to new Banner Credit molecule

}

//theme

.ma__search-banner {
  background-position: center center;
  background-size: cover;
  position: relative;

  &:after {
    background-color: rgba($c-black, .6);
  }

  &__container {

    @include ma-container;
  }

  .ma__page-intro {

    h1 {
      color: $c-font-inverse;
      font-weight: $fonts-lighter;
    }

    &__sub-title {
      color: $c-font-inverse;
      font-weight: $fonts-light;
    }
  }

  // backward compatible with v5.6 - title was replaced with Page Intro

  &__title {
    color: $c-font-inverse;
    font-weight: $fonts-lighter;
  }

  // backward compatible with v5.6 - intro was replaced with Page Intro

  &__intro {
    color: $c-font-inverse;
    font-weight: $fonts-light;
  }

  &__input {

    input {
      background-color: rgba(255, 255, 255, 0.75);
      font-weight: $fonts-lighter;
    }

    &::-webkit-input-placeholder {
      color: $c-font-medium;
      font-weight: $fonts-lighter;
      font-style: italic;
    }

    &:-moz-placeholder { /* Firefox 18- */
      color: $c-font-medium;
      font-weight: $fonts-lighter;
      font-style: italic;
    }

    &::-moz-placeholder {  /* Firefox 19+ */
      color: $c-font-medium;
      font-weight: $fonts-lighter;
      font-style: italic;
    }

    &:-ms-input-placeholder {
      color: $c-font-medium;
      font-weight: $fonts-lighter;
      font-style: italic;
    }
  }

  &__button {
    background-color: rgba(255, 255, 255, 0.75);
    color: $c-font-base;
    font-weight: $fonts-bold;

    & > svg {
      fill: $c-font-dark;
    }

    &:hover {
      background-color: $c-primary-alt;
      color: $c-font-inverse;

      & > svg {
        fill: $c-font-inverse;
      }
    }
  }

  &__links {

    .ma__comp-heading {
      color: $c-font-inverse;
    }

    .ma__decorative-link a {
      color: $c-font-inverse;
      font-weight: $fonts-light;

      &:hover {
        border-bottom-color: rgba($c-font-inverse, .5);
      }

      & svg {
        fill: rgba($c-font-inverse, .5);
      }
    }
  }

  .ma__banner-credit {

    &__icon {

      & > svg {
        fill: $c-font-inverse;
      }
    }

    &__image-name {
      color: rgba($c-font-inverse,.9);
    }

    &__image-author {
      color: rgba($c-font-inverse, .5);
    }
  }

  &__icon {

    & > svg {
      fill: $c-font-inverse;
    }
  }

  &__image-name {
    color: rgba($c-font-inverse,.9);
    font-weight: $fonts-light;
  }

  &__image-author {
    color: rgba($c-font-inverse, .5);
    font-weight: $fonts-light;
  }
  // End backward compatible with v5.7 - converted image-credit to new Banner Credit molecule
}