{"version":3,"sourceRoot":"","sources":["../../src/nationalarchives/tools/_a11y.scss","../../src/nationalarchives/ie.scss","../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAyBA,2EACE,qCACA,8BAEA,qCAGA,WACE,kCAGF,uOACE,8BAEA,wCAKA,mCADF,mPAEI,8BAEA,yCCjCJ,2EACE,UASA,oDACE,aACA,cAEA,qBAEA,gBAEA,sBAEA,UAIJ,oDACE,qBAMA,uEAEE,yCAMJ,4BACE,YAGF,8BACE,UAKF,gBACE,aAQF,qdAGE,WAIJ,yCACE,2CChBA,6BDqBE,0DACE,kBAMJ,gFACE,iBAMF,oQAGE,0BAEA,4iBAEE,WAMJ,sBACE,YAGF,0BACE,YAGF,kCACE,YAyBF,2BACE,mBACA,8BAGF,iBACE,WACA,YAIA,+BACE,wBC9FJ,6BD8DA,sBACE,iBAGF,wCACE,kBACA,eAGF,iDACE,UAEA,kBACA,MACA,SACA,QCzFF,kDD0EA,+BACE,iBAGF,iDACE,kBACA,eAGF,0DACE,UAEA,kBACA,MACA,SACA,QA8BJ,aACE,0BAIA,uBACE,cAKF,qBACE,cAKF,iBACE,MACA,OACA,SACA,QAGF,gDAEE,gBAKF,sBACE,YAIJ,eACE,cAGF,yBACE,UAGF,UACE","file":"ie.css","sourcesContent":["@use \"../variables/a11y\";\n@use \"colour\";\n@use \"borders\";\n\n@mixin visually-hidden {\n  width: 1px !important;\n  height: 1px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n\n  overflow: hidden !important;\n\n  position: absolute !important;\n  top: -9999px !important;\n  left: -9999px !important;\n  z-index: -1 !important;\n\n  background-color: transparent !important;\n\n  border: 0 !important;\n\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n}\n\n%focus-outline {\n  outline: a11y.$focus-outline-outer-width colour.brand-colour(\"black\") solid !important;\n  outline-offset: a11y.$focus-outline-inner-width !important;\n\n  box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n    colour.brand-colour(\"yellow\") !important;\n\n  transition:\n    outline-offset 0.1s,\n    box-shadow 0.1s;\n\n  .tna-template--dark-theme & {\n    outline-color: colour.brand-colour(\"yellow\") !important;\n\n    box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n      colour.brand-colour(\"black\") !important;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      outline-color: colour.brand-colour(\"yellow\") !important;\n\n      box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n        colour.brand-colour(\"black\") !important;\n    }\n  }\n}\n\n@mixin focus-outline {\n  @extend %focus-outline;\n}\n\n@mixin no-focus-outline {\n  outline: none !important;\n\n  box-shadow: none !important;\n}\n\n%active-outline {\n  outline: a11y.$focus-outline-active-outer-width colour.brand-colour(\"black\")\n    solid !important;\n  outline-offset: a11y.$focus-outline-active-inner-width !important;\n\n  box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n    colour.brand-colour(\"yellow\") !important;\n\n  transition: none;\n\n  .tna-template--dark-theme & {\n    outline-color: colour.brand-colour(\"yellow\") !important;\n\n    box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n      colour.brand-colour(\"black\") !important;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      outline-color: colour.brand-colour(\"yellow\") !important;\n\n      box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n        colour.brand-colour(\"black\") !important;\n    }\n  }\n}\n\n@mixin active-outline {\n  @extend %active-outline;\n}\n\n%faux-full-outline {\n  position: relative;\n}\n\n%faux-full-outline-anchor {\n  &::before {\n    content: \"\";\n\n    position: absolute;\n    inset: 0;\n    z-index: 9;\n\n    @include borders.rounded-border;\n  }\n\n  &:focus,\n  &:active {\n    @include no-focus-outline;\n  }\n\n  &:focus {\n    &::before {\n      @include focus-outline;\n    }\n  }\n\n  &:active {\n    &::before {\n      @include active-outline;\n    }\n  }\n}\n\n@mixin faux-full-outline($anchor_selector) {\n  @extend %faux-full-outline;\n\n  #{$anchor_selector} {\n    @extend %faux-full-outline-anchor;\n  }\n}\n\n%focus-indicator-only-on-keyboard-focus {\n  &:focus:not(:focus-visible) {\n    @include no-focus-outline;\n  }\n}\n\n@mixin focus-indicator-only-on-keyboard-focus {\n  @extend %focus-indicator-only-on-keyboard-focus;\n}\n","/* stylelint-disable */\n\n@use \"sass:math\";\n@use \"tools/a11y\";\n@use \"tools/colour\";\n@use \"tools/media\";\n@use \"tools/spacing\";\n\na,\nbutton,\ninput,\ntextarea,\nselect,\nsummary {\n  &:focus {\n    z-index: 9;\n\n    @include a11y.focus-outline;\n  }\n}\n\n.tna-checkboxes,\n.tna-radios {\n  &__item {\n    input {\n      width: 1.5rem;\n      height: 1.5rem;\n\n      display: inline-block;\n\n      position: static;\n\n      vertical-align: middle;\n\n      opacity: 1;\n    }\n  }\n\n  &__item-label {\n    display: inline-block;\n  }\n}\n\n.tna-compound-filters {\n  &__link {\n    &::before,\n    &::after {\n      border-left: 2px #010101 solid !important;\n    }\n  }\n}\n\n.tna-index-grid {\n  &__item-image {\n    height: 100%;\n  }\n\n  &__item-content {\n    flex: auto;\n  }\n}\n\n.tna-button {\n  svg {\n    display: none;\n  }\n}\n\n.tna-global-header__logo--link,\n.tna-global-header__navigation-item-link,\n.tna-header__logo-contents--link,\n.tna-header__navigation-item-link {\n  &,\n  &:link,\n  &:visited {\n    color: #fff;\n  }\n}\n\n.tna-global-header__navigation-item-link {\n  border-bottom: 1px rgba(255, 255, 255, 0.5) solid;\n}\n\n@include media.on-larger-than-mobile {\n  .tna-header__navigation-item {\n    & + & {\n      margin-left: 2rem;\n    }\n  }\n}\n\n.tna-global-header__top-navigation-item {\n  & + & {\n    margin-left: 2rem;\n  }\n}\n\n.tna-global-header__top-navigation-link,\n.tna-header__top-navigation-item-link {\n  &,\n  &:link,\n  &:visited {\n    color: rgba(255, 255, 255, 0.58);\n\n    &,\n    &:focus {\n      color: #fff;\n    }\n  }\n}\n\n.tna-footer {\n  .tna-logo {\n    height: 96px;\n  }\n\n  &__licence-logo {\n    height: 24px;\n  }\n\n  &__govuk-logotype-crown {\n    height: 30px;\n  }\n}\n\n@mixin horizontal-card-layout($modifierClass, $innerPaddingAmount) {\n  &#{$modifierClass} {\n    padding-left: 50%;\n  }\n\n  &#{$modifierClass}#{&}--flipped {\n    padding-right: 50%;\n    padding-left: 0;\n  }\n\n  &#{$modifierClass} &__image-container {\n    width: 50%;\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n\n.tna-card {\n  &__image-container {\n    margin-bottom: spacing.space(1);\n    padding-bottom: #{math.div(2, 3) * 100%};\n  }\n\n  &__image {\n    width: 100%;\n    height: 100%;\n  }\n\n  &__heading-link {\n    &::after {\n      display: none !important;\n    }\n  }\n\n  @include media.on-larger-than-mobile {\n    @include horizontal-card-layout(\"--horizontal\", 2);\n  }\n\n  @include media.on-small {\n    @include horizontal-card-layout(\"--horizontal-on-small\", 1);\n  }\n}\n\n.tna-columns {\n  column-count: 1 !important;\n}\n\n.tna-breadcrumbs {\n  &__link {\n    color: #343338;\n  }\n}\n\n.tna-sidebar {\n  &--sticky {\n    display: block;\n  }\n}\n\n.tna-hero {\n  &__image {\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n  }\n\n  &__information,\n  &__content-inner {\n    background: #fff;\n  }\n}\n\n.tna-files-list {\n  &__icon {\n    height: 3rem;\n  }\n}\n\n.tna-form-item {\n  display: block;\n}\n\n.tna-form-item__contents {\n  flex: none;\n}\n\n.tna-chip {\n  background: #fff;\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}