{"version":3,"sources":["../../../../src/govuk/components/tag/_index.scss"],"names":[],"mappings":"AAAA;EACE,qHAAqH;;EAErH;IACE,8BAA8B;;IAE9B,qBAAqB;;IAErB,0EAA0E;IAC1E,uEAAuE;IACvE,0EAA0E;IAC1E,wBAAwB;IACxB,+BAA+B;;IAE/B,0EAA0E;IAC1E,2EAA2E;IAC3E,sDAAsD;IACtD,CAAC;IACD,2EAA2E;IAC3E,QAAQ;IACR,gBAAgB;IAChB,mBAAmB;;IAEnB,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;IACjB,6CAA6C;IAC7C,uDAAuD;IACvD,qBAAqB;IACrB,yBAAyB;;IAEzB,0EAA0E;IAC1E,0EAA0E;IAC1E,yEAAyE;IACzE,eAAe;IACf,CAAC;IACD,qEAAqE;IACrE,yEAAyE;IACzE,WAAW;IACX;MACE,iBAAiB;IACnB;EACF;;EAEA;IACE,kDAAkD;IAClD,4DAA4D;EAC9D;;EAEA;IACE,sDAAsD;IACtD,gEAAgE;EAClE;;EAEA;IACE,kDAAkD;IAClD,4DAA4D;EAC9D;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,+CAA+C;IAC/C,yDAAyD;EAC3D;;EAEA;IACE,+CAA+C;IAC/C,yDAAyD;EAC3D;;EAEA;IACE,4CAA4C;IAC5C,sDAAsD;EACxD;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,8CAA8C;IAC9C,wDAAwD;EAC1D;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/tag\") {\n $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, \"mobile\"), map-get($govuk-breakpoints, \"mobile\") / 2, 160px);\n\n .govuk-tag {\n @include govuk-font($size: 19);\n\n display: inline-block;\n\n // set a max-width along with overflow-wrap: break-word below for instances\n // where a tag has a single long word and could overflow its boundaries.\n // The max-width is necessary as break-word requires a bounding box to base\n // where to break off of.\n max-width: $govuk-tag-max-width;\n\n // These negative margins make sure that the tag component doesn’t increase\n // the size of its container. Otherwise, for example, a table row containing\n // a tag will be taller than one containing plain text.\n //\n // The negative margin added to the top and bottom matches the extra padding\n // added.\n margin-top: -2px;\n margin-bottom: -3px;\n\n padding-top: 2px;\n padding-right: 8px;\n padding-bottom: 3px;\n padding-left: 8px;\n color: govuk-shade(govuk-colour(\"blue\"), 60%);\n background-color: govuk-tint(govuk-colour(\"blue\"), 70%);\n text-decoration: none;\n overflow-wrap: break-word;\n\n // When forced colour mode is active, for example to provide high contrast,\n // the background colour of the tag is the same as the rest of the page. To\n // ensure that the tag is perceived as separate from any surround text, it\n // is made bold.\n //\n // Transparent outlines are no longer added, as they make the Tag look\n // indistinguishable from a button – but the tag is not interactive in the\n // same way.\n @media screen and (forced-colors: active) {\n font-weight: bold;\n }\n }\n\n .govuk-tag--grey {\n color: govuk-shade(govuk-colour(\"dark-grey\"), 50%);\n background-color: govuk-tint(govuk-colour(\"dark-grey\"), 85%);\n }\n\n .govuk-tag--purple {\n color: govuk-shade(govuk-colour(\"bright-purple\"), 50%);\n background-color: govuk-tint(govuk-colour(\"bright-purple\"), 85%);\n }\n\n .govuk-tag--turquoise {\n color: govuk-shade(govuk-colour(\"turquoise\"), 60%);\n background-color: govuk-tint(govuk-colour(\"turquoise\"), 80%);\n }\n\n .govuk-tag--blue {\n color: govuk-shade(govuk-colour(\"blue\"), 60%);\n background-color: govuk-tint(govuk-colour(\"blue\"), 70%);\n }\n\n .govuk-tag--light-blue {\n color: govuk-shade(govuk-colour(\"blue\"), 60%);\n background-color: govuk-tint(govuk-colour(\"blue\"), 90%);\n }\n\n .govuk-tag--yellow {\n color: govuk-shade(govuk-colour(\"yellow\"), 65%);\n background-color: govuk-tint(govuk-colour(\"yellow\"), 75%);\n }\n\n .govuk-tag--orange {\n color: govuk-shade(govuk-colour(\"orange\"), 55%);\n background-color: govuk-tint(govuk-colour(\"orange\"), 70%);\n }\n\n .govuk-tag--red {\n color: govuk-shade(govuk-colour(\"red\"), 80%);\n background-color: govuk-tint(govuk-colour(\"red\"), 75%);\n }\n\n .govuk-tag--pink {\n color: govuk-shade(govuk-colour(\"pink\"), 50%);\n background-color: govuk-tint(govuk-colour(\"pink\"), 85%);\n }\n\n .govuk-tag--green {\n color: govuk-shade(govuk-colour(\"green\"), 20%);\n background-color: govuk-tint(govuk-colour(\"green\"), 80%);\n }\n}\n"]}