{"version":3,"sources":["../../../../src/nhsuk/components/input/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/objects/input-wrapper\";\n@forward \"../error-message\";\n@forward \"../hint\";\n@forward \"../label\";\n\n////\n/// Input component\n///\n/// @group components/input\n////\n\n@include nhsuk-exports(\"nhsuk/components/input\") {\n  .nhsuk-input {\n    box-sizing: border-box;\n\n    width: 100%;\n    height: nhsuk-px-to-rem(40px);\n    margin-top: 0;\n    padding: nhsuk-px-to-rem(nhsuk-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: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;\n    border-radius: 0;\n\n    // Disable inner shadow and remove rounded corners\n    appearance: none;\n\n    @include nhsuk-font($size: 19);\n\n    // Increase left padding with prefix\n    .nhsuk-input-wrapper:has(.nhsuk-input-wrapper__prefix) & {\n      padding-left: nhsuk-px-to-rem(nhsuk-spacing(1) + $nhsuk-border-width-form-element);\n    }\n\n    // Increase right padding with suffix\n    .nhsuk-input-wrapper:has(.nhsuk-input-wrapper__suffix) &:not([type=\"search\"]) {\n      padding-right: nhsuk-px-to-rem(nhsuk-spacing(1) + $nhsuk-border-width-form-element);\n    }\n\n    &:focus {\n      @include nhsuk-focused-input;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      color: inherit;\n      background-color: transparent;\n      cursor: not-allowed;\n    }\n\n    &::placeholder {\n      opacity: 1; // Fixes low contrast of placeholder text in firefox\n      color: nhsuk-colour(\"grey-1\");\n    }\n\n    // Hide input clear button (IE)\n    &::-ms-clear {\n      display: none;\n    }\n  }\n\n  // Reset custom appearance\n  .nhsuk-input[type=\"number\"],\n  .nhsuk-input[type=\"search\"] {\n    appearance: textfield;\n  }\n\n  // Hide input icons and buttons (Webkit, Blink)\n  .nhsuk-input[type=\"number\"]::-webkit-inner-spin-button,\n  .nhsuk-input[type=\"number\"]::-webkit-outer-spin-button,\n  .nhsuk-input[type=\"search\"]::-webkit-search-decoration,\n  .nhsuk-input[type=\"search\"]::-webkit-search-results-button,\n  .nhsuk-input[type=\"search\"]::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  // Only hide cancel button when placeholder would be shown\n  .nhsuk-input[type=\"search\"]:placeholder-shown::-webkit-search-cancel-button {\n    display: none;\n  }\n\n  // Note: This is a non-standard CSS feature and will not do anything in Firefox\n  // https://bugzilla.mozilla.org/show_bug.cgi?id=1417753\n  .nhsuk-input[type=\"search\"]::-webkit-search-cancel-button {\n    align-self: center;\n\n    width: nhsuk-px-to-rem($nhsuk-icon-size);\n    height: nhsuk-px-to-rem($nhsuk-icon-size);\n    margin: 0;\n\n    pointer-events: auto;\n\n    opacity: 1;\n\n    background: nhsuk-image-url(\"nhsuk-icon-cross.svg\") no-repeat;\n    background-size: nhsuk-px-to-rem($nhsuk-icon-size) nhsuk-px-to-rem($nhsuk-icon-size);\n\n    cursor: pointer;\n\n    appearance: none;\n\n    // Where possible use the cross as a mask instead. This lets us use\n    // currentcolor, increasing the contrast of the image and matching the\n    // user's prefered foreground colour in e.g. forced colors mode.\n    // We test for `mask-position` rather than `mask-image` because of a false\n    // positive in Edge 17.\n    @supports (mask-position: initial) {\n      background: currentcolor;\n      mask: nhsuk-image-url(\"nhsuk-icon-cross.svg\") no-repeat;\n      mask-size: nhsuk-px-to-rem($nhsuk-icon-size) nhsuk-px-to-rem($nhsuk-icon-size);\n\n      // currentcolor doesn't seem to be computed correctly in forced colors\n      // mode so force the background color to match the system link color\n      // (matching the text in the link)\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        background: ButtonText;\n      }\n    }\n  }\n\n  .nhsuk-input--error {\n    border-color: $nhsuk-error-colour;\n  }\n\n  // Large inputs\n\n  .nhsuk-input--large {\n    height: nhsuk-px-to-rem(48px);\n    padding-right: nhsuk-px-to-rem(nhsuk-spacing(2));\n    padding-left: nhsuk-px-to-rem(nhsuk-spacing(2));\n    @include nhsuk-font($size: 22);\n\n    // Increase left padding with prefix\n    .nhsuk-input-wrapper:has(.nhsuk-input-wrapper__prefix) & {\n      padding-left: nhsuk-px-to-rem(nhsuk-spacing(2) + $nhsuk-border-width-form-element);\n    }\n\n    // Increase right padding with suffix\n    .nhsuk-input-wrapper:has(.nhsuk-input-wrapper__suffix) &:not([type=\"search\"]) {\n      padding-right: nhsuk-px-to-rem(nhsuk-spacing(2) + $nhsuk-border-width-form-element);\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      height: nhsuk-px-to-rem(60px);\n    }\n  }\n\n  .nhsuk-input--large[type=\"search\"]::-webkit-search-cancel-button {\n    width: nhsuk-px-to-rem($nhsuk-icon-size-large);\n    height: nhsuk-px-to-rem($nhsuk-icon-size-large);\n    background-size: nhsuk-px-to-rem($nhsuk-icon-size-large) nhsuk-px-to-rem($nhsuk-icon-size-large);\n\n    @supports (mask-position: initial) {\n      mask-size: nhsuk-px-to-rem($nhsuk-icon-size-large) nhsuk-px-to-rem($nhsuk-icon-size-large);\n    }\n  }\n\n  // Codes and sequences\n\n  .nhsuk-input--code {\n    @include nhsuk-font-code;\n    font-size-adjust: none;\n    word-spacing: 0;\n  }\n\n  // The ex measurements are based on the number of W's that can fit inside the input\n  // Extra space is left on the right hand side to allow for the Safari prefill icon\n  // Linear regression estimation based on visual tests: y = 1.76 + 1.81x\n\n  .nhsuk-input--width-30 {\n    max-width: 56ex + 3ex;\n  }\n\n  .nhsuk-input--width-20 {\n    max-width: 38ex + 3ex;\n  }\n\n  .nhsuk-input--width-10 {\n    max-width: 20ex + 3ex;\n  }\n\n  .nhsuk-input--width-5 {\n    max-width: 10.8ex;\n  }\n\n  .nhsuk-input--width-4 {\n    max-width: 9ex;\n  }\n\n  .nhsuk-input--width-3 {\n    max-width: 7.2ex;\n  }\n\n  .nhsuk-input--width-2 {\n    max-width: 5.4ex;\n  }\n\n  .nhsuk-input-wrapper__prefix,\n  .nhsuk-input-wrapper__suffix,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-input__prefix,\n  .nhsuk-input__suffix {\n    box-sizing: border-box;\n\n    // Use flexbox to align text within the prefix and suffix\n    display: flex;\n\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n\n    min-width: nhsuk-px-to-rem(40px);\n    height: nhsuk-px-to-rem(40px);\n    padding: nhsuk-px-to-rem(nhsuk-spacing(1)) nhsuk-px-to-rem(nhsuk-spacing(2));\n\n    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;\n\n    background-color: nhsuk-colour(\"grey-4\");\n\n    text-align: center;\n    white-space: nowrap;\n    // Emphasise non-editable status of prefixes and suffixes\n    cursor: default;\n\n    @include nhsuk-font($size: 19);\n\n    // Split prefix/suffix onto separate lines on narrow screens\n    @include nhsuk-media-query($until: mobile) {\n      display: block;\n      height: 100%;\n      white-space: normal;\n    }\n  }\n\n  .nhsuk-input-wrapper--large .nhsuk-input-wrapper__prefix,\n  .nhsuk-input-wrapper--large .nhsuk-input-wrapper__suffix {\n    @include nhsuk-media-query($from: mobile) {\n      height: nhsuk-px-to-rem(52px);\n      padding-right: nhsuk-px-to-rem(nhsuk-spacing(3));\n      padding-left: nhsuk-px-to-rem(nhsuk-spacing(3));\n      @include nhsuk-font($size: 22);\n    }\n\n    @include nhsuk-media-query($from: tablet) {\n      height: nhsuk-px-to-rem(56px + $nhsuk-button-shadow-size);\n    }\n  }\n\n  .nhsuk-input-wrapper__prefix,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-input__prefix {\n    @include nhsuk-media-query($until: mobile) {\n      border-bottom-width: 0;\n\n      // Remove top margin when preceded by a prefix\n      + .nhsuk-input {\n        margin-top: 0;\n      }\n    }\n\n    @include nhsuk-media-query($from: mobile) {\n      margin-left: nhsuk-spacing(2);\n      border-right-width: 0;\n\n      &:first-child {\n        margin-left: 0;\n      }\n\n      // Remove left margin when preceded by a prefix\n      + .nhsuk-input {\n        margin-left: 0;\n      }\n    }\n  }\n\n  // Split prefix/suffix onto separate lines on narrow screens\n  .nhsuk-input-wrapper__suffix,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-input__suffix {\n    @include nhsuk-media-query($until: mobile) {\n      border-top-width: 0;\n    }\n\n    @include nhsuk-media-query($from: mobile) {\n      border-left-width: 0;\n    }\n  }\n}\n"]}