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


.ma__search-box-with-links {
  max-width: $max-width;
  padding-left: 20px;
  padding-right: 20px;
  justify-content: space-between;
  align-items: stretch;
  margin: 60px auto 60px auto;

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

  @media ($bp-large-min) {
    padding-left: 40px;
    padding-right: 40px;
  }

  @media ($bp-small-max) {
    margin: 40px auto;
  }

  h3 {
    padding: 0 !important;

    &::after {
      content: none !important;
    }
  }

  &__form {
    padding: 40px;
    background-color: $c-primary;
    flex-basis: 60%;

    @media (max-width: 910px) {
      padding: 30px;
    }

    @media ($bp-small-max) {
      padding: 20px;
    }

    h3 {
      color: $c-font-inverse;
      margin-bottom: 30px;
      display: block;
    }

    @media (max-width: 910px) {

      h3 {
        margin-bottom: 20px;
      }
    }

    .ma__keyword-search {
      display: flex;
      max-width: $bp-s;
      margin-bottom: 10px;

      input {
        flex-grow: 1;
        flex-shrink: 1;
        border-right: 0;

        &::placeholder {
          color: $c-atlantic-gray;
        }
      }

      button {
        flex-grow: 0;
        flex-shrink: 0;
      }

    }

    .ma__search-box-with-links__footer {
      color: $c-font-inverse;

      a {

        &:link,
        &:visited,
        &:hover,
        &:active,
        &:focus {
          color:$c-white;
        }

        &:hover,
        &:active,
        &:focus {
          border-bottom-color: rgba($c-white, 0.5);
        }
      }
    }

    @media ($bp-small-max) {

      .ma__button-search__label {

        @include ma-visually-hidden;
      }
    }
  }

  &__secondary {
    flex-basis: 40%;
    background-color: $c-platinum-gray;
    padding: 40px;

    @media (max-width: 910px) {
      padding: 30px;
    }

    @media ($bp-small-max) {
      padding: 20px;
    }

    h3 {
      margin-bottom: 20px;
    }

    ul {
      display: block;
      padding: 0;
      margin-bottom: 0px;
    }

    li {
      list-style: none;
      margin: 0 45px 10px 0;

      @media ($bp-large-max) {
        margin: 0 20px 10px 0;
      }

      &:last-child {
        margin-bottom: 0;
      }

    }

    svg {
      margin-right: 10px;
    }
  }
}