{"version":3,"sources":["../../../../src/nhsuk/components/task-list/_index.scss"],"names":[],"mappings":"AAAA,iBAAiB;AACjB,+BAA+B;AAC/B,4BAA4B;AAC5B,8BAA8B;;AAE9B,GAAG;AACH,sBAAsB;AACtB,EAAE;AACF,8BAA8B;AAC9B,6GAA6G;AAC7G,GAAG;;AAEH,qFAAqF;AACrF,oDAAoD;AACpD,6GAA6G;;AAE7G,oCAAoC;AACpC,2DAA2D;;AAE3D;EACE;IACE,aAAa;IACb,UAAU;IACV,qBAAqB;;IAErB,8BAA8B;IAC9B,6CAA6C;EAC/C;;EAEA,uGAAuG;EACvG,wFAAwF;EACxF,CAAC;EACD,4FAA4F;EAC5F,sEAAsE;EACtE;IACE,cAAc;;IAEd,kBAAkB;;IAElB,WAAW;IACX,gBAAgB;IAChB,mCAAmC;IACnC,sCAAsC;;IAEtC,6CAA6C;EAC/C;;EAEA;IACE,0CAA0C;EAC5C;;EAEA,yEAAyE;EACzE,+FAA+F;EAC/F,kCAAkC;EAClC;IACE,yCAAyC;EAC3C;;EAEA;IACE,mBAAmB;IACnB,yBAAyB;IACzB,mBAAmB;EACrB;;EAEA;IACE,mBAAmB;IACnB,8BAA8B;IAC9B,yBAAyB;IACzB,iBAAiB;IACjB,mBAAmB;EACrB;;EAEA,+EAA+E;EAC/E,gFAAgF;EAChF,qDAAqD;EACrD;;IAEE,mCAAmC,EAAE,8BAA8B;IACnE,gCAAgC;IAChC,8BAA8B;IAC9B,qBAAqB;;IAErB,gEAAgE;EAClE;;EAEA;IACE,mCAAmC;EACrC;;EAEA,0FAA0F;EAC1F,8FAA8F;EAC9F,kBAAkB;EAClB;IACE,WAAW;;IAEX,cAAc;;IAEd,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,SAAS;IACT,OAAO;EACT;;EAEA;IACE,4BAA4B;IAC5B,mCAAmC;EACrC;AACF","file":"_index.scss","sourcesContent":["@use \"sass:color\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Task list component\n///\n/// @group components/task-list\n/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)\n////\n\n// NHS pages have a grey background, so we need a slightly darker colour for the hover\n// This produces 1.1:1 contrast, the same as GOV.UK’s\n$nhsuk-task-list-hover-colour: nhsuk-colour-compatible(color.adjust(nhsuk-colour(\"grey-5\"), $lightness: -6%));\n\n// @deprecated To be removed in v11.0\n$nhsuk-task-list-hover-color: $nhsuk-task-list-hover-colour;\n\n@include nhsuk-exports(\"nhsuk/components/task-list\") {\n  .nhsuk-task-list {\n    margin-top: 0;\n    padding: 0;\n    list-style-type: none;\n\n    @include nhsuk-font($size: 19);\n    @include nhsuk-responsive-margin(5, \"bottom\");\n  }\n\n  // This uses table layout so that the task name and status always appear side-by-side, with the width of\n  // each 'column' being flexible depending upon the length of the task names and statuses.\n  //\n  // The position is set to 'relative' so than an absolutely-positioned transparent element box\n  // can be added within the link so that the whole row can be clickable.\n  .nhsuk-task-list__item {\n    display: table;\n\n    position: relative;\n\n    width: 100%;\n    margin-bottom: 0;\n    padding-top: nhsuk-spacing(2) + 4px;\n    padding-bottom: nhsuk-spacing(2) + 4px;\n\n    border-bottom: 1px solid $nhsuk-border-colour;\n  }\n\n  .nhsuk-task-list__item:first-child {\n    border-top: 1px solid $nhsuk-border-colour;\n  }\n\n  // This class is added to the <li> elements where the task name is a link.\n  // The background hover colour is added to help indicate that the whole row is clickable, rather\n  // than just the visible link text.\n  .nhsuk-task-list__item--with-link:hover {\n    background: $nhsuk-task-list-hover-colour;\n  }\n\n  .nhsuk-task-list__name-and-hint {\n    display: table-cell;\n    color: $nhsuk-text-colour;\n    vertical-align: top;\n  }\n\n  .nhsuk-task-list__status {\n    display: table-cell;\n    padding-left: nhsuk-spacing(2);\n    color: $nhsuk-text-colour;\n    text-align: right;\n    vertical-align: top;\n  }\n\n  // This replicates some of the styling and spacing of tags so that these non-tag\n  // statuses don’t look out of place with them. Longer term we may want to look to\n  // adjusting the tag styles to be closer to body text.\n  .nhsuk-task-list__status--completed,\n  .nhsuk-task-list__status--cannot-start-yet {\n    padding-top: nhsuk-spacing(1) + 2px; // to match the spacing on tags\n    padding-bottom: nhsuk-spacing(1);\n    padding-left: nhsuk-spacing(2);\n    text-decoration: none;\n\n    @include nhsuk-font($size: 16, $weight: normal, $line-height: 1);\n  }\n\n  .nhsuk-task-list__status--cannot-start-yet {\n    color: $nhsuk-secondary-text-colour;\n  }\n\n  // This adds an empty transparent box covering the whole row, including the task status and\n  // any hint text. Because this is generated within the link element, this allows the whole area\n  // to be clickable.\n  .nhsuk-task-list__link::after {\n    content: \"\";\n\n    display: block;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  .nhsuk-task-list__hint {\n    margin-top: nhsuk-spacing(1);\n    color: $nhsuk-secondary-text-colour;\n  }\n}\n"]}