{"version":3,"sources":["../../../../src/govuk/components/task-list/_index.scss"],"names":[],"mappings":"AAAA,oBAAoB;;AAEpB,sBAAsB;;AAEtB;EACE,yEAAyE;;EAEzE;IACE,8BAA8B;IAC9B,aAAa;IACb,6CAA6C;IAC7C,UAAU;IACV,qBAAqB;EACvB;;EAEA,uEAAuE;EACvE,6EAA6E;EAC7E,4CAA4C;EAC5C,CAAC;EACD,oEAAoE;EACpE,4EAA4E;EAC5E,mBAAmB;EACnB;IACE,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,gBAAgB;IAChB,6BAA6B;IAC7B,gCAAgC;IAChC,wBAAwB;IACxB,oDAAoD;EACtD;;EAEA;IACE,qBAAqB;IACrB,iDAAiD;EACnD;;EAEA,6EAA6E;EAC7E,yEAAyE;EACzE,oDAAoD;EACpD;IACE,yCAAyC;EAC3C;;EAEA;IACE,mBAAmB;;IAEnB,oCAAoC;IACpC,mBAAmB;EACrB;;EAEA;IACE,mBAAmB;IACnB,8BAA8B;;IAE9B,oCAAoC;IACpC,iBAAiB;IACjB,mBAAmB;EACrB;;EAEA;IACE,8CAA8C;EAChD;;EAEA,0EAA0E;EAC1E,0EAA0E;EAC1E,sDAAsD;EACtD;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,SAAS;IACT,OAAO;EACT;;EAEA;IACE,4BAA4B;IAC5B,8CAA8C;EAChD;AACF","file":"_index.scss","sourcesContent":["@import \"../../base\";\n\n@import \"../tag/index\";\n\n@include govuk-exports(\"govuk/component/task-list\") {\n  $govuk-task-list-hover-colour: govuk-colour(\"black\", $variant: \"tint-95\");\n\n  .govuk-task-list {\n    @include govuk-font($size: 19);\n    margin-top: 0;\n    @include govuk-responsive-margin(6, \"bottom\");\n    padding: 0;\n    list-style-type: none;\n  }\n\n  // This uses table layout so that the task name and status always appear\n  // side-by-side, with the width of each 'column' being flexible depending upon\n  // the length of the task names and statuses.\n  //\n  // The position is set to 'relative' so than an absolutely-positioned\n  // transparent element box can be added within the link so that the whole row\n  // can be clickable.\n  .govuk-task-list__item {\n    display: table;\n    position: relative;\n    width: 100%;\n    margin-bottom: 0;\n    padding-top: govuk-spacing(2);\n    padding-bottom: govuk-spacing(2);\n    border-bottom: 1px solid;\n    border-bottom-color: govuk-functional-colour(border);\n  }\n\n  .govuk-task-list__item:first-child {\n    border-top: 1px solid;\n    border-top-color: govuk-functional-colour(border);\n  }\n\n  // This class is added to the <li> elements where the task name is a link. The\n  // background hover colour is added to help indicate that the whole row is\n  // clickable, rather than just the visible link text.\n  .govuk-task-list__item--with-link:hover {\n    background: $govuk-task-list-hover-colour;\n  }\n\n  .govuk-task-list__name-and-hint {\n    display: table-cell;\n\n    color: govuk-functional-colour(text);\n    vertical-align: top;\n  }\n\n  .govuk-task-list__status {\n    display: table-cell;\n    padding-left: govuk-spacing(2);\n\n    color: govuk-functional-colour(text);\n    text-align: right;\n    vertical-align: top;\n  }\n\n  .govuk-task-list__status--cannot-start-yet {\n    color: govuk-functional-colour(secondary-text);\n  }\n\n  // This adds an empty transparent box covering the whole row, including the\n  // task status and any hint text. Because this is generated within the link\n  // element, this allows the whole area to be clickable.\n  .govuk-task-list__link::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  .govuk-task-list__hint {\n    margin-top: govuk-spacing(1);\n    color: govuk-functional-colour(secondary-text);\n  }\n}\n"]}