List search: Photogallery

.c-list-search {
  position: relative;

  main & {
    grid-column: main;
  }

  h1 {
    margin-bottom: remify(24px);
  }

  .c-switcher {
    max-width: remify(440px);
  }

}

.c-list-search__input {
  margin-bottom: remify(24px);

  input,
  select {
    width: 100%;
    max-width: remify(360px);
    border: 0;
    @include shadow(small);
    background-color: #fff;
    background-image: url('../../images/svgs/ic_search_blue_24px.svg');
    background-repeat: no-repeat;
    background-position: 96% center;
    border-radius: remify(4px);
    height: remify(48px);
    padding: remify(16px);

    @include placeholder {
      // Heydon Pickering suggestion for placeholders
      color: secondary(text, 100);
      font-size: remify(16px);
      font-style: italic;
      font-weight: fw(regular);
    }

    @include min-screen ( remify(960px) ) {
      width: remify(330px);
    }

  }

  select {
    background-image: url(../images/svgs/arrow-down-blue.svg);
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    padding: 0 remify(16px);

    option:disabled {
      font-weight: fw(regular);
      font-style: italic;
    }

    &:-ms-expand {
      display: none;
    }

  }

  @include min-screen ( remify(960px) ) {
    position: absolute;
    margin-top: 0;
    right: 0;
    top: 0;
  }

}

.c-list-search--orders {
  margin-bottom: remify(24px);
}

/*------------------------------------*\
  Inline modifier
\*------------------------------------*/

.c-list-search--inline {
  padding: remify(16px);

  label {
    margin-bottom: 0;
  }

  input,
  select {
    width: auto;
    max-width: initial;
    border: 0;
    box-shadow: none;
    background-image: none;
    border-radius: remify(4px);
    height: auto;
    padding: inherit;
    text-align: left;
  }

  select {
    padding: 0;
  }

  @include min-screen ( bp(tablet-p) ) {
    display: flex;
    align-items: center;
    padding: remify(24px);
    border-radius: remify(4px);
    justify-content: space-between;
  }

  .c-list-search__input {
    display: flex;
    margin-bottom: remify(16px);
    text-align: left;
    position: relative;

    @include min-screen ( bp(tablet-p) ) {
      margin-top: 0;
      margin-bottom: remify(8px);
      right: initial;
      top: initial;
      flex: auto;
    }

    .c-button,
    .c-button--submit {
      margin-top: remify(4px);
      margin-left: remify(16px);
    }
  }

  .middle-text {
    margin-bottom: remify(16px);
    @include min-screen ( bp(tablet-p) ) {
      margin: 0 remify(40px);
      text-align: center;
      display: block;
    }
  }

  .c-list-search__extra {

    @include min-screen ( bp(tablet-p) ) {
      display: flex;
      justify-content: flex-start;
      text-align: left;
      margin-left: auto;
      margin-top: 0;
      margin-bottom: remify(16px);

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

      & img {
        display: block;
      }
    }

    .c-media {
      justify-content: center;

      .c-media__body {
        flex-grow: 0;
      }

    }
  }

}

.c-list-search--center {

  .c-list-search__input {
    justify-content: center;
  }

  .c-list-search__input label {
    width: 100%;
    max-width: remify(680px) ;
  }

}

/*------------------------------------*\
  Shifted top modifier
\*------------------------------------*/

// .c-list-search--shiftedTop {
//   @include min-screen( bp(tablet-p) ) {
//     margin-top: remify(-88px);
//   }
// }

/*------------------------------------*
  News Archive
*------------------------------------*/
.c-list-search--news-archive {

  .c-list-search__input {
    flex: 1;
    display: block;

    @include min-screen(bp(phone-p)) {
      display: flex;
    }
  }

  .c-list-search__input .c-button {
    align-self: center;
  }

  .c-list-search__input .c-list-search__button-search-desktop {
    margin-left: 0;
    margin-top: remify(24px);
    width: 100%;
    
    @include min-screen(bp(phone-p)) {
      display: none;
    }
  }

  label {
    width: 100%;
  }

  .c-list-search__button-search-mobile {
    @include max-screen(bp(phone-p)) {
      display: none;
    }
  }

  .middle-text {
    text-align: center;
  }

}


/*------------------------------------*
  Photogallery
*------------------------------------*/
.c-list-search--photogallery {

  width: 100%;

  label {
    width: 100%;
  }

  select {
    @include min-screen(bp(phablet)) {
      min-width: remify(400px);
    }
  }

}