{"version":3,"sources":["../../../../src/govuk/components/tag/_index.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,wBAAwB;AACxB,GAAG;AACH,eAAe;;AAEf,oBAAoB;;AAEpB,sBAAsB;AACtB,0EAA0E;AAC1E,EAAE;AACF,mEAAmE;AACnE,sEAAsE;AACtE,kBAAkB;AAClB;EACE,mDAAmD;AACrD;;AAEA,4BAA4B;AAC5B,+EAA+E;AAC/E,EAAE;AACF,mEAAmE;AACnE,sEAAsE;AACtE,kBAAkB;AAClB;EACE,kDAAkD;AACpD;;AAEA,gDAAgD;AAChD,uDAAuD;AACvD,EAAE;AACF,mEAAmE;AACnE,kBAAkB;AAClB;EACE,sCAAsC;EACtC,uDAAuD;AACzD;;AAEA;EACE,4EAA4E;;EAE5E;IACE,8BAA8B;IAC9B,4BAA4B;IAC5B,mCAAmC;;IAEnC,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;;IAEjB,kBAAkB;IAClB,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,6EAA6E;EAC7E,2BAA2B;EAC3B;IACE,oCAAoC;EACtC;;EAEA;IACE,qCAAqC;EACvC;;EAEA;IACE,kCAAkC;EACpC;;EAEA;IACE,qCAAqC;EACvC;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,sCAAsC;EACxC;;EAEA,sDAAsD;EACtD;IACE,mDAAmD;IACnD,6DAA6D;EAC/D;;EAEA,oDAAoD;EACpD;IACE,4BAA4B;IAC5B,4DAA4D;EAC9D;;EAEA,sEAAsE;EACtE,aAAa;EACb;IACE,mCAAmC;EACrC;;EAEA,aAAa;EACb;IACE,sCAAsC;EACxC;AACF","file":"_index.scss","sourcesContent":["////\n/// @group components/tag\n////\n@use \"sass:map\";\n\n@import \"../../base\";\n\n/// Get tag text colour\n/// Almost all tags should use the 50% shade of their colour for their text\n///\n/// @param {String} $colour - name of colour from the colour palette\n/// @return {Colour} Representation of the named colour for use in tags\n/// @access private\n@function _govuk-tag-text-colour($colour) {\n  @return govuk-colour($colour, $variant: \"shade-50\");\n}\n\n/// Get tag background colour\n/// Almost all tags should use the 80% tint of their colour for their background\n///\n/// @param {String} $colour - name of colour from the colour palette\n/// @return {Colour} Representation of the named colour for use in tags\n/// @access private\n@function _govuk-tag-background-colour($colour) {\n  @return govuk-colour($colour, $variant: \"tint-80\");\n}\n\n/// Generate colour CSS for tag and tag modifiers\n/// Applies standard rules from the tag colour functions\n///\n/// @param {String} $colour - name of colour from the colour palette\n/// @access private\n@mixin _govuk-tag-colours($colour) {\n  color: _govuk-tag-text-colour($colour);\n  background-color: _govuk-tag-background-colour($colour);\n}\n\n@include govuk-exports(\"govuk/component/tag\") {\n  $govuk-tag-max-width: 0.5 * (map.get($govuk-breakpoints, \"mobile\") or 320px);\n\n  .govuk-tag {\n    @include govuk-font($size: 19);\n    // Default tag colour is blue\n    @include _govuk-tag-colours(\"blue\");\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\n    border-radius: 1px;\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  // Tag colour modifiers. Use the _govuk-tag-colours mixin to define consistent\n  // colour rules per modifier\n  .govuk-tag--green {\n    @include _govuk-tag-colours(\"green\");\n  }\n\n  .govuk-tag--purple {\n    @include _govuk-tag-colours(\"purple\");\n  }\n\n  .govuk-tag--red {\n    @include _govuk-tag-colours(\"red\");\n  }\n\n  .govuk-tag--orange {\n    @include _govuk-tag-colours(\"orange\");\n  }\n\n  .govuk-tag--teal {\n    @include _govuk-tag-colours(\"teal\");\n  }\n\n  .govuk-tag--magenta {\n    @include _govuk-tag-colours(\"magenta\");\n  }\n\n  // Yellow uses different colours to ensure it's legible\n  .govuk-tag--yellow {\n    color: govuk-colour(\"orange\", $variant: \"shade-50\");\n    background-color: govuk-colour(\"yellow\", $variant: \"tint-50\");\n  }\n\n  // Grey uses different colours to ensure it's legible\n  .govuk-tag--grey {\n    color: govuk-colour(\"black\");\n    background-color: govuk-colour(\"black\", $variant: \"tint-80\");\n  }\n\n  // Turquoise and pink are deprecated over teal and magenta respectively\n  // @deprecated\n  .govuk-tag--turquoise {\n    @include _govuk-tag-colours(\"teal\");\n  }\n\n  // @deprecated\n  .govuk-tag--pink {\n    @include _govuk-tag-colours(\"magenta\");\n  }\n}\n"]}