.hmcts-search-toggle__button {
  @include govuk-font($size: 19, $weight: bold);
  background-color: govuk-colour("black");
  border: none;
  color: govuk-colour("white");
  cursor: pointer;
  display: inline-block;
  padding-top: 12px;
  padding-bottom: 13px;
  padding-left: 0;
  padding-right: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;

  &:after {
    background-repeat: no-repeat;
    background-image: url(#{$hmcts-images-path}icon-search-white.svg);
    content: '';
    display: inline-block;
    height: 20px;
    margin-left: govuk-spacing(2);
    vertical-align: middle;
    width: 20px;
  }

  &:focus {
    @include govuk-focused-text;
    position: relative;
    z-index: 1;
  }

}


.hmcts-search--toggle {

  @include govuk-media-query($until: desktop) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}


// JS enabled
.js-enabled .hmcts-search--toggle {

  @include govuk-media-query($until: desktop) {
    padding-top: 0 !important;
  }

}

.js-enabled .hmcts-search-toggle {
  position: relative;
}


.js-enabled .hmcts-search-toggle__search {

  @include govuk-media-query($from: desktop) {
    max-width: 450px;
    position: absolute;
    right: -15px;
    top: 50px; // Height of nav bar
    width: 450px;
    z-index: 10;
  }

}