///////////////////////////////
// !THEME / COMPONENTS / SEARCH
///////////////////////////////

.no-js .unl-search-bg,
.no-webp .unl-search-bg {
  background-image: url('../images/unl-search-bg-640.png');

  @media (min-width: 640px) { background-image: url('../images/unl-search-bg-960.png'); }
  @media (min-width: 960px) { background-image: url('../images/unl-search-bg-1280.png'); }
  @media (min-width: 1280px) { background-image: url('../images/unl-search-bg-1920.png'); }
  @media (min-width: 1920px) { background-image: url('../images/unl-search-bg-2560.png'); }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
    background-image: url('../images/unl-search-bg-1280.png');

    @media (min-width: 640px) { background-image: url('../images/unl-search-bg-1920.png'); }
    @media (min-width: 960px) { background-image: url('../images/unl-search-bg-2560.png'); }
  }

}


.webp .unl-search-bg {
  background-image: url('../images/unl-search-bg-640.webp');

  @media (min-width: 640px) { background-image: url('../images/unl-search-bg-960.webp'); }
  @media (min-width: 960px) { background-image: url('../images/unl-search-bg-1280.webp'); }
  @media (min-width: 1280px) { background-image: url('../images/unl-search-bg-1920.webp'); }
  @media (min-width: 1920px) { background-image: url('../images/unl-search-bg-2560.webp'); }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
    background-image: url('../images/unl-search-bg-1280.webp');

    @media (min-width: 640px) { background-image: url('../images/unl-search-bg-1920.webp'); }
    @media (min-width: 960px) { background-image: url('../images/unl-search-bg-2560.webp'); }
  }

}


.unl .dcf-search-input,
.unl .dcf-search-input:hover,
.unl .dcf-search-input:focus {
  // TODO: differentiate :focus and :hover styles
  border: 1px solid $cream;
}


@include mq(md, max, width) {

  .unl .dcf-search-toggle-wrapper {
    display: none;
  }

}

@include mq(md, min, width) {

  .unl .dcf-search {
    max-width: #{ms(18)}em; // TODO: remove when global nav is added back to header
  }

  .unl .dcf-search-toggle-wrapper {
    display: flex;
  }

  .unl .dcf-search-toggle {
    background-image: linear-gradient(to left, $cream #{ms(6)}em, fade-out($cream,1) #{ms(6)}em);
  }

  .unl .dcf-search-toggle:focus {
    box-shadow: 0 1px $length-em-2 fade-out($color-button-hover,.4);
    outline: none;
  }

  .unl .dcf-search-toggle-label {
    padding: #{ms(-6)}em #{ms(8)}em #{ms(-6)}em #{ms(-2)}em;
  }

}