{"version":3,"sources":["../../../../src/govuk/components/input/_index.scss"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,uBAAuB;AACvB,wBAAwB;;AAExB;EACE;IACE,8BAA8B;;IAE9B,sBAAsB;IACtB,WAAW;IACX,6BAA6B;IAC7B,aAAa;IACb,yBAAyB;IACzB,yEAAyE;IACzE,gEAAgE;IAChE,yEAAyE;IACzE,mBAAmB;IACnB,yEAAyE;IACzE,gBAAgB;;IAEhB,iDAAiD;IACjD,wBAAgB;YAAhB,gBAAgB;;IAEhB;MACE,qDAAqD;MACrD,+CAA+C;MAC/C,iBAAiB;MACjB,wEAAwE;MACxE,mEAAmE;MACnE,uEAAuE;MACvE,qEAAqE;MACrE,wDAAwD;MACxD,wDAAwD;IAC1D;;IAEA;MACE,YAAY;MACZ,cAAc;MACd,6BAA6B;MAC7B,mBAAmB;IACrB;EACF;;EAEA;;IAEE,SAAS;IACT,wBAAwB;EAC1B;;EAEA;IACE,0BAA0B;EAC5B;;EAEA;IACE,iCAAiC;;IAEjC;MACE,wCAAwC;IAC1C;EACF;;EAEA;IACE,mCAAmC;IACnC,sBAAsB;EACxB;;EAEA,6DAA6D;EAC7D,wEAAwE;;EAExE;IACE,iBAAiB;EACnB;;EAEA;IACE,iBAAiB;EACnB;;EAEA;IACE,iBAAiB;EACnB;;EAEA;IACE,gBAAgB;EAClB;;EAEA;IACE,gBAAgB;EAClB;;EAEA;IACE,iBAAiB;EACnB;;EAEA;IACE,iBAAiB;EACnB;;EAEA;IACE,aAAa;;IAEb;MACE,cAAc;IAChB;;IAEA;MACE,yDAAyD;MACzD,UAAU;IACZ;;IAEA,2DAA2D;IAC3D;MACE,cAAc;;MAEd;QACE,uEAAuE;QACvE,eAAe;MACjB;IACF;EACF;;EAEA;;IAEE,8BAA8B;IAC9B,sBAAsB;IACtB,wDAAwD;IACxD,aAAa;IACb,mBAAmB;IACnB,uBAAuB;IACvB,gCAAgC;IAChC,6BAA6B;IAC7B,yBAAyB;IACzB,yEAAyE;IACzE,4CAA4C;IAC5C,kBAAkB;IAClB,mBAAmB;IACnB,wDAAwD;IACxD,eAAe;IACf,cAAc;IACd,2DAA2D;IAC3D;MACE,cAAc;MACd,YAAY;MACZ,mBAAmB;IACrB;EACF;;EAEA;IACE;MACE,gBAAgB;IAClB;IACA;MACE,eAAe;IACjB;EACF;;EAEA,2DAA2D;EAC3D;IACE;MACE,aAAa;IACf;IACA;MACE,cAAc;IAChB;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../error-message/index\";\n@import \"../hint/index\";\n@import \"../label/index\";\n\n@include govuk-exports(\"govuk/component/input\") {\n  .govuk-input {\n    @include govuk-font($size: 19);\n\n    box-sizing: border-box;\n    width: 100%;\n    height: govuk-px-to-rem(40px);\n    margin-top: 0;\n    padding: govuk-spacing(1);\n    // Setting any background-color makes text invisible when changing colours\n    // to dark backgrounds in Firefox (https://bugzil.la/1335476). As\n    // background-color and color need to always be set together, color should\n    // not be set either\n    border: $govuk-border-width-form-element solid $govuk-input-border-colour;\n    border-radius: 0;\n\n    // Disable inner shadow and remove rounded corners\n    appearance: none;\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\n      // instead of changing `border-width` - this is for consistency with\n      // components such as textarea where we avoid changing `border-width` as\n      // it will change the element size. Also, `outline` cannot be utilised\n      // 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    &:disabled {\n      opacity: 0.5;\n      color: inherit;\n      background-color: transparent;\n      cursor: not-allowed;\n    }\n  }\n\n  .govuk-input::-webkit-outer-spin-button,\n  .govuk-input::-webkit-inner-spin-button {\n    margin: 0;\n    -webkit-appearance: none;\n  }\n\n  .govuk-input[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n\n  .govuk-input--error {\n    border-color: $govuk-error-colour;\n\n    &:focus {\n      border-color: $govuk-input-border-colour;\n    }\n  }\n\n  .govuk-input--extra-letter-spacing {\n    @include govuk-font-tabular-numbers;\n    letter-spacing: 0.05em;\n  }\n\n  // em measurements are based on the point size of the typeface\n  // Extra space is added on the right to allow for the Safari prefill icon\n\n  .govuk-input--width-30 {\n    max-width: 29.5em;\n  }\n\n  .govuk-input--width-20 {\n    max-width: 20.5em;\n  }\n\n  .govuk-input--width-10 {\n    max-width: 11.5em;\n  }\n\n  .govuk-input--width-5 {\n    max-width: 5.5em;\n  }\n\n  .govuk-input--width-4 {\n    max-width: 4.5em;\n  }\n\n  .govuk-input--width-3 {\n    max-width: 3.75em;\n  }\n\n  .govuk-input--width-2 {\n    max-width: 2.75em;\n  }\n\n  .govuk-input__wrapper {\n    display: flex;\n\n    .govuk-input {\n      flex: 0 1 auto;\n    }\n\n    .govuk-input:focus {\n      // Hack to stop focus style being overlapped by the suffix\n      z-index: 1;\n    }\n\n    // Split prefix/suffix onto separate lines on narrow screens\n    @include govuk-media-query($until: mobile) {\n      display: block;\n\n      .govuk-input {\n        // Set max-width to override potential width override class on the input\n        max-width: 100%;\n      }\n    }\n  }\n\n  .govuk-input__prefix,\n  .govuk-input__suffix {\n    @include govuk-font($size: 19);\n    box-sizing: border-box;\n    // Use flexbox to align text within the prefix and suffix\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: govuk-px-to-rem(40px);\n    height: govuk-px-to-rem(40px);\n    padding: govuk-spacing(1);\n    border: $govuk-border-width-form-element solid $govuk-input-border-colour;\n    background-color: govuk-colour(\"light-grey\");\n    text-align: center;\n    white-space: nowrap;\n    // Emphasise non-editable status of prefixes and suffixes\n    cursor: default;\n    flex: 0 0 auto;\n    // Split prefix/suffix onto separate lines on narrow screens\n    @include govuk-media-query($until: mobile) {\n      display: block;\n      height: 100%;\n      white-space: normal;\n    }\n  }\n\n  .govuk-input__prefix {\n    @include govuk-media-query($until: mobile) {\n      border-bottom: 0;\n    }\n    @include govuk-media-query($from: mobile) {\n      border-right: 0;\n    }\n  }\n\n  // Split prefix/suffix onto separate lines on narrow screens\n  .govuk-input__suffix {\n    @include govuk-media-query($until: mobile) {\n      border-top: 0;\n    }\n    @include govuk-media-query($from: mobile) {\n      border-left: 0;\n    }\n  }\n}\n"]}