{"version":3,"sources":["../../../../src/digitalmarketplace/components/search-box/_index.scss"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D;EACE,2BAA2B;EAC3B,sBAAsB;EACtB,8EAA8E;EAC9E,8BAA8B;EAC9B,2EAA2E;EAC3E,uBAAuB;AACzB;;AAEA;EACE,iBAAiB;EACjB,uBAAuB;;EAEvB;IACE,kBAAkB;IAClB,mBAAmB;EACrB;;EAEA;IACE,yDAAyD;IACzD,cAAc;IACd,yBAAyB;IACzB,iCAAiC;;IAEjC;MACE,yDAAyD;MACzD,SAAS;IACX;;IAEA;MACE,kBAAkB;MAClB,UAAU;MACV,QAAQ;MACR,WAAW;MACX,SAAS;MACT,8BAA8B;MAC9B,mCAAmC;IACrC;;IAEA,oDAAoD;IACpD,qEAAqE;IACrE;MACE,yBAAyB;IAC3B;EACF;;EAEA;IACE,wDAAwD;IACxD,uDAAuD;IACvD,sBAAsB;IACtB,WAAW;IACX,mBAAmB;IACnB,SAAS;;IAET,YAAY;IACZ,yEAAyE;IACzE,gBAAgB,EAAE,oDAAoD;IACtE,iCAAiC;IACjC,wBAAwB;IACxB,qBAAqB;IACrB,gBAAgB;;IAEhB,2GAA2G;IAC3G;;MAEE,UAAU;IACZ;;IAEA;MACE,qDAAqD;MACrD,+CAA+C;MAC/C,iBAAiB;MACjB,8GAA8G;MAC9G,2FAA2F;MAC3F,wDAAwD;IAC1D;EACF;;EAEA;IACE,kBAAkB;IAClB,kBAAkB;IAClB,mBAAmB;IACnB,UAAU;IACV,gBAAgB;IAChB,SAAS;IACT,gBAAgB;IAChB,2ZAA2Z;IAC3Z,4BAA4B;IAC5B,2BAA2B;IAC3B,wCAAwC;IACxC,oBAAoB;IACpB,eAAe;;IAEf;MACE,UAAU;MACV,qDAAqD;MACrD,+CAA+C;MAC/C,iBAAiB;MACjB,+GAA+G;MAC/G,gDAAgD;MAChD,2FAA2F;MAC3F,kFAAkF;IACpF;;IAEA;MACE,SAAS;IACX;EACF;;EAEA;IACE,cAAc;IACd,WAAW;IACX,iCAAiC;EACnC;;EAEA,0DAA0D;EAC1D;IACE,mBAAmB;IACnB,kBAAkB;IAClB,mBAAmB;EACrB;;EAEA;IACE,SAAS;EACX;;EAEA;IACE;MACE,eAAe;;MAEf,uDAAuD;MACvD,0BAA0B;MAC1B;QACE,gBAAgB;MAClB;IACF;;IAEA;MACE,4BAA4B;MAC5B,uCAAuC;;MAEvC;QACE,oDAAoD;MACtD;IACF;;IAEA;MACE;QACE,mCAAmC;MACrC;IACF;EACF;;EAEA;IACE;MACE,4BAA4B;MAC5B,sCAAsC;;MAEtC;QACE,mDAAmD;MACrD;IACF;;IAEA;MACE,qBAAqB;;MAErB,6BAA6B;MAC7B;QACE,uBAAuB;MACzB;IACF;EACF;;EAEA;IACE;MACE,SAAS;IACX;EACF;;EAEA;IACE;MACE,kBAAkB;MAClB,SAAS;MACT,UAAU;MACV,eAAe;IACjB;EACF;;EAEA;IACE,aAAa;IACb,WAAW;IACX,YAAY;IACZ,eAAe;IACf,UAAU;IACV,YAAY;IACZ,gBAAgB;IAChB,SAAS;IACT,sCAAsC;IACtC,4EAA4E;IAC5E,4BAA4B;IAC5B,0BAA0B;IAC1B,oBAAoB;;IAEpB;MACE,eAAe;MACf,qDAAqD;MACrD,iBAAiB;MACjB,sDAAsD;IACxD;;IAEA;;MAEE,mDAAmD;IACrD;;IAEA;MACE,aAAa;IACf;;IAEA;MACE,aAAa;IACf;;IAEA;MACE;QACE,cAAc;MAChB;IACF;EACF;AACF","file":"_index.scss","sourcesContent":["// Taken from the GOVUK Design System site search stylesheet\n@function encode-hex($hex) {\n  // Turn colour into a string\n  $output: inspect($hex);\n  // Slice the '#' from the start of the string so we can add it back on encoded.\n  $output: str-slice($output, 2);\n  // Add the '#' back on the start, but as an encoded character for embedding.\n  @return \"%23\" + $output;\n}\n\n@include digitalmarketplace-exports(\"digitalmarketplace/component/search-box\") {\n  $input-size: 40px;\n  $large-input-size: 50px;\n\n  .dm-search-box {\n    position: relative;\n    margin-bottom: 30px;\n  }\n\n  .dm-search-box__label {\n    @include govuk-font($size: 19, $line-height: $input-size);\n    display: block;\n    color: $govuk-text-colour;\n    background: govuk-colour(\"white\");\n\n    h1 {\n      @include govuk-font($size: 19, $line-height: $input-size);\n      margin: 0;\n    }\n\n    .js-enabled & {\n      position: absolute;\n      z-index: 1;\n      top: 2px;\n      bottom: 2px;\n      left: 2px;\n      padding-left: govuk-spacing(3);\n      color: $govuk-secondary-text-colour;\n    }\n\n    // match label colour with the label component colour\n    // when javascript is enabled and inline_label option  is set to false\n    .js-enabled .dm-search-box--separate-label & {\n      color: $govuk-text-colour;\n    }\n  }\n\n  .dm-search-box__input[type=\"search\"] {\n    // overly specific to prevent some overrides from outside\n    @include govuk-font($size: 19, $line-height: (28 / 19));\n    box-sizing: border-box;\n    width: 100%;\n    height: $input-size;\n    margin: 0;\n\n    padding: 6px;\n    border: $govuk-border-width-form-element solid $govuk-input-border-colour;\n    border-radius: 0; // otherwise iphones apply an automatic border radius\n    background: govuk-colour(\"white\");\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n\n    // the .focus class is added by JS and ensures that the input remains above the label once clicked/filled in\n    &:focus,\n    &.focus {\n      z-index: 2;\n    }\n\n    &:focus {\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n      // Ensure outline appears outside of the element\n      outline-offset: 0;\n      // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`\n      // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.\n      box-shadow: inset 0 0 0 $govuk-border-width-form-element;\n    }\n  }\n\n  .dm-search-box__submit {\n    position: relative;\n    width: $input-size;\n    height: $input-size;\n    padding: 0;\n    overflow: hidden;\n    border: 0;\n    border-radius: 0;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='#{encode-hex(govuk-colour('white'))}'%3E%3C/path%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: $input-size $input-size;\n    text-indent: -5000px;\n    cursor: pointer;\n\n    &:focus {\n      z-index: 2;\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n      // Ensure outline appears outside of the element\n      outline-offset: 0;\n      // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`.\n      // This ensures consistency with the search input\n      // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.\n      box-shadow: inset 0 0 0 $govuk-border-width-form-element * 2 govuk-colour(\"black\");\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n    }\n  }\n\n  .dm-search-box__item-wrapper {\n    display: table;\n    width: 100%;\n    background: govuk-colour(\"white\");\n  }\n\n  // general class applied to search input and button wrapper\n  .dm-search-box__item {\n    display: table-cell;\n    position: relative;\n    vertical-align: top;\n  }\n\n  .dm-search-box__submit-wrapper {\n    width: 1%;\n  }\n\n  .dm-search-box--on-govuk-blue {\n    .dm-search-box__input {\n      border-width: 0;\n\n      // no need for black outline as there is enough contrast\n      // with the blue background\n      &:focus {\n        box-shadow: none;\n      }\n    }\n\n    .dm-search-box__submit {\n      color: govuk-colour(\"white\");\n      background-color: govuk-colour(\"black\");\n\n      &:hover {\n        background-color: lighten(govuk-colour(\"black\"), 5%);\n      }\n    }\n\n    .js-enabled & {\n      .dm-search-box__label {\n        color: $govuk-secondary-text-colour;\n      }\n    }\n  }\n\n  .dm-search-box--on-white {\n    .dm-search-box__submit {\n      color: govuk-colour(\"white\");\n      background-color: govuk-colour(\"blue\");\n\n      &:hover {\n        background-color: lighten(govuk-colour(\"blue\"), 5%);\n      }\n    }\n\n    .dm-search-box__input[type=\"search\"] {\n      border-right-width: 0;\n\n      // add the border once focused\n      &:focus {\n        border-right-width: 2px;\n      }\n    }\n  }\n\n  .dm-search-box--no-border {\n    .dm-search-box__input[type=\"search\"] {\n      border: 0;\n    }\n  }\n\n  .dm-search-box--separate-label {\n    .dm-search-box__label {\n      position: relative;\n      top: auto;\n      left: auto;\n      padding-left: 0;\n    }\n  }\n\n  .search-toggle {\n    display: none;\n    width: 36px;\n    height: 30px;\n    margin: -46px 0;\n    padding: 0;\n    float: right;\n    overflow: hidden;\n    border: 0;\n    background-color: govuk-colour(\"blue\");\n    background-image: image-url(\"govuk_publishing_components/search-button.png\");\n    background-repeat: no-repeat;\n    background-position: 0 50%;\n    text-indent: -5000px;\n\n    &:focus {\n      border-width: 0;\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n      outline-offset: 0;\n      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;\n    }\n\n    &:focus,\n    &:hover {\n      background-color: lighten(govuk-colour(\"blue\"), 5%);\n    }\n\n    &.js-hidden {\n      display: none;\n    }\n\n    @include govuk-media-query($from: tablet) {\n      display: none;\n    }\n\n    @include govuk-media-query($until: tablet) {\n      .js-enabled & {\n        display: block;\n      }\n    }\n  }\n}\n"]}