{"version":3,"sources":["../../../../src/nhsuk/components/scroll/_index.scss"],"names":[],"mappings":"AAAA,4CAA4C;;AAE5C,+BAA+B;AAC/B,4BAA4B;AAC5B,8BAA8B;;AAE9B,GAAG;AACH,mBAAmB;AACnB,EAAE;AACF,2BAA2B;AAC3B,GAAG;;AAEH,4CAA4C;AAC5C,0CAA0C;;AAE1C;EACE;IACE,kBAAkB;IAClB,+BAA+B;IAC/B,2BAA2B;IAC3B,sCAAsC;IACtC,gBAAgB;;IAEhB,0DAA0D;IAC1D,iHAAiH;;IAEjH;MACE,eAAe;MACf,cAAc;MACd,iBAAiB;IACnB;EACF;;EAEA;IACE,iBAAiB;IACjB,iBAAiB;;IAEjB,uDAAuD;;IAEvD;MACE,+BAA+B;IACjC;;IAEA;MACE,8CAA8C;IAChD;EACF;;EAEA;;;IAGE,uBAAuB;IACvB,cAAc;IACd,2BAA2B;;IAE3B,2BAA2B;IAC3B,wCAAwC;IACxC,gBAAgB;;IAEhB,6BAA6B;;IAE7B;MACE,gBAAgB;MAChB,eAAe;IACjB;EACF;;EAEA;IACE,oDAAoD;;IAEpD;MACE,6CAA6C;IAC/C;;IAEA;;MAEE,aAAa;MACb,WAAW;MACX,YAAY;MACZ,qBAAqB;MACrB,2BAA2B;IAC7B;;IAEA;MACE,WAAW;;MAEX,cAAc;;MAEd,kBAAkB;MAClB,2BAA2B;MAC3B,6BAA6B;MAC7B,8BAA8B;MAC9B,4BAA4B;;MAE5B,0BAA0B;;MAE1B;QACE,QAAQ;QACR,OAAO;MACT;IACF;EACF;;EAEA,wBAAwB;EACxB;;IAEE,WAAW;;IAEX,aAAa;;IAEb,kBAAkB;IAClB,UAAU;IACV,qBAAqB;;IAErB,iCAAiC;IACjC,qCAAqC;;IAErC,oBAAoB;;IAEpB,iCAAiC;;IAEjC,UAAU;;IAEV,6DAA6D;;IAE7D;MACE,cAAc;;MAEd;QACE,UAAU;MACZ;IACF;;IAEA;MACE,cAAc;MACd,UAAU;IACZ;EACF;;EAEA,sDAAsD;EACtD,6DAA6D;;EAE7D;;;;;GAKC;;EAED;;;;;GAKC;;EAED;;;;;GAKC;;EAED,aAAa;EACb;IACE,OAAO;IACP,gEAAgE;;IAEhE;MACE,qEAAqE;IACvE;;IAEA;MACE,wEAAwE;IAC1E;;IAEA;MACE;QACE,0BAA0B;QAC1B,UAAU;MACZ;IACF;;IAEA;MACE,0BAA0B;MAC1B,UAAU;IACZ;EACF;;EAEA,cAAc;EACd;IACE,QAAQ;IACR,+DAA+D;;IAE/D;MACE,oEAAoE;IACtE;;IAEA;MACE,uEAAuE;IACzE;;IAEA;MACE;QACE,0BAA0B;QAC1B,UAAU;MACZ;IACF;;IAEA;MACE,0BAA0B;MAC1B,UAAU;IACZ;EACF;;EAEA;IACE,gBAAgB;IAChB,eAAe;;IAEf,8CAA8C;;IAE9C;MACE,QAAQ;MACR,SAAS;MACT,OAAO;IACT;EACF;AACF","file":"_index.scss","sourcesContent":["// stylelint-disable declaration-no-important\n\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n\n////\n/// Scroll component\n///\n/// @group components/scroll\n////\n\n$nhsuk-scroll-shadow-width: nhsuk-spacing(4);\n$nhsuk-scroll-bar-height: nhsuk-spacing(4);\n\n@include nhsuk-exports(\"nhsuk/components/scroll\") {\n  .nhsuk-scroll {\n    position: relative;\n    container: scroll / inline-size;\n    margin: -$nhsuk-gutter-half;\n    padding-bottom: $nhsuk-focus-width * 2;\n    overflow: hidden;\n\n    // Use table bottom margin but remove space for scroll bars\n    @include nhsuk-responsive-margin(7, \"bottom\", $adjustment: - ($nhsuk-scroll-bar-height + $nhsuk-focus-width * 2));\n\n    @media #{nhsuk-from-breakpoint(desktop)} {\n      margin-right: 0;\n      margin-left: 0;\n      overflow: visible;\n    }\n  }\n\n  .nhsuk-card__content .nhsuk-scroll {\n    padding-bottom: 0;\n    overflow: visible;\n\n    @include nhsuk-responsive-margin(-5, (\"left\", \"right\"));\n\n    &:first-child {\n      margin-top: -$nhsuk-gutter-half;\n    }\n\n    &:last-child {\n      @include nhsuk-responsive-margin(-5, \"bottom\");\n    }\n  }\n\n  .nhsuk-scroll__content,\n  // Deprecated, to be removed in v11.0\n  .nhsuk-table-container {\n    box-sizing: content-box;\n    display: block;\n    padding: $nhsuk-gutter-half;\n\n    // Add space for scroll bars\n    padding-bottom: $nhsuk-scroll-bar-height;\n    overflow-x: auto;\n\n    @include nhsuk-top-and-bottom;\n\n    @media #{nhsuk-from-breakpoint(desktop)} {\n      padding-right: 0;\n      padding-left: 0;\n    }\n  }\n\n  .nhsuk-scroll__content {\n    container: scroll-content / inline-size scroll-state;\n\n    &:focus-visible {\n      outline: $nhsuk-focus-width solid transparent;\n    }\n\n    &:focus-visible::before,\n    &:focus-visible::after {\n      display: none;\n      width: auto;\n      height: auto;\n      opacity: 1 !important;\n      background: none !important;\n    }\n\n    &:focus-visible::after {\n      content: \"\";\n\n      display: block;\n\n      position: absolute;\n      top: $nhsuk-focus-width * 2;\n      right: $nhsuk-focus-width * 2;\n      bottom: $nhsuk-focus-width * 2;\n      left: $nhsuk-focus-width * 2;\n\n      @include nhsuk-focused-box;\n\n      @media #{nhsuk-from-breakpoint(desktop)} {\n        right: 0;\n        left: 0;\n      }\n    }\n  }\n\n  // Left and right shadows\n  .nhsuk-scroll__content::before,\n  .nhsuk-scroll__content::after {\n    content: \"\";\n\n    display: none;\n\n    position: absolute;\n    z-index: 1;\n    top: nhsuk-spacing(2);\n\n    width: $nhsuk-scroll-shadow-width;\n    height: calc(100% - nhsuk-spacing(2));\n\n    pointer-events: none;\n\n    transition: opacity 0.2s ease-out;\n\n    opacity: 1;\n\n    background: no-repeat right / $nhsuk-scroll-shadow-width 100%;\n\n    @include nhsuk-frontend-not-supported {\n      display: block;\n\n      @container scroll-state(scrollable: inline) {\n        opacity: 0;\n      }\n    }\n\n    .nhsuk-scroll--scrollable & {\n      display: block;\n      opacity: 0;\n    }\n  }\n\n  $_shadow-colour: nhsuk-shade($nhsuk-brand-colour, 70%);\n  $_shadow-colour-reverse: nhsuk-tint($nhsuk-brand-colour, 70%);\n\n  $_shadow-colours: (\n    rgba($_shadow-colour, 0.2),\n    rgba($_shadow-colour, 0.2) $nhsuk-border-width,\n    rgba($_shadow-colour, 0.05) $nhsuk-border-width,\n    rgba($_shadow-colour, 0.05) 100%\n  );\n\n  $_shadow-colours-card: (\n    rgba($_shadow-colour, 0.15),\n    rgba($_shadow-colour, 0.15) $nhsuk-border-width - 1px,\n    rgba($_shadow-colour, 0.05) $nhsuk-border-width - 1px,\n    rgba($_shadow-colour, 0.05) 100%\n  );\n\n  $_shadow-colours-reverse: (\n    rgba($_shadow-colour-reverse, 0.4),\n    rgba($_shadow-colour-reverse, 0.4) $nhsuk-border-width,\n    rgba($_shadow-colour-reverse, 0.1) $nhsuk-border-width,\n    rgba($_shadow-colour-reverse, 0.1) 100%\n  );\n\n  // Left shadow\n  .nhsuk-scroll__content::before {\n    left: 0;\n    background-image: linear-gradient(to right, $_shadow-colours...);\n\n    .nhsuk-card__content .nhsuk-scroll & {\n      background-image: linear-gradient(to right, $_shadow-colours-card...);\n    }\n\n    .nhsuk-scroll--reverse & {\n      background-image: linear-gradient(to right, $_shadow-colours-reverse...);\n    }\n\n    @include nhsuk-frontend-not-supported {\n      @container scroll-state(scrollable: left) {\n        transition-duration: 0.05s;\n        opacity: 1;\n      }\n    }\n\n    .nhsuk-scroll--scrollable-left & {\n      transition-duration: 0.05s;\n      opacity: 1;\n    }\n  }\n\n  // Right shadow\n  .nhsuk-scroll__content::after {\n    right: 0;\n    background-image: linear-gradient(to left, $_shadow-colours...);\n\n    .nhsuk-card__content .nhsuk-scroll & {\n      background-image: linear-gradient(to left, $_shadow-colours-card...);\n    }\n\n    .nhsuk-scroll--reverse & {\n      background-image: linear-gradient(to left, $_shadow-colours-reverse...);\n    }\n\n    @include nhsuk-frontend-not-supported {\n      @container scroll-state(scrollable: right) {\n        transition-duration: 0.05s;\n        opacity: 1;\n      }\n    }\n\n    .nhsuk-scroll--scrollable-right & {\n      transition-duration: 0.05s;\n      opacity: 1;\n    }\n  }\n\n  .nhsuk-card__content .nhsuk-scroll__content {\n    padding-right: 0;\n    padding-left: 0;\n\n    @include nhsuk-responsive-padding(5, \"bottom\");\n\n    &:focus-visible::after {\n      right: 0;\n      bottom: 0;\n      left: 0;\n    }\n  }\n}\n"]}