@nationalarchives/frontend 0.1.18-prerelease → 0.1.20-prerelease

package/nationalarchives/components/filters/filters.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/components/filters/filters.scss"],"names":[],"mappings":"CAQQ,6CCLR,yFACE,mBAEA,sKACE,gBCPJ,qBACE,qBACA,sBACA,oBACA,qBAEA,6BACA,uBACA,wBACA,sBAEA,2BAEA,iCAEA,oBAEA,0CAEA,yDAEE,YCkJJ,0BACE,uCACA,uCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAhFA,yBAEA,4CAPA,4BACA,uBAuHF,0DACE,qCACA,qCACA,uCACA,2BACA,2CACA,iCACA,2CA1HA,sBAEA,0CAPA,4BACA,uBAiJF,8BA7IE,yBAEA,gDA8IA,qBACA,kBACA,oCACA,aACA,wBACA,gBACA,wBACA,oBACA,0BAIA,0BAIA,gCC5PF,MDKI,olCCDJ,cACE,gBACA,WACA,YAEA,kBACA,gBACA,iCAEA,eD+EA,yBAEA,wCC7EA,2BDwBE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DC5BF,4BDdE,olCCiBA,mCAHF,4BDRE,snCCeA,+BAPF,4BDFE,8/BCYE,8BACE,kCAIJ,+DAfF,4BDIE,kjCCgBF,2BDlCE,olCCsCF,0BDhCE,qnCCoCF,mCD9BE,8/BCiCA,qCACE,iCAGF,4DD/BA,ijCC0CF,6BDpCE,0BACA,qCACA,8CACA,oCACA,oCACA,mDACA,+BACA,uCACA,gDACA,qDACA,4CC8BF,2BD5BE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAEE,6BACA,wCACA,8CACA,+CCYN,6BDhCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAOE,6BACA,wCACA,8CACA,+CCWN,4BDpCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAYE,6BACA,wCACA,8CACA,+CCUN,2BDxCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAiBE,6BACA,wCACA,8CACA,+CCSN,+BACE,gBACE,0BACA,4BAKN,oBACE,gBACA,SACA,UAEA,cAEA,oFACE,aACA,sBAEA,6GACE,OAKN,6BAKE,eAEA,cAGF,aAEE,WAGF,SACE,aAGF,QAEE,uBDSA,sBAEA,mCCTA,uBAGF,GACE,c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","file":"filters.css","sourcesContent":["@use \"sass:math\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n\n@import \"https://use.typekit.net/hkj3kuz.css\";\n\n@font-face {\n  font-family: \"Open Sans\";\n  src: url(\"#{assets.$tna-font-path}/OpenSans-Medium.ttf\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Open Sans\";\n  src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n  font-weight: bold;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto Mono\";\n  src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n.tna-template {\n  @include colour.colour-font(\"font-base\");\n  @include typography.main-font;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  -webkit-text-size-adjust: none;\n  direction: ltr;\n}\n\n.tna-template__body {\n  color: inherit;\n  @include typography.relative-font-size(18);\n  // line-height: 1.6;\n  line-height: #{math.div(16, 18) * 2};\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul,\nol {\n  margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n  @include typography.main-font-weight-bold;\n}\n\np {\n  margin: 0 0 1.5rem;\n\n  @include media.on-tiny {\n    margin-bottom: 1rem;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\na {\n  @include colour.colour-font(\"link\");\n  text-decoration-thickness: 1.5px;\n\n  &:visited {\n    @include colour.colour-font(\"link-visited\");\n  }\n\n  &:hover,\n  &:active {\n    @include typography.interacted-text-decoration;\n  }\n\n  &.tna-chip {\n    text-decoration: none;\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-dark\");\n    }\n\n    &:hover {\n      @include typography.interacted-text-decoration;\n    }\n  }\n}\n\n.tna-ul,\n.tna-ol {\n  margin-top: 0;\n  margin-right: 0;\n  margin-left: 0;\n  padding: 0 0 0 2rem;\n\n  @include spacing.space-below;\n\n  li::marker {\n    @include colour.colour-font(\"accent-background\");\n    font-weight: 700;\n  }\n\n  &--plain {\n    padding-left: 0;\n\n    list-style: none;\n  }\n}\n\n%chip {\n  max-width: max-content;\n  padding: 0.375em 0.5rem;\n\n  display: block;\n\n  @include colour.colour-font(\"font-dark\");\n  @include typography.detail-font-small;\n  line-height: 1;\n\n  @include colour.accent;\n}\n\n.tna-chip {\n  @extend %chip;\n}\n\n.tna-chip-list {\n  padding-left: 0;\n\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n\n  list-style: none;\n\n  @include spacing.space-below;\n\n  &__item {\n  }\n}\n\n%heading {\n  @include colour.colour-font(\"font-dark\");\n  @include typography.heading-font;\n\n  a {\n    display: inline-block;\n\n    &::after {\n      padding-left: 0.25rem;\n\n      display: inline-block;\n\n      font-weight: 700;\n\n      content: \"\\203A\";\n    }\n\n    &:hover {\n      &::after {\n        padding-left: 0.5rem;\n      }\n    }\n  }\n}\n\n%heading-xl {\n  @include typography.relative-font-size(64);\n  line-height: 1.2;\n\n  @include media.on-medium {\n    // @include typography.relative-font-size(42);\n    @include typography.relative-font-size(50);\n  }\n\n  @include media.on-mobile {\n    @include typography.relative-font-size(36);\n  }\n}\n\n%heading-l {\n  @include typography.relative-font-size(32);\n  line-height: 1.4;\n\n  @include media.on-medium {\n    // @include typography.relative-font-size(26);\n    @include typography.relative-font-size(28);\n  }\n\n  @include media.on-mobile {\n    @include typography.relative-font-size(24);\n  }\n}\n\n%heading-m {\n  @include typography.relative-font-size(20);\n  line-height: 1.6;\n}\n\n%heading-s {\n  @include typography.relative-font-size(18);\n  line-height: 1.6;\n}\n\n.tna-heading {\n  @extend %heading;\n\n  &--xl {\n    @extend %heading-xl;\n  }\n\n  &--l {\n    @extend %heading-l;\n  }\n\n  &--m {\n    @extend %heading-m;\n  }\n\n  &--s {\n    @extend %heading-s;\n  }\n}\n\n.tna-hgroup {\n  &__supertitle {\n    margin: 0 0 0.5rem;\n\n    @extend %chip;\n  }\n\n  &__title {\n    margin: 0;\n\n    display: block;\n\n    @extend %heading;\n  }\n\n  &--xl &__title {\n    @extend %heading-xl;\n  }\n\n  &--l &__title {\n    @extend %heading-l;\n  }\n\n  &--m &__title {\n    @extend %heading-m;\n  }\n\n  &--s &__title {\n    @extend %heading-s;\n  }\n}\n\n.tna-heading,\n.tna-hgroup {\n  margin-top: 3rem;\n  margin-bottom: 1rem;\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n.tna-blockquote {\n  margin-top: 0;\n  margin-right: 0;\n  margin-left: 0;\n  padding: 1rem 1rem 1rem 2rem;\n\n  @include colour.colour-border(\"accent-background\", 0.35rem, solid, left);\n\n  @include spacing.space-below;\n\n  &__quote {\n    font-weight: 700;\n  }\n\n  &__author {\n    font-style: italic;\n\n    .tna-blockquote & {\n      margin: 1rem 0 0;\n    }\n\n    &::before {\n      content: \"\\2014\" \" \";\n    }\n  }\n}\n\n.tna-scene-setter {\n  @include typography.detail-font;\n  @include colour.colour-font(\"font-dark\");\n  @include typography.relative-font-size(30);\n  line-height: math.div(50, 30);\n\n  @include spacing.space-below;\n\n  @include media.on-mobile {\n    @include typography.relative-font-size(24);\n    line-height: 2;\n  }\n\n  a {\n    color: inherit;\n    text-decoration-thickness: 2px;\n\n    &:hover {\n      text-decoration-thickness: 4.5px;\n    }\n  }\n}\n\n.tna-columns {\n  column-gap: grid.$gutter-width;\n\n  &--2 {\n    column-count: 2;\n  }\n\n  &--3 {\n    column-count: 3;\n  }\n\n  @include media.on-mobile {\n    column-gap: grid.$gutter-width-mobile;\n  }\n\n  @include media.on-small {\n    @for $i from 1 through 4 {\n      &--#{$i}-small {\n        column-count: $i;\n      }\n    }\n  }\n\n  @include media.on-tiny {\n    @for $i from 1 through 4 {\n      &--#{$i}-tiny {\n        column-count: $i;\n      }\n    }\n  }\n\n  &__block {\n    break-inside: avoid;\n  }\n\n  &:has(&__block:only-of-type) {\n    column-count: 1;\n  }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n\n%space-below {\n  margin-bottom: 2rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n@mixin space-below {\n  @extend %space-below;\n}\n\n@function spacing($size) {\n  @return map.get(spacing.$spacing, $size);\n}\n\n@function spacing-mobile($size) {\n  @return map.get(spacing.$spacing-mobile, $size);\n}\n",".tna-visually-hidden {\n  width: 1px !important;\n  height: 1px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n\n  position: absolute !important;\n  top: -9999px !important;\n  left: -9999px !important;\n  z-index: -1 !important;\n\n  overflow: hidden !important;\n\n  clip: rect(0, 0, 0, 0) !important;\n\n  border: 0 !important;\n\n  background-color: transparent !important;\n\n  &::before,\n  &::after {\n    content: \"\\00a0\";\n  }\n}\n","@use \"sass:map\";\n@use \"../features\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour) {\n  @return map.get(colour.$colour-palette-brand, $colour);\n}\n\n@mixin colour-css-vars() {\n  @each $name, $value in colour.$colour-palette-default {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-dark() {\n  @each $name, $value in colour.$colour-palette-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast() {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent: #{brand-colour(\"yellow\")} !important;\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{rgba(brand-colour(\"black\"), 0.7)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{rgba(brand-colour(\"black\"), 0.5)} !important;\n    --accent-keyline-dark: #{rgba(brand-colour(\"black\"), 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{rgba(brand-colour(\"white\"), 0.7)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{rgba(brand-colour(\"white\"), 0.5)} !important;\n    --accent-keyline-dark: #{rgba(brand-colour(\"white\"), 0.8)} !important;\n\n    @if $colour == \"black\" {\n      // --accent: #{brand-colour(\"light-grey\")} !important;\n      // --accent-background: #{brand-colour(\"black\")} !important;\n      // --accent-background-light: #{brand-colour(\"light-grey\")} !important;\n      // --button-accent-text: #{brand-colour(\"black\")} !important;\n      // --button-accent-background: #{brand-colour(\"grey\")} !important;\n    } @else {\n      --button-accent-text: #{brand-colour(\"white\")} !important;\n      @if $colour == \"pink\" {\n        --accent: #{brand-colour(\"pink\")} !important;\n        --accent-background: #{brand-colour(\"maroon\")} !important;\n        --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n        --button-accent-background: #{brand-colour(\"maroon\")} !important;\n      } @else if $colour == \"orange\" {\n        --accent: #{brand-colour(\"orange\")} !important;\n        --accent-background: #{brand-colour(\"chestnut\")} !important;\n        --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n        --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n      } @else if $colour == \"green\" {\n        --accent: #{brand-colour(\"green\")} !important;\n        --accent-background: #{brand-colour(\"forest\")} !important;\n        --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n        --button-accent-background: #{brand-colour(\"forest\")} !important;\n      } @else if $colour == \"blue\" {\n        --accent: #{brand-colour(\"blue\")} !important;\n        --accent-background: #{brand-colour(\"navy\")} !important;\n        --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n        --button-accent-background: #{brand-colour(\"navy\")} !important;\n      }\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $important: false) {\n  outline-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  outline-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%fixed {\n  @include colour-css-vars;\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin fixed {\n  @extend %fixed;\n}\n\n%invert {\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"contrast-background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin invert {\n  @extend %invert;\n}\n\n%invert-on-mobile {\n  @include media.on-mobile {\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"contrast-background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin invert-on-mobile {\n  @extend %invert-on-mobile;\n}\n\n%accent {\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link-visited);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"accent-background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%light-accent-background {\n  @include colour-background(\"accent-background-light\");\n\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n}\n\n@mixin light-accent-background {\n  @extend %light-accent-background;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n","@use \"../features\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n:root {\n  @include colour.colour-css-vars;\n}\n\n.tna-template {\n  min-width: 320px;\n  width: 100%;\n  height: 100%;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n\n  font-size: #{typography.$base-font-size-px}px;\n\n  @include colour.colour-background(\"page-background\");\n\n  accent-color: var(--accent);\n\n  &--system-theme {\n    @include colour.colour-css-vars;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour.colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) {\n      @include colour.colour-css-vars-high-contrast;\n\n      * {\n        background-image: none !important;\n      }\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour.colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  &--light-theme {\n    @include colour.colour-css-vars;\n  }\n\n  &--dark-theme {\n    @include colour.colour-css-vars-dark;\n  }\n\n  &--high-contrast-theme {\n    @include colour.colour-css-vars-high-contrast;\n\n    * {\n      background-image: none !important;\n    }\n\n    &.tna-template--dark-theme {\n      @include colour.colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  @include colour.accent-css-vars(\"black\"); // TODO: Temp\n\n  // &--black-accent {\n  //   @include colour.accent-css-vars(\"black\");\n  // }\n\n  &--yellow-accent {\n    @include colour.accent-css-vars(\"yellow\");\n  }\n\n  &--pink-accent {\n    @include colour.accent-css-vars(\"pink\");\n  }\n\n  &--orange-accent {\n    @include colour.accent-css-vars(\"orange\");\n  }\n\n  &--green-accent {\n    @include colour.accent-css-vars(\"green\");\n  }\n\n  &--blue-accent {\n    @include colour.accent-css-vars(\"blue\");\n  }\n\n  @media (prefers-reduced-motion) {\n    * {\n      animation: none !important;\n      transition: none !important;\n    }\n  }\n}\n\n.tna-template__body {\n  min-height: 100%;\n  margin: 0;\n  padding: 0;\n\n  overflow: auto;\n\n  &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n    display: flex;\n    flex-direction: column;\n\n    #main-content[role=\"main\"] {\n      flex: 1;\n    }\n  }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n  max-width: 100%;\n\n  display: block;\n}\n\nvideo,\ncanvas {\n  width: 100%;\n}\n\n[hidden] {\n  display: none;\n}\n\n*:focus {\n  // outline: 0.3125rem colour.$focus-colour solid;\n  outline: 0.3125rem solid;\n  @include colour.colour-outline(\"focus-outline\");\n  outline-offset: 0.125rem;\n}\n\nhr {\n  margin: 2rem 0;\n\n  border-width: 1px 0 0;\n  @include colour.colour-border(\"keyline\");\n  border-style: solid;\n\n  // @include colour.on-high-contrast {\n  //   border-style: solid;\n  // }\n}\n\n.tna-section {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n\n  @include media.on-mobile {\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n}\n\n.tna-aside {\n  padding: 2rem;\n\n  @include spacing.space-below;\n\n  @include media.on-mobile {\n    padding: 1rem;\n  }\n\n  @include colour.on-high-contrast {\n    @include colour.colour-border(\"keyline-dark\", 1px);\n  }\n}\n\n.tna-background--contrast {\n  @include colour.invert;\n}\n\n.tna-background--accent {\n  @include colour.accent;\n}\n\n.tna-background--accent-light {\n  @include colour.light-accent-background;\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n","@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n      .tna-\\!--no-#{$property}-vertical#{$suffix} {\n        #{$property}-#{$direction}: 0 !important;\n      }\n    }\n  }\n}\n\n@mixin overrides($spacing, $suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in $spacing {\n        .tna-\\!--#{$property}-#{$direction}-#{$size}#{$suffix},\n        .tna-\\!--#{$property}-vertical-#{$size}#{$suffix} {\n          #{$property}-#{$direction}: #{$amount} !important;\n        }\n      }\n    }\n  }\n}\n\n@include no-spacing-generator;\n@include overrides(spacing.$spacing);\n\n@include media.on-medium {\n  @include no-spacing-generator(\"medium\");\n  @include overrides(spacing.$spacing, \"medium\");\n}\n\n@include media.on-small {\n  @include no-spacing-generator(\"small\");\n  @include overrides(spacing.$spacing-mobile, \"small\");\n}\n\n@include media.on-tiny {\n  @include no-spacing-generator(\"tiny\");\n  @include overrides(spacing.$spacing-mobile, \"tiny\");\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, typography.$base-font-size-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$font-weight-main;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$font-weight-main-bold;\n}\n\n@mixin main-font {\n  font-family: typography.$font-family-main;\n  @include main-font-weight;\n}\n\n@mixin heading-font {\n  font-family: typography.$font-family-heading;\n  font-weight: typography.$font-weight-heading;\n}\n\n@mixin detail-font {\n  font-family: typography.$font-family-detail;\n  font-weight: typography.$font-weight-detail;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: #{math.div(typography.$base-font-size-px, 14)};\n  // line-height: 1;\n}\n","$base-font-size-px: 16;\n\n$interactive-text-decoration-thickness: 3.5px;\n\n$font-family-main: \"Open Sans\", serif;\n// $font-weight-main: 500;\n$font-weight-main: normal;\n// $font-weight-main-bold: 700;\n$font-weight-main-bold: bold;\n\n$font-family-heading: supria-sans-condensed, \"Arial Narrow\", sans-serif;\n$font-weight-heading: 400;\n\n$font-family-detail: \"Roboto Mono\", monospace;\n// $font-weight-detail: 400;\n$font-weight-detail: normal;\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-mobile: 1.5rem !default;\n\n$column-count: 12 !default;\n$column-count-medium: 6 !default;\n$column-count-small: 4 !default;\n$column-count-tiny: 2 !default;\n","@use \"../../tools/spacing\";\n@use \"../../utilities\";\n\n.tna-filters {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n\n  @include spacing.space-below;\n\n  &__item {\n  }\n\n  &__item--selected #{&}__link {\n    background-color: #004c7e;\n\n    &,\n    &:link,\n    &:visited {\n      color: #fff;\n    }\n  }\n\n  &__link {\n    padding: 0.125rem 0.75rem;\n\n    text-decoration: none;\n\n    background-color: #d4e5ef;\n\n    border-radius: 99rem;\n\n    transition:\n      color 200ms,\n      background-color 200ms;\n\n    &,\n    &:link,\n    &:visited {\n      color: #000;\n    }\n\n    &:hover {\n      color: #fff;\n\n      background-color: #004c7e;\n\n      transition:\n        color 50ms,\n        background-color 50ms;\n    }\n  }\n}\n"]}

package/nationalarchives/components/filters/filters.scss

@@ -0,0 +1,53 @@
+@use "../../tools/spacing";
+@use "../../utilities";
+
+.tna-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  @include spacing.space-below;
+
+  &__item {
+  }
+
+  &__item--selected #{&}__link {
+    background-color: #004c7e;
+
+    &,
+    &:link,
+    &:visited {
+      color: #fff;
+    }
+  }
+
+  &__link {
+    padding: 0.125rem 0.75rem;
+
+    text-decoration: none;
+
+    background-color: #d4e5ef;
+
+    border-radius: 99rem;
+
+    transition:
+      color 200ms,
+      background-color 200ms;
+
+    &,
+    &:link,
+    &:visited {
+      color: #000;
+    }
+
+    &:hover {
+      color: #fff;
+
+      background-color: #004c7e;
+
+      transition:
+        color 50ms,
+        background-color 50ms;
+    }
+  }
+}

package/nationalarchives/components/footer/_index.scss

@@ -1,270 +1 @@
-@use "../../tools/colour";
-@use "../../tools/typography";
-@use "../../tools/media";
-
-.tna-footer {
-  @include colour.invert;
-
-  padding-top: 1rem;
-  padding-bottom: 3rem;
-
-  // @include colour.colour-font("font-base");
-
-  // --link: colour.brand-colour("white");
-
-  @include colour.on-high-contrast {
-    @include colour.colour-border("keyline", 1px, solid, top);
-  }
-
-  .tna-logo {
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-
-    &__background {
-      fill: transparent;
-    }
-
-    &__foreground {
-      fill: currentColor;
-    }
-  }
-
-  &__title {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  &__address {
-    font-style: normal;
-  }
-
-  &__meta {
-    margin-top: 1rem;
-
-    @include typography.relative-font-size(16);
-  }
-
-  &__social {
-    margin-top: 2rem;
-
-    &-items {
-    }
-
-    &-item {
-      margin-right: 1.5rem;
-      margin-bottom: calc(1rem - 3px);
-
-      display: inline-block;
-
-      vertical-align: top;
-
-      &-link {
-        padding: 0 3px;
-
-        display: inline-block;
-
-        border-top: 3px transparent solid;
-        border-bottom: 3px transparent solid;
-
-        &-image {
-        }
-
-        &-text {
-        }
-
-        &:has(#{&}-image) {
-          &:hover {
-            @include colour.colour-border("link", 3px, solid, bottom);
-          }
-        }
-      }
-    }
-  }
-
-  &__mailing-list {
-    margin-top: 2rem;
-    padding: 1rem;
-
-    @include typography.relative-font-size(16);
-
-    @include colour.colour-border("keyline-dark", 1px, dashed);
-
-    // background: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23fff' stroke-width='2' stroke-dasharray='4%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e") rgba(colour.brand-colour("white"), 0.1);
-    // background-color: rgba(colour.brand-colour("white"), 0.1);
-    background-color: rgba(#fff, 0.1);
-  }
-
-  &__navigation {
-    &-block {
-      padding-top: 2rem;
-
-      &-heading {
-      }
-
-      &-items {
-      }
-
-      &-item {
-        padding-top: 0.375rem;
-        padding-bottom: 0.375rem;
-
-        @include colour.colour-border("keyline", 1px, solid, bottom);
-
-        &-link {
-          text-decoration: none;
-
-          &:hover {
-            @include typography.interacted-text-decoration;
-          }
-
-          &-icon {
-            width: 0.825rem;
-            height: 0.825rem;
-            margin-right: 0.125rem;
-            margin-left: 0.5rem;
-
-            display: inline-block;
-
-            position: relative;
-
-            vertical-align: middle;
-
-            border: 1px #fff solid;
-
-            &::before {
-              position: absolute;
-              top: -0.25rem;
-              right: -0.25rem;
-              z-index: 2;
-
-              border: 0.25rem transparent solid;
-              border-top-color: #fff;
-              border-right-color: #fff;
-
-              content: "";
-            }
-
-            &::after {
-              width: 4px;
-              height: 13px;
-
-              position: absolute;
-              top: -0.125rem;
-              right: -0.125rem;
-              z-index: 1;
-
-              background-color: #fff;
-
-              outline: 3px transparent solid;
-              @include colour.colour-outline("contrast-background");
-
-              transform: rotate(45deg) translateX(50%);
-              transform-origin: 100% 0;
-
-              content: "";
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &__legal {
-    padding-top: 3rem;
-
-    @include typography.relative-font-size(16);
-
-    &-items {
-      margin-bottom: 0;
-
-      text-align: center;
-
-      @include media.on-tiny {
-        text-align: inherit;
-      }
-    }
-
-    &-item {
-      padding: 0.5rem;
-
-      display: inline-block;
-
-      @include media.on-tiny {
-        display: block;
-      }
-
-      &-link {
-      }
-    }
-  }
-
-  hr {
-    margin-top: 1.5rem;
-    margin-bottom: 1rem;
-  }
-
-  &__licence {
-    @include typography.relative-font-size(16);
-
-    &.tna-container {
-      align-items: center;
-    }
-
-    .tna-column {
-      margin-top: 0.5rem;
-    }
-  }
-
-  &__licence-logo {
-    display: block;
-  }
-
-  &__govuk {
-    text-align: center;
-  }
-
-  &__govuk-link {
-    display: inline-block;
-  }
-
-  &__govuk-logotype-crown {
-    margin: 0 auto;
-    display: block;
-  }
-
-  @include media.on-mobile {
-    padding-top: 0;
-    padding-bottom: 2rem;
-  }
-
-  @include colour.on-high-contrast {
-    &__social {
-      &-item {
-        &-link {
-          background-color: colour.brand-colour("black");
-
-          outline: 1px transparent solid;
-          @include colour.colour-outline("keyline-dark");
-
-          &:hover {
-            background-color: inherit;
-          }
-        }
-      }
-    }
-
-    &__navigation {
-      &-block {
-        &-items {
-          @include colour.colour-border("keyline-dark", 0.25rem, solid, top);
-        }
-      }
-    }
-
-    &__mailing-list {
-      background-color: transparent;
-
-      @include colour.colour-border("keyline-dark", 1px, solid);
-    }
-  }
-}
+@use "footer";