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


.unl .dcf-search-input:focus {
  box-shadow: 0 0 0 3px $scarlet, 0 0 0 5px $border-color-input-focus !important;
}


.dcf-no-js .unl-search-bg,
.dcf-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'); }
  }

}


.dcf-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'); }
  }

}


@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-label {
    padding: #{ms(-10)}em #{ms(8)}em #{ms(-10)}em #{ms(-2)}em;
  }

}