{"version":3,"sources":["../../../../src/govuk/components/task-list/_index.scss"],"names":[],"mappings":"AAAA,sBAAsB;;AAEtB;EACE,yDAAyD;;EAEzD;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,6CAA6C;EAC/C;;EAEA;IACE,0CAA0C;EAC5C;;EAEA,6EAA6E;EAC7E,yEAAyE;EACzE,oDAAoD;EACpD;IACE,yCAAyC;EAC3C;;EAEA;IACE,mBAAmB;IACnB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,mBAAmB;IACnB,8BAA8B;IAC9B,iBAAiB;IACjB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,mCAAmC;EACrC;;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,mCAAmC;EACrC;AACF","file":"_index.scss","sourcesContent":["@import \"../tag/index\";\n\n@include govuk-exports(\"govuk/component/task-list\") {\n  $govuk-task-list-hover-colour: govuk-colour(\"light-grey\");\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 $govuk-border-colour;\n  }\n\n  .govuk-task-list__item:first-child {\n    border-top: 1px solid $govuk-border-colour;\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    vertical-align: top;\n    @include govuk-text-colour;\n  }\n\n  .govuk-task-list__status {\n    display: table-cell;\n    padding-left: govuk-spacing(2);\n    text-align: right;\n    vertical-align: top;\n    @include govuk-text-colour;\n  }\n\n  .govuk-task-list__status--cannot-start-yet {\n    color: $govuk-secondary-text-colour;\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-secondary-text-colour;\n  }\n}\n"]}