{"version":3,"sources":["../../../../src/govuk/components/password-input/_index.scss"],"names":[],"mappings":"AAAA,oBAAoB;;AAEpB,yBAAyB;AACzB,wBAAwB;;AAExB;EACE;IACE,qEAAqE;IACrE,2EAA2E;IAC3E,cAAc;IACd,mDAAmD;;IAEnD;MACE,mBAAmB;;MAEnB,yEAAyE;MACzE,qEAAqE;MACrE,gBAAgB;MAChB,uBAAuB;IACzB;EACF;;EAEA;IACE,0EAA0E;IAC1E,0EAA0E;IAC1E,0EAA0E;IAC1E,0EAA0E;IAC1E,gEAAgE;IAChE;MACE,aAAa;IACf;EACF;;EAEA;IACE,sEAAsE;IACtE,4BAA4B;;IAE5B,0CAA0C;IAC1C,gBAAgB;;IAEhB,uDAAuD;IACvD;MACE,aAAa;IACf;;IAEA;MACE,uEAAuE;MACvE,WAAW;MACX,cAAc;MACd,eAAe;;MAEf,uCAAuC;MACvC,aAAa;MACb,6BAA6B;IAC/B;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../../base\";\n\n@import \"../button/index\";\n@import \"../input/index\";\n\n@include govuk-exports(\"govuk/component/password-input\") {\n  .govuk-password-input__wrapper {\n    // This element inherits styles from .govuk-input__wrapper, including:\n    // - being display: block with contents in a stacked column below the mobile\n    //   breakpoint\n    // - being display: flex above the mobile breakpoint\n\n    @media #{govuk-from-breakpoint(mobile)} {\n      flex-direction: row;\n\n      // The default of `stretch` makes the toggle button appear taller than the\n      // input, due to using box-shadow, which we don't particularly want in\n      // this situation\n      align-items: flex-start;\n    }\n  }\n\n  .govuk-password-input__input {\n    // IE 11 and Microsoft Edge comes with its own password reveal function. We\n    // want to hide it, so that there aren't two controls presented to the user\n    // that do the same thing but aren't in sync with one another. This doesn't\n    // affect the function that allows Edge users to toggle password visibility\n    // by pressing Alt+F8, which cannot be programmatically disabled.\n    &::-ms-reveal {\n      display: none;\n    }\n  }\n\n  .govuk-password-input__toggle {\n    // Add top margin so the button doesn't obscure the input's focus style\n    margin-top: govuk-spacing(1);\n\n    // Remove default margin-bottom from button\n    margin-bottom: 0;\n\n    // Hide the button by default, JS removes this attribute\n    &[hidden] {\n      display: none;\n    }\n\n    @media #{govuk-from-breakpoint(mobile)} {\n      // Buttons are normally 100% wide on mobile, but we don't want that here\n      width: auto;\n      flex-shrink: 0;\n      flex-basis: 5em;\n\n      // Move the spacing from top to the left\n      margin-top: 0;\n      margin-left: govuk-spacing(1);\n    }\n  }\n}\n"]}