@use "../../vendor/govuk-frontend" as *;

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

  &__icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: govuk-spacing(2);
    fill: currentcolor;
    vertical-align: middle;

    @media screen and (forced-colors: active) {
      fill: windowText;
    }
  }

  &:focus {
    position: relative;
    z-index: 1;
    outline: none;
    color: govuk-functional-colour(focus-text);
    background-color: govuk-functional-colour(focus);
    box-shadow:
      0 -2px govuk-functional-colour(focus),
      0 4px govuk-functional-colour(focus-text);
  }
}

.moj-search--toggle {
  padding: govuk-spacing(3);

  @include govuk-media-query($until: desktop) {
    // stylelint-disable-next-line declaration-no-important
    padding-right: 0 !important;
    // stylelint-disable-next-line declaration-no-important
    padding-left: 0 !important;
  }
}

// JS enabled
.js-enabled .moj-search--toggle {
  @include govuk-media-query($until: desktop) {
    // stylelint-disable-next-line declaration-no-important
    padding-top: 0 !important;
  }
}

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

.js-enabled .moj-search-toggle__search {
  background-color: govuk-colour("black", $variant: "tint-95");

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

/*# sourceMappingURL=_search-toggle.scss.map */