npm - @nationalarchives/frontend - Versions diffs - 0.11.3 → 0.13.0 - Mend

@nationalarchives/frontend 0.11.3 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/nationalarchives/components/footer/footer.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-footer__inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-footer__inner{padding-top:16px;padding-bottom:48px}.tna-footer__theme-selector .tna-button-group{justify-content:flex-end}.tna-footer__theme-selector .tna-button{font-weight:700}@media(forced-colors: active){.tna-footer__theme-selector{display:none}}.tna-footer .tna-logo{margin-top:32px}.tna-footer .tna-logo__background{fill:rgba(0,0,0,0)}.tna-footer .tna-logo__foreground{fill:currentColor}.tna-footer__title{margin-top:16px;margin-bottom:0;padding-top:0}.tna-footer__meta{margin-top:16px;font-size:1rem}.tna-footer__social{margin-top:32px}.tna-footer__social-items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px}.tna-footer__social-item-link{width:calc(2rem + 8px);height:2rem;padding:4px;display:block;line-height:1;text-align:center;border:0 rgba(0,0,0,0) solid;border-width:4px 0}.tna-footer__social-item-link svg{height:2rem;display:inline-block}.tna-footer__social-item-link svg path{fill:currentColor}.tna-footer__social-item-link:hover,.tna-footer__social-item-link:focus-visible{border-bottom:4px var(--link, #005fa3) solid}.tna-footer__mailing-list{margin-top:32px;padding:16px;font-size:1rem;background-color:hsla(0,0%,100%,.14)}.tna-footer__navigation-block{padding-top:32px}.tna-footer__navigation-block-item{padding-top:6px;padding-bottom:6px;font-size:1rem;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-footer__navigation-block-item-link{display:inline-block;text-decoration:none}.tna-footer__navigation-block-item-link:hover,.tna-footer__navigation-block-item-link:focus-visible{text-decoration:underline;text-decoration-thickness:3.~~5px~~}.tna-footer__navigation-block-item-link .fa-solid{margin-left:12px}.tna-footer__legal{padding-top:48px;font-size:1rem}.tna-footer__legal-items{margin-bottom:0;text-align:center}@media(max-width: 30em){.tna-footer__legal-items{text-align:inherit}}.tna-footer__legal-item{padding:8px;display:inline-block}@media(max-width: 30em){.tna-footer__legal-item{display:block}}.tna-footer hr{margin-top:24px;margin-bottom:8px}.tna-footer__licence{font-size:1rem}.tna-footer__licence.tna-container{align-items:center}.tna-footer__licence .tna-column{margin-top:16px}.tna-footer__licence-logo{display:block}.tna-footer__govuk{text-align:center}.tna-footer__govuk-link{display:inline-block}.tna-footer__govuk-logotype-crown{margin:0 auto 2px;display:block}@media(max-width: 48em){.tna-footer__inner{padding-top:0;padding-bottom:32px}}@media(prefers-contrast: more){.tna-footer__theme-selector{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(forced-colors: active){.tna-footer{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}@media(prefers-contrast: more){.tna-footer{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}/# sourceMappingURL=footer.css.map /
1	+ .tna-footer__inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-footer__inner{padding-top:16px;padding-bottom:48px}.tna-footer__theme-selector .tna-button-group{justify-content:flex-end}.tna-footer__theme-selector .tna-button{font-weight:700}@media(forced-colors: active){.tna-footer__theme-selector{display:none}}.tna-footer .tna-logo{margin-top:32px}.tna-footer .tna-logo__background{fill:rgba(0,0,0,0)}.tna-footer .tna-logo__foreground{fill:currentColor}.tna-footer__title{margin-top:16px;margin-bottom:0;padding-top:0}.tna-footer__meta{margin-top:16px;font-size:1rem}.tna-footer__social{margin-top:32px}.tna-footer__social-items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px}.tna-footer__social-item-link{width:calc(2rem + 8px);height:2rem;padding:4px;display:block;line-height:1;text-align:center;border:0 rgba(0,0,0,0) solid;border-width:4px 0}.tna-footer__social-item-link svg{height:2rem;display:inline-block}.tna-footer__social-item-link svg path{fill:currentColor}.tna-footer__social-item-link:hover,.tna-footer__social-item-link:focus-visible{border-bottom:4px var(--link, #005fa3) solid}.tna-footer__mailing-list{margin-top:32px;padding:16px;font-size:1rem;background-color:hsla(0,0%,100%,.14);overflow:hidden;border-radius:4px}.tna-footer__navigation-block{padding-top:32px}.tna-footer__navigation-block-item{padding-top:6px;padding-bottom:6px;font-size:1rem;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-footer__navigation-block-item-link{display:inline-block;text-decoration:none}.tna-footer__navigation-block-item-link:hover,.tna-footer__navigation-block-item-link:focus-visible{text-decoration:underline;text-decoration-thickness:0.25rem}.tna-footer__navigation-block-item-link .fa-solid{margin-left:12px}.tna-footer__legal{padding-top:48px;font-size:1rem}.tna-footer__legal-items{margin-bottom:0;text-align:center}@media(max-width: 30em){.tna-footer__legal-items{text-align:inherit}}.tna-footer__legal-item{padding:8px;display:inline-block}@media(max-width: 30em){.tna-footer__legal-item{display:block}}.tna-footer hr{margin-top:24px;margin-bottom:8px}.tna-footer__licence{font-size:1rem}.tna-footer__licence.tna-container{align-items:center}.tna-footer__licence .tna-column{margin-top:16px}.tna-footer__licence-logo{display:block}.tna-footer__govuk{text-align:center}.tna-footer__govuk-link{display:inline-block}.tna-footer__govuk-logotype-crown{margin:0 auto 2px;display:block}@media(max-width: 48em){.tna-footer__inner{padding-top:0;padding-bottom:32px}}@media(prefers-contrast: more){.tna-footer__theme-selector{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(forced-colors: active){.tna-footer{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}@media(prefers-contrast: more){.tna-footer{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}/# sourceMappingURL=footer.css.map /

package/nationalarchives/components/footer/footer.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/footer/footer.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAsMA,mBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA5JA,4CAJA,gCC7CA,mBAGE,iBACA,oBAIA,8CACE,yBAGF,wCCKF,YCYsB,IHuatB,8BC7bA,4BAUI,cAOJ,sBACE,gBAEA,kCACE,mBAGF,kCACE,kBAIJ,mBACE,gBACA,gBACA,cAMF,kBACE,gBC9CF,eDmDA,oBACE,gBAEA,0BACE,aACA,eACA,uBACA,QAIA,8BACE,uBACA,YACA,YAEA,cAEA,cAEA,kBAEA,6BACA,mBAEA,kCACE,YAEA,qBAEA,uCACE,kBAOJ,gFDvBF,6CC+BJ,0BACE,gBACA,aCnGF,eDuGE,qCAIA,8BACE,iBAQA,mCACE,gBACA,mBCtHN,eFkEI,+DC0DE,wCACE,qBAEA,qBAEA,oGCzER,0BACA,0BCpCsC,MFiH9B,kDACE,iBAOV,mBACE,iBC/IF,eDmJE,yBACE,gBAEA,kBGlGJ,wBH+FE,yBAMI,oBAIJ,wBACE,YAEA,qBG5GJ,wBHyGE,wBAMI,eAQN,eACE,gBACA,kBAGF,qBChLA,eDmLE,mCACE,mBAGF,iCACE,gBAIJ,0BACE,cAGF,mBACE,kBAEA,wBACE,qBAGF,kCACE,kBAEA,cG9HJ,wBHmIE,mBACE,cACA,qBD6OJ,+BCxOE,4BDpJE,gEAkYJ,8BCrcF,YDmEM,0DC8JE,oCD9JF,0DCoKF,0BACE,+BD3JA,uDAkXJ,+BC/bF,YDmEM,0DC8JE,oCD9JF,0DCoKF,0BACE,+BD3JA","file":"footer.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n 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 border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-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(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-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(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\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 --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\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 --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-footer {\n &__inner {\n @include colour.contrast;\n\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(3);\n }\n\n &__theme-selector {\n .tna-button-group {\n justify-content: flex-end;\n }\n\n .tna-button {\n @include typography.main-font-weight-bold;\n }\n\n @include colour.on-forced-colours {\n display: none;\n }\n }\n\n &__theme-selector-button {\n }\n\n .tna-logo {\n margin-top: spacing.space(2);\n\n &__background {\n fill: transparent;\n }\n\n &__foreground {\n fill: currentColor;\n }\n }\n\n &__title {\n margin-top: spacing.space(1);\n margin-bottom: 0;\n padding-top: 0;\n }\n\n &__address {\n }\n\n &__meta {\n margin-top: spacing.space(1);\n\n @include typography.font-size(16);\n }\n\n &__social {\n margin-top: spacing.space(2);\n\n &-items {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n gap: spacing.space(0.3125);\n }\n\n &-item {\n &-link {\n width: calc(2rem + 8px);\n height: 2rem;\n padding: 4px;\n\n display: block;\n\n line-height: 1;\n\n text-align: center;\n\n border: 0 transparent solid;\n border-width: 4px 0;\n\n svg {\n height: 2rem;\n\n display: inline-block;\n\n path {\n fill: currentColor;\n }\n }\n\n &-text {\n }\n\n &:hover,\n &:focus-visible {\n @include colour.colour-border(\"link\", 4px, solid, bottom);\n }\n }\n }\n }\n\n &__mailing-list {\n margin-top: spacing.space(2);\n padding: spacing.space(1);\n\n @include typography.font-size(16);\n\n background-color: rgb(255 255 255 / 14%);\n }\n\n &__navigation {\n &-block {\n padding-top: spacing.space(2);\n\n &-heading {\n }\n\n &-items {\n }\n\n &-item {\n padding-top: spacing.space(0.375);\n padding-bottom: spacing.space(0.375);\n\n @include typography.font-size(16);\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &-link {\n display: inline-block;\n\n text-decoration: none;\n\n &:hover,\n &:focus-visible {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid {\n margin-left: spacing.space(0.75);\n }\n }\n }\n }\n }\n\n &__legal {\n padding-top: spacing.space(3);\n\n @include typography.font-size(16);\n\n &-items {\n margin-bottom: 0;\n\n text-align: center;\n\n @include media.on-tiny {\n text-align: inherit;\n }\n }\n\n &-item {\n padding: spacing.space(0.5);\n\n display: inline-block;\n\n @include media.on-tiny {\n display: block;\n }\n\n &-link {\n }\n }\n }\n\n hr {\n margin-top: spacing.space(1.5);\n margin-bottom: spacing.space(0.5);\n }\n\n &__licence {\n @include typography.font-size(16);\n\n &.tna-container {\n align-items: center;\n }\n\n .tna-column {\n margin-top: spacing.space(1);\n }\n }\n\n &__licence-logo {\n display: block;\n }\n\n &__govuk {\n text-align: center;\n\n &-link {\n display: inline-block;\n }\n\n &-logotype-crown {\n margin: 0 auto spacing.space(0.125);\n\n display: block;\n }\n }\n\n @include media.on-mobile {\n &__inner {\n padding-top: 0;\n padding-bottom: spacing.space(2);\n }\n }\n\n @include colour.on-high-contrast {\n &__theme-selector {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.thick-keyline-dark(top);\n\n &__navigation {\n &-block {\n &-items {\n @include colour.thick-keyline-dark(top);\n }\n }\n }\n\n &__mailing-list {\n background-color: transparent;\n\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\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"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/footer/footer.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAsMA,mBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA5JA,4CAJA,gCC5CA,mBAGE,iBACA,oBAIA,8CACE,yBAGF,wCCIF,YCgBsB,IHmatB,8BC5bA,4BAUI,cAOJ,sBACE,gBAEA,kCACE,mBAGF,kCACE,kBAIJ,mBACE,gBACA,gBACA,cAMF,kBACE,gBC/CF,eDoDA,oBACE,gBAEA,0BACE,aACA,eACA,uBACA,QAIA,8BACE,uBACA,YACA,YAEA,cAEA,cAEA,kBAEA,6BACA,mBAEA,kCACE,YAEA,qBAEA,uCACE,kBAOJ,gFDxBF,6CCgCJ,0BACE,gBACA,aCpGF,eDwGE,qCG3GF,gBAEA,cCJsB,IJmHpB,8BACE,iBAQA,mCACE,gBACA,mBCzHN,eFkEI,+DC6DE,wCACE,qBAEA,qBAEA,oGCtER,0BACA,0BCtCsC,QFgH9B,kDACE,iBAOV,mBACE,iBClJF,eDsJE,yBACE,gBAEA,kBKrGJ,wBLkGE,yBAMI,oBAIJ,wBACE,YAEA,qBK/GJ,wBL4GE,wBAMI,eAQN,eACE,gBACA,kBAGF,qBCnLA,eDsLE,mCACE,mBAGF,iCACE,gBAIJ,0BACE,cAGF,mBACE,kBAEA,wBACE,qBAGF,kCACE,kBAEA,cKjIJ,wBLsIE,mBACE,cACA,qBD0OJ,+BCrOE,4BDvJE,gEAkYJ,8BCpcF,YDkEM,0DCiKE,oCDjKF,0DCuKF,0BACE,+BD9JA,uDAkXJ,+BC9bF,YDkEM,0DCiKE,oCDjKF,0DCuKF,0BACE,+BD9JA","file":"footer.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n 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 border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-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(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-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(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\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 --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\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 --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-footer {\n &__inner {\n @include colour.contrast;\n\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(3);\n }\n\n &__theme-selector {\n .tna-button-group {\n justify-content: flex-end;\n }\n\n .tna-button {\n @include typography.main-font-weight-bold;\n }\n\n @include colour.on-forced-colours {\n display: none;\n }\n }\n\n &__theme-selector-button {\n }\n\n .tna-logo {\n margin-top: spacing.space(2);\n\n &__background {\n fill: transparent;\n }\n\n &__foreground {\n fill: currentColor;\n }\n }\n\n &__title {\n margin-top: spacing.space(1);\n margin-bottom: 0;\n padding-top: 0;\n }\n\n &__address {\n }\n\n &__meta {\n margin-top: spacing.space(1);\n\n @include typography.font-size(16);\n }\n\n &__social {\n margin-top: spacing.space(2);\n\n &-items {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n gap: spacing.space(0.3125);\n }\n\n &-item {\n &-link {\n width: calc(2rem + 8px);\n height: 2rem;\n padding: 4px;\n\n display: block;\n\n line-height: 1;\n\n text-align: center;\n\n border: 0 transparent solid;\n border-width: 4px 0;\n\n svg {\n height: 2rem;\n\n display: inline-block;\n\n path {\n fill: currentColor;\n }\n }\n\n &-text {\n }\n\n &:hover,\n &:focus-visible {\n @include colour.colour-border(\"link\", 4px, solid, bottom);\n }\n }\n }\n }\n\n &__mailing-list {\n margin-top: spacing.space(2);\n padding: spacing.space(1);\n\n @include typography.font-size(16);\n\n background-color: rgb(255 255 255 / 14%);\n\n @include borders.rounded-border;\n }\n\n &__navigation {\n &-block {\n padding-top: spacing.space(2);\n\n &-heading {\n }\n\n &-items {\n }\n\n &-item {\n padding-top: spacing.space(0.375);\n padding-bottom: spacing.space(0.375);\n\n @include typography.font-size(16);\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &-link {\n display: inline-block;\n\n text-decoration: none;\n\n &:hover,\n &:focus-visible {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid {\n margin-left: spacing.space(0.75);\n }\n }\n }\n }\n }\n\n &__legal {\n padding-top: spacing.space(3);\n\n @include typography.font-size(16);\n\n &-items {\n margin-bottom: 0;\n\n text-align: center;\n\n @include media.on-tiny {\n text-align: inherit;\n }\n }\n\n &-item {\n padding: spacing.space(0.5);\n\n display: inline-block;\n\n @include media.on-tiny {\n display: block;\n }\n\n &-link {\n }\n }\n }\n\n hr {\n margin-top: spacing.space(1.5);\n margin-bottom: spacing.space(0.5);\n }\n\n &__licence {\n @include typography.font-size(16);\n\n &.tna-container {\n align-items: center;\n }\n\n .tna-column {\n margin-top: spacing.space(1);\n }\n }\n\n &__licence-logo {\n display: block;\n }\n\n &__govuk {\n text-align: center;\n\n &-link {\n display: inline-block;\n }\n\n &-logotype-crown {\n margin: 0 auto spacing.space(0.125);\n\n display: block;\n }\n }\n\n @include media.on-mobile {\n &__inner {\n padding-top: 0;\n padding-bottom: spacing.space(2);\n }\n }\n\n @include colour.on-high-contrast {\n &__theme-selector {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.thick-keyline-dark(top);\n\n &__navigation {\n &-block {\n &-items {\n @include colour.thick-keyline-dark(top);\n }\n }\n }\n\n &__mailing-list {\n background-color: transparent;\n\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-underline-offset: typography.$interactable-text-decoration-offset;\n\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n overflow: hidden;\n\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$rounded-border-radius: 4px !default;\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"]}

package/nationalarchives/components/footer/footer.scss CHANGED Viewed

@@ -1,3 +1,4 @@
+@use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -108,6 +109,8 @@
     @include typography.font-size(16);
     background-color: rgb(255 255 255 / 14%);
+    @include borders.rounded-border;
   }
   &__navigation {

package/nationalarchives/components/gallery/analytics.js CHANGED Viewed

@@ -79,7 +79,7 @@ export default [
             "ArrowDown",
             "End",
             "Home",
-            "Escape",
+            // "Escape",
           ].includes(event.key),
         data: {
           value: ($el, $scope, event) => event.key,

package/nationalarchives/components/gallery/fixtures.json CHANGED Viewed

@@ -29,7 +29,7 @@
         ],
         "id": "test-gallery"
       },
-      "html": "<section class=\"tna-gallery\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the  gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\" aria-labelledby=\"test-gallery-item-1-tab\"><p class=\"tna-gallery__item-header\">Image 1 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__item-image\" alt=\"Photo 1\" width=\"600\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 1</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-2\" aria-labelledby=\"test-gallery-item-2-tab\"><p class=\"tna-gallery__item-header\">Image 2 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__item-image\" alt=\"Photo 2\" width=\"400\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 2</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-3\" aria-labelledby=\"test-gallery-item-3-tab\"><p class=\"tna-gallery__item-header\">Image 3 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__item-image\" alt=\"Photo 3\" width=\"400\" height=\"600\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 3</figcaption></figure></div></div><div class=\"tna-gallery__navigation-buttons\" hidden><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-prev\" aria-label=\"Previous image\"><span class=\"tna-gallery__navigation-button-label\"><span class=\"tna-gallery__navigation-button-icon\"></span>Previous</span></button><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-next\" aria-label=\"Next image\"><span class=\"tna-gallery__navigation-button-label\">Next<span class=\"tna-gallery__navigation-button-icon\"></span></span></button></div><div class=\"tna-gallery__navigation\" hidden><button type=\"button\" class=\"tna-gallery__navigation-item\" id=\"test-gallery-item-1-tab\" aria-label=\"Image 1 of 3\" aria-controls=\"test-gallery-item-1\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"600\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">1</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" id=\"test-gallery-item-2-tab\" aria-label=\"Image 2 of 3\" aria-controls=\"test-gallery-item-2\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">2</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" id=\"test-gallery-item-3-tab\" aria-label=\"Image 3 of 3\" aria-controls=\"test-gallery-item-3\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"600\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">3</span><span class=\"tna-visually-hidden\"> of 3</span></button></div></section>"
+      "html": "<section class=\"tna-gallery\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the  gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\"><p class=\"tna-gallery__item-header\">Image 1 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__item-image\" alt=\"Photo 1\" width=\"600\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 1</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-2\"><p class=\"tna-gallery__item-header\">Image 2 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__item-image\" alt=\"Photo 2\" width=\"400\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 2</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-3\"><p class=\"tna-gallery__item-header\">Image 3 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__item-image\" alt=\"Photo 3\" width=\"400\" height=\"600\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 3</figcaption></figure></div></div><div class=\"tna-gallery__navigation-buttons\" hidden><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-prev\" aria-label=\"Previous image\"><span class=\"tna-gallery__navigation-button-label\"><span class=\"tna-gallery__navigation-button-icon\"></span>Previous</span></button><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-next\" aria-label=\"Next image\"><span class=\"tna-gallery__navigation-button-label\">Next<span class=\"tna-gallery__navigation-button-icon\"></span></span></button></div><div class=\"tna-gallery__navigation\" hidden><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 1 of 3\" aria-controls=\"test-gallery-item-1\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"600\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">1</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 2 of 3\" aria-controls=\"test-gallery-item-2\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">2</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 3 of 3\" aria-controls=\"test-gallery-item-3\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"600\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">3</span><span class=\"tna-visually-hidden\"> of 3</span></button></div></section>"
     },
     {
       "name": "bounded",
@@ -60,7 +60,7 @@
         "id": "test-gallery",
         "bounded": true
       },
-      "html": "<section class=\"tna-gallery tna-gallery--bounded\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the  gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\" aria-labelledby=\"test-gallery-item-1-tab\"><p class=\"tna-gallery__item-header\">Image 1 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__item-image\" alt=\"Photo 1\" width=\"600\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 1</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-2\" aria-labelledby=\"test-gallery-item-2-tab\"><p class=\"tna-gallery__item-header\">Image 2 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__item-image\" alt=\"Photo 2\" width=\"400\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 2</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-3\" aria-labelledby=\"test-gallery-item-3-tab\"><p class=\"tna-gallery__item-header\">Image 3 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__item-image\" alt=\"Photo 3\" width=\"400\" height=\"600\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 3</figcaption></figure></div></div><div class=\"tna-gallery__navigation-buttons\" hidden><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-prev\" aria-label=\"Previous image\"><span class=\"tna-gallery__navigation-button-label\"><span class=\"tna-gallery__navigation-button-icon\"></span>Previous</span></button><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-next\" aria-label=\"Next image\"><span class=\"tna-gallery__navigation-button-label\">Next<span class=\"tna-gallery__navigation-button-icon\"></span></span></button></div><div class=\"tna-gallery__navigation\" hidden><button type=\"button\" class=\"tna-gallery__navigation-item\" id=\"test-gallery-item-1-tab\" aria-label=\"Image 1 of 3\" aria-controls=\"test-gallery-item-1\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"600\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">1</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" id=\"test-gallery-item-2-tab\" aria-label=\"Image 2 of 3\" aria-controls=\"test-gallery-item-2\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">2</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" id=\"test-gallery-item-3-tab\" aria-label=\"Image 3 of 3\" aria-controls=\"test-gallery-item-3\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"600\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">3</span><span class=\"tna-visually-hidden\"> of 3</span></button></div></section>"
+      "html": "<section class=\"tna-gallery tna-gallery--bounded\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the  gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\"><p class=\"tna-gallery__item-header\">Image 1 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__item-image\" alt=\"Photo 1\" width=\"600\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 1</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-2\"><p class=\"tna-gallery__item-header\">Image 2 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__item-image\" alt=\"Photo 2\" width=\"400\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 2</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-3\"><p class=\"tna-gallery__item-header\">Image 3 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__item-image\" alt=\"Photo 3\" width=\"400\" height=\"600\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 3</figcaption></figure></div></div><div class=\"tna-gallery__navigation-buttons\" hidden><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-prev\" aria-label=\"Previous image\"><span class=\"tna-gallery__navigation-button-label\"><span class=\"tna-gallery__navigation-button-icon\"></span>Previous</span></button><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-next\" aria-label=\"Next image\"><span class=\"tna-gallery__navigation-button-label\">Next<span class=\"tna-gallery__navigation-button-icon\"></span></span></button></div><div class=\"tna-gallery__navigation\" hidden><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 1 of 3\" aria-controls=\"test-gallery-item-1\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"600\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">1</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 2 of 3\" aria-controls=\"test-gallery-item-2\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">2</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 3 of 3\" aria-controls=\"test-gallery-item-3\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"600\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">3</span><span class=\"tna-visually-hidden\"> of 3</span></button></div></section>"
     },
     {
       "name": "with title and text",
@@ -93,7 +93,7 @@
         ],
         "id": "test-gallery"
       },
-      "html": "<section class=\"tna-gallery\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"><h3 class=\"tna-heading-m\">My gallery</h3><p>Lorem ipsum</p></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the My gallery gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\" aria-labelledby=\"test-gallery-item-1-tab\"><p class=\"tna-gallery__item-header\">Image 1 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__item-image\" alt=\"Photo 1\" width=\"600\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 1</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-2\" aria-labelledby=\"test-gallery-item-2-tab\"><p class=\"tna-gallery__item-header\">Image 2 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__item-image\" alt=\"Photo 2\" width=\"400\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 2</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-3\" aria-labelledby=\"test-gallery-item-3-tab\"><p class=\"tna-gallery__item-header\">Image 3 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__item-image\" alt=\"Photo 3\" width=\"400\" height=\"600\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 3</figcaption></figure></div></div><div class=\"tna-gallery__navigation-buttons\" hidden><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-prev\" aria-label=\"Previous image\"><span class=\"tna-gallery__navigation-button-label\"><span class=\"tna-gallery__navigation-button-icon\"></span>Previous</span></button><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-next\" aria-label=\"Next image\"><span class=\"tna-gallery__navigation-button-label\">Next<span class=\"tna-gallery__navigation-button-icon\"></span></span></button></div><div class=\"tna-gallery__navigation\" hidden><button type=\"button\" class=\"tna-gallery__navigation-item\" id=\"test-gallery-item-1-tab\" aria-label=\"Image 1 of 3\" aria-controls=\"test-gallery-item-1\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"600\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">1</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" id=\"test-gallery-item-2-tab\" aria-label=\"Image 2 of 3\" aria-controls=\"test-gallery-item-2\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">2</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" id=\"test-gallery-item-3-tab\" aria-label=\"Image 3 of 3\" aria-controls=\"test-gallery-item-3\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"600\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">3</span><span class=\"tna-visually-hidden\"> of 3</span></button></div></section>"
+      "html": "<section class=\"tna-gallery\" data-module=\"tna-gallery\"><div class=\"tna-gallery__header\"><div class=\"tna-gallery__header-inner\"><h3 class=\"tna-heading-m\">My gallery</h3><p>Lorem ipsum</p></div><div class=\"tna-gallery__options tna-button-group tna-button-group--small\" hidden><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"enter-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z\"/></svg><span class=\"tna-visually-hidden\">View the My gallery gallery in </span>Full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"exit-fullscreen\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/></svg>Exit full screen</button><button class=\"tna-button tna-button--icon-only-mobile\" type=\"button\" hidden value=\"show-index\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z\"/></svg>See all images</button></div></div><div class=\"tna-gallery__items\"><div class=\"tna-gallery__item\" id=\"test-gallery-item-1\"><p class=\"tna-gallery__item-header\">Image 1 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__item-image\" alt=\"Photo 1\" width=\"600\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 1</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-2\"><p class=\"tna-gallery__item-header\">Image 2 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__item-image\" alt=\"Photo 2\" width=\"400\" height=\"400\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 2</figcaption></figure></div><div class=\"tna-gallery__item\" id=\"test-gallery-item-3\"><p class=\"tna-gallery__item-header\">Image 3 of 3</p><figure class=\"tna-gallery__item-figure\"><div class=\"tna-gallery__item-figure-inner\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__item-image\" alt=\"Photo 3\" width=\"400\" height=\"600\" loading=\"lazy\"></div><figcaption class=\"tna-gallery__item-description\">This is photo number 3</figcaption></figure></div></div><div class=\"tna-gallery__navigation-buttons\" hidden><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-prev\" aria-label=\"Previous image\"><span class=\"tna-gallery__navigation-button-label\"><span class=\"tna-gallery__navigation-button-icon\"></span>Previous</span></button><button type=\"button\" class=\"tna-gallery__navigation-button tna-gallery__navigation-next\" aria-label=\"Next image\"><span class=\"tna-gallery__navigation-button-label\">Next<span class=\"tna-gallery__navigation-button-icon\"></span></span></button></div><div class=\"tna-gallery__navigation\" hidden><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 1 of 3\" aria-controls=\"test-gallery-item-1\"><img src=\"https://picsum.photos/id/50/600/400\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"600\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">1</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 2 of 3\" aria-controls=\"test-gallery-item-2\"><img src=\"https://picsum.photos/id/51/600/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"400\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">2</span><span class=\"tna-visually-hidden\"> of 3</span></button><button type=\"button\" class=\"tna-gallery__navigation-item\" aria-label=\"Image 3 of 3\" aria-controls=\"test-gallery-item-3\"><img src=\"https://picsum.photos/id/52/400/600\" class=\"tna-gallery__navigation-item-image\" alt=\"\" width=\"400\" height=\"600\" loading=\"lazy\"><span class=\"tna-visually-hidden\">Image</span><span class=\"tna-gallery__navigation-item-label\">3</span><span class=\"tna-visually-hidden\"> of 3</span></button></div></section>"
     }
   ]
 }

package/nationalarchives/components/gallery/gallery.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-gallery__item-figure-inner,.tna-gallery__navigation-item{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-gallery--bounded,.tna-gallery:fullscreen{--background: var(--background-tint);background-color:var(--background, #f4f4f4)}.tna-gallery__navigation-button-label,.tna-gallery__navigation-item[aria-current=true]{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-gallery{margin-top:32px}.tna-gallery:first-child{margin-top:0}.tna-gallery{display:grid;grid-template:min-content min-content 1fr/2fr 1fr;gap:0 16px;border-radius:.1px}.tna-gallery__header{grid-column:1/3;grid-row:1;display:flex;gap:32px}.tna-gallery__header-inner{flex:1}.tna-gallery__options{margin-top:0;flex-direction:column;align-items:flex-end;justify-content:flex-start}.tna-gallery__options .tna-button{white-space:nowrap}.tna-gallery__items,.tna-gallery__navigation-buttons{grid-column:1/3;grid-row:2}.tna-gallery__items{position:relative;z-index:1;border-radius:.1px}.tna-template--clicked .tna-gallery__items:focus{outline:none}.tna-gallery__item{display:flex;flex-direction:column;align-items:stretch;justify-content:center}.tna-gallery__item-header{padding:16px;line-height:1;text-align:center;font-weight:700;font-size:1rem}.tna-gallery__item-figure{display:flex;flex-direction:column;align-items:stretch;gap:16px}.tna-gallery__item-figure-inner{width:100%;position:relative}.tna-gallery__item-image{margin:0 auto}.tna-gallery__item-description{margin-bottom:16px;padding:8px 16px;align-self:flex-start;border-left:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-gallery__navigation-buttons{width:100%;max-height:50vh;aspect-ratio:3/2;position:relative;top:3rem;z-index:2;pointer-events:none}.tna-template--touched .tna-gallery__navigation-buttons{display:none}.tna-gallery__navigation-button{width:35%;display:flex;align-items:center;position:absolute;top:0;bottom:0;background:rgba(0,0,0,0);border:none;opacity:0;cursor:pointer;pointer-events:auto;font-weight:700}.tna-gallery__navigation-button:hover,.tna-gallery__navigation-button:focus-visible{opacity:1}.tna-gallery__navigation-prev{padding-left:1rem;justify-content:flex-start;left:0}.tna-gallery__navigation-next{padding-right:1rem;justify-content:flex-end;right:0}.tna-gallery__navigation-button-label{padding:.5rem .75rem;display:flex;align-items:center;gap:.5rem}.tna-gallery__navigation-button-icon{content:"";width:.75rem;height:.75rem;display:block;flex:none;border-top:4px var(--font-dark, rgb(1, 1, 1)) solid;border-right:4px var(--font-dark, rgb(1, 1, 1)) solid;transform-origin:50% 50%}.tna-gallery__navigation-prev .tna-gallery__navigation-button-icon{transform:rotate(-135deg)}.tna-gallery__navigation-next .tna-gallery__navigation-button-icon{transform:rotate(45deg)}.tna-gallery__items--hide-item-titles .tna-gallery__item .tna-gallery__item-header,.tna-gallery__items--hide-items,.tna-gallery__items--hide-items+.tna-gallery__navigation-buttons{display:none}.tna-gallery__navigation{max-height:40rem;max-height:clamp(15rem,100vh - 32px,40rem);padding:16px;grid-column:1/3;grid-row:3;display:grid;grid-template-columns:repeat(6, 1fr);grid-auto-rows:min-content;gap:16px;overflow:auto}.tna-gallery__navigation-item{min-width:0;min-height:0;aspect-ratio:1;position:relative;border:none;cursor:pointer;background:linear-gradient(-45deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));background-size:500% 500%;background-position:0 50%;animation:image-loader-background ease-in-out 1.2s infinite}.tna-gallery__navigation-item:hover::after{content:"";position:absolute;inset:0;z-index:2;border:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-gallery__navigation-item[aria-current=true]::after{content:"";position:absolute;inset:0;z-index:2;border:5px rgb(1, 1, 1) solid}.tna-gallery__navigation-item-image{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.tna-gallery__navigation-item-label{padding:4px 12px;display:inline-block;position:absolute;top:0;left:0;z-index:4;text-transform:capitalize;color:var(--font-dark, rgb(1, 1, 1));font-size:1.5rem;font-weight:700;background-color:var(--background, #f4f4f4)}.tna-gallery--interactive .tna-gallery__item-figure-inner{max-height:50vh;aspect-ratio:3/2}.tna-gallery--interactive .tna-gallery__item-image{width:100%;height:100%;position:absolute;inset:0;z-index:1;object-fit:contain}@media(min-width: 48.0625em)and (max-width: 64em){.tna-gallery__navigation{grid-template-columns:repeat(4, 1fr)}}@media(max-width: 48em){.tna-gallery__options{flex-direction:row-reverse;align-items:flex-start}.tna-gallery__navigation{grid-template-columns:repeat(3, 1fr)}}@media(max-width: 30em){.tna-gallery__navigation-item-label{font-size:1.125rem}}.tna-gallery--bounded .tna-gallery__header,.tna-gallery:fullscreen .tna-gallery__header{padding:16px}.tna-gallery:fullscreen .tna-gallery__header-inner{display:none}.tna-gallery:fullscreen .tna-gallery__options{flex:1;flex-direction:row;align-items:flex-start;justify-content:flex-end}.tna-gallery:fullscreen .tna-gallery__options .tna-button[value=show-index]{display:none}.tna-gallery--bounded .tna-gallery__item-description,.tna-gallery:fullscreen .tna-gallery__item-description{margin-right:16px;margin-left:16px}.tna-gallery:fullscreen .tna-gallery__item-description{max-height:6rem;overflow:auto}.tna-gallery:fullscreen .tna-gallery__navigation{max-height:none}@media(aspect-ratio >= 1/1){.tna-gallery:fullscreen .tna-gallery__header{grid-column:2/3}.tna-gallery:fullscreen .tna-gallery__items{grid-column:1;grid-row:1/4;display:flex;flex-direction:column}.tna-gallery:fullscreen .tna-gallery__item{flex:1}.tna-gallery:fullscreen .tna-gallery__item-figure{flex:1}.tna-gallery:fullscreen .tna-gallery__item-description{margin-right:0;margin-bottom:0}.tna-gallery:fullscreen .tna-gallery__item-figure-inner,.tna-gallery:fullscreen .tna-gallery__navigation-buttons{max-height:none;flex:1;aspect-ratio:auto}.tna-gallery:fullscreen .tna-gallery__navigation-buttons{width:auto;padding:16px;grid-column:1;grid-row:4;display:flex;align-items:center;justify-content:space-between;top:0}.tna-gallery:fullscreen .tna-gallery__navigation-button{width:auto;padding:0;position:static;opacity:1}.tna-gallery:fullscreen .tna-gallery__navigation{grid-column:2/3;grid-row:2/4;grid-template-columns:repeat(3, 1fr);gap:8px}}/# sourceMappingURL=gallery.css.map /
1	+ .tna-gallery__item-figure-inner,.tna-gallery__navigation-item{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-gallery--bounded,.tna-gallery:fullscreen{--background: var(--background-tint);background-color:var(--background, #f4f4f4)}.tna-gallery__navigation-button-label,.tna-gallery__navigation-item[aria-current=true]{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-gallery{margin-top:32px}.tna-gallery:first-child{margin-top:0}.tna-gallery{display:grid;grid-template:min-content min-content 1fr/2fr 1fr;gap:0 16px;border-radius:.1px}.tna-gallery__header{grid-column:1/3;grid-row:1;display:flex;gap:32px}.tna-gallery__header-inner{flex:1}.tna-gallery__options{margin-top:0;flex-direction:column;align-items:flex-end;justify-content:flex-start}.tna-gallery__options .tna-button{white-space:nowrap}.tna-gallery__items,.tna-gallery__navigation-buttons{grid-column:1/3;grid-row:2}.tna-gallery__items{position:relative;z-index:1;border-radius:.1px}.tna-template--clicked .tna-gallery__items:focus{outline:none}.tna-gallery__item{display:flex;flex-direction:column;align-items:stretch;justify-content:center}.tna-gallery__item-header{padding:16px;line-height:1;text-align:center;font-weight:700;font-size:1rem}.tna-gallery__item-figure{display:flex;flex-direction:column;align-items:stretch;gap:16px}.tna-gallery__item-figure-inner{width:100%;position:relative;overflow:hidden;border-radius:4px}.tna-gallery__item-image{margin:0 auto}.tna-gallery__item-description{margin-bottom:16px;padding:8px 16px;align-self:flex-start;border-left:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-gallery__navigation-buttons{width:100%;max-height:50vh;aspect-ratio:3/2;position:relative;top:3rem;z-index:2;pointer-events:none}.tna-template--touched .tna-gallery__navigation-buttons{display:none}.tna-gallery__navigation-button{width:35%;display:flex;align-items:center;position:absolute;top:0;bottom:0;background:rgba(0,0,0,0);border:none;opacity:0;cursor:pointer;pointer-events:auto;font-weight:700}.tna-gallery__navigation-button:hover,.tna-gallery__navigation-button:focus-visible{opacity:1}.tna-gallery__navigation-prev{padding-left:1rem;justify-content:flex-start;left:0}.tna-gallery__navigation-next{padding-right:1rem;justify-content:flex-end;right:0}.tna-gallery__navigation-button-label{padding:.5rem .75rem;display:flex;align-items:center;gap:.5rem;overflow:hidden;border-radius:4px}.tna-gallery__navigation-button-icon{content:"";width:.75rem;height:.75rem;display:block;flex:none;border-top:4px var(--font-dark, rgb(1, 1, 1)) solid;border-right:4px var(--font-dark, rgb(1, 1, 1)) solid;transform-origin:50% 50%}.tna-gallery__navigation-prev .tna-gallery__navigation-button-icon{transform:rotate(-135deg)}.tna-gallery__navigation-next .tna-gallery__navigation-button-icon{transform:rotate(45deg)}.tna-gallery__items--hide-item-titles .tna-gallery__item .tna-gallery__item-header,.tna-gallery__items--hide-items,.tna-gallery__items--hide-items+.tna-gallery__navigation-buttons{display:none}.tna-gallery__navigation{max-height:40rem;max-height:clamp(15rem,100vh - 32px,40rem);padding:16px;grid-column:1/3;grid-row:3;display:grid;grid-template-columns:repeat(6, 1fr);grid-auto-rows:min-content;gap:16px;overflow:auto}.tna-gallery__navigation-item{min-width:0;min-height:0;aspect-ratio:1;position:relative;border:none;overflow:hidden;border-radius:4px;cursor:pointer;background:linear-gradient(-45deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));background-size:500% 500%;background-position:0 50%;animation:image-loader-background ease-in-out 1.2s infinite}.tna-gallery__navigation-item:hover::after{content:"";position:absolute;inset:0;z-index:2;border:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-gallery__navigation-item[aria-current=true]::after{content:"";position:absolute;inset:0;z-index:2;border:5px rgb(1, 1, 1) solid}.tna-gallery__navigation-item-image{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.tna-gallery__navigation-item-label{padding:4px 12px;display:inline-block;position:absolute;top:0;left:0;z-index:4;text-transform:capitalize;color:var(--font-dark, rgb(1, 1, 1));font-size:1.5rem;font-weight:700;background-color:var(--background, #f4f4f4);border-radius:0 0 4px 0}.tna-gallery--interactive .tna-gallery__item-figure-inner{max-height:50vh;aspect-ratio:3/2}.tna-gallery--interactive .tna-gallery__item-image{width:100%;height:100%;position:absolute;inset:0;z-index:1;object-fit:contain}@media(min-width: 48.0625em)and (max-width: 64em){.tna-gallery__navigation{grid-template-columns:repeat(4, 1fr)}}@media(max-width: 48em){.tna-gallery__options{flex-direction:row-reverse;align-items:flex-start}.tna-gallery__navigation{grid-template-columns:repeat(3, 1fr)}}@media(max-width: 30em){.tna-gallery__navigation-item-label{font-size:1.125rem}}.tna-gallery--bounded .tna-gallery__header,.tna-gallery:fullscreen .tna-gallery__header{padding:16px}.tna-gallery:fullscreen .tna-gallery__header-inner{display:none}.tna-gallery:fullscreen .tna-gallery__options{flex:1;flex-direction:row;align-items:flex-start;justify-content:flex-end}.tna-gallery:fullscreen .tna-gallery__options .tna-button[value=show-index]{display:none}.tna-gallery--bounded .tna-gallery__item-description,.tna-gallery:fullscreen .tna-gallery__item-description{margin-right:16px;margin-left:16px}.tna-gallery:fullscreen .tna-gallery__item-description{max-height:6rem;overflow:auto}.tna-gallery:fullscreen .tna-gallery__navigation{max-height:none}@media(aspect-ratio >= 1/1){.tna-gallery:fullscreen .tna-gallery__header{grid-column:2/3}.tna-gallery:fullscreen .tna-gallery__items{grid-column:1;grid-row:1/4;display:flex;flex-direction:column}.tna-gallery:fullscreen .tna-gallery__item{flex:1}.tna-gallery:fullscreen .tna-gallery__item-figure{flex:1}.tna-gallery:fullscreen .tna-gallery__item-figure-inner{border-radius:0 4px 4px 0}.tna-gallery:fullscreen .tna-gallery__item-description{margin-right:0;margin-bottom:0}.tna-gallery:fullscreen .tna-gallery__item-figure-inner,.tna-gallery:fullscreen .tna-gallery__navigation-buttons{max-height:none;flex:1;aspect-ratio:auto}.tna-gallery:fullscreen .tna-gallery__navigation-buttons{width:auto;padding:16px;grid-column:1;grid-row:4;display:flex;align-items:center;justify-content:space-between;top:0}.tna-gallery:fullscreen .tna-gallery__navigation-button{width:auto;padding:0;position:static;opacity:1}.tna-gallery:fullscreen .tna-gallery__navigation{grid-column:2/3;grid-row:2/4;grid-template-columns:repeat(3, 1fr);gap:8px}}/# sourceMappingURL=gallery.css.map /

package/nationalarchives/components/gallery/gallery.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/gallery/gallery.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAsMA,8DACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA5JA,4CAJA,gCAqMF,8CACE,qCAlMA,4CA6MF,uFACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEA3NA,4CAJA,gCCzCF,aACE,gBAEA,yBACE,aCPJ,aAGE,aACA,kDACA,WAEA,mBAEA,qBACE,gBACA,WAEA,aACA,SAGF,2BACE,OAGF,sBACE,aAEA,sBACA,qBACA,2BAEA,kCACE,mBAIJ,qDAEE,gBACA,WAGF,oBACE,kBACA,UAEA,mBC7BF,iDACE,aDiCF,mBACE,aACA,sBACA,oBACA,uBAGF,0BACE,aAEA,cACA,kBE3CF,YCYsB,ID7BtB,eFkEA,0BACE,aACA,sBACA,oBACA,SAGF,gCACE,WAEA,kBAKF,yBACE,cAGF,+BACE,mBACA,iBAEA,sBFvBE,2DE4BJ,iCACE,WACA,gBACA,iBAEA,kBACA,SACA,UAEA,oBAEA,wDACE,aAIJ,gCACE,UAEA,aACA,mBAEA,kBACA,MACA,SAEA,yBAEA,YAEA,UAEA,eACA,oBE9GF,YCYsB,IHqGpB,oFAEE,UAIJ,8BACE,kBAEA,2BAEA,OAGF,8BACE,mBAEA,yBAEA,QAGF,sCACE,qBAEA,aACA,mBACA,UAKF,qCACE,WAEA,aACA,cAEA,cACA,UFvGE,0GE4GF,yBAGF,mEACE,0BAGF,mEACE,wBAGF,oLAGE,aAGF,yBACE,iBACA,2CACA,aAEA,gBACA,WAEA,aACA,qCACA,2BACA,SAEA,cAGF,8BACE,YACA,aACA,eAEA,kBAEA,YAEA,eF6PA,wGAMA,0BACA,0BAEA,4DE/PE,2CACE,WAEA,kBACA,QACA,UFxJF,0DEiKA,wDACE,WAEA,kBACA,QACA,UF9EJ,8BEqFF,oCACE,WACA,YAEA,kBACA,QACA,iBAGF,oCACE,iBAEA,qBAEA,kBACA,MACA,OACA,UAEA,0BF/NF,qCI7CA,iBAiBA,YCYsB,ILoBtB,4CEoOA,0DACE,gBACA,iBAGF,mDACE,WACA,YAEA,kBACA,QACA,UACA,mBIzPF,kDJ6PE,yBACE,sCI1NJ,wBJ+NE,sBACE,2BACA,uBAGF,yBACE,sCI7PJ,wBJkQE,oCEtTF,oBFgUA,wFAEE,aAGF,mDACE,aAGF,8CACE,OAEA,mBACA,uBACA,yBAEA,4EACE,aAIJ,4GAEE,kBACA,iBAGF,uDACE,gBAEA,cAGF,iDACE,gBAGF,4BACE,6CACE,gBAGF,4CACE,cACA,aAEA,aACA,sBAGF,2CACE,OAGF,kDACE,OAGF,uDACE,eACA,gBAGF,iHAEE,gBACA,OAEA,kBAGF,yDACE,WACA,aAEA,cACA,WAEA,aACA,mBACA,8BAEA,MAGF,wDACE,WACA,UAEA,gBAEA,UAGF,iDAIE,gBACA,aAEA,qCACA","file":"gallery.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n 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 border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-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(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-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(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\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 --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\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 --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../variables/a11y\" as a11yVariables;\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-gallery {\n @include spacing.space-above;\n\n display: grid;\n grid-template: min-content min-content 1fr / 2fr 1fr;\n gap: 0 spacing.space(1);\n\n border-radius: 0.1px;\n\n &__header {\n grid-column: 1 / 3;\n grid-row: 1;\n\n display: flex;\n gap: spacing.space(2);\n }\n\n &__header-inner {\n flex: 1;\n }\n\n &__options {\n margin-top: 0;\n\n flex-direction: column;\n align-items: flex-end;\n justify-content: flex-start;\n\n .tna-button {\n white-space: nowrap;\n }\n }\n\n &__items,\n &__navigation-buttons {\n grid-column: 1 / 3;\n grid-row: 2;\n }\n\n &__items {\n position: relative;\n z-index: 1;\n\n border-radius: 0.1px;\n\n @include a11y.no-focus-outline-on-click;\n }\n\n &__item {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: center;\n }\n\n &__item-header {\n padding: spacing.space(1);\n\n line-height: 1;\n text-align: center;\n\n @include typography.main-font-weight-bold;\n @include typography.font-size(16);\n }\n\n &__item-figure {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: spacing.space(1);\n }\n\n &__item-figure-inner {\n width: 100%;\n\n position: relative;\n\n @include colour.contrast;\n }\n\n &__item-image {\n margin: 0 auto;\n }\n\n &__item-description {\n margin-bottom: spacing.space(1);\n padding: spacing.space(0.5) spacing.space(1);\n\n align-self: flex-start;\n\n @include colour.thick-keyline-dark(left);\n }\n\n &__navigation-buttons {\n width: 100%;\n max-height: 50vh;\n aspect-ratio: 3 / 2;\n\n position: relative;\n top: 3rem;\n z-index: 2;\n\n pointer-events: none;\n\n .tna-template--touched & {\n display: none;\n }\n }\n\n &__navigation-button {\n width: 35%;\n\n display: flex;\n align-items: center;\n\n position: absolute;\n top: 0;\n bottom: 0;\n\n background: transparent;\n\n border: none;\n\n opacity: 0;\n\n cursor: pointer;\n pointer-events: auto;\n @include typography.main-font-weight-bold;\n\n &:hover,\n &:focus-visible {\n opacity: 1;\n }\n }\n\n &__navigation-prev {\n padding-left: 1rem;\n\n justify-content: flex-start;\n\n left: 0;\n }\n\n &__navigation-next {\n padding-right: 1rem;\n\n justify-content: flex-end;\n\n right: 0;\n }\n\n &__navigation-button-label {\n padding: 0.5rem 0.75rem;\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n @include colour.accent;\n }\n\n &__navigation-button-icon {\n content: \"\";\n\n width: 0.75rem;\n height: 0.75rem;\n\n display: block;\n flex: none;\n\n @include colour.colour-border(\"font-dark\", 4px, solid, top);\n @include colour.colour-border(\"font-dark\", 4px, solid, right);\n\n transform-origin: 50% 50%;\n }\n\n &__navigation-prev &__navigation-button-icon {\n transform: rotate(-135deg);\n }\n\n &__navigation-next &__navigation-button-icon {\n transform: rotate(45deg);\n }\n\n &__items--hide-item-titles &__item &__item-header,\n &__items--hide-items,\n &__items--hide-items + &__navigation-buttons {\n display: none;\n }\n\n &__navigation {\n max-height: 40rem;\n max-height: clamp(15rem, calc(100vh - #{spacing.space(2)}), 40rem);\n padding: spacing.space(1);\n\n grid-column: 1 / 3;\n grid-row: 3;\n\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n grid-auto-rows: min-content;\n gap: spacing.space(1);\n\n overflow: auto;\n }\n\n &__navigation-item {\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n\n position: relative;\n\n border: none;\n\n cursor: pointer;\n\n @include colour.contrast;\n\n @include colour.image-loader-background;\n\n &:hover {\n &::after {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 2;\n\n @include colour.thick-keyline-accent;\n }\n }\n\n &[aria-current=\"true\"] {\n @include colour.accent;\n\n &::after {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 2;\n\n @include colour.thick-keyline-brand(\"\", \"black\");\n }\n }\n }\n\n &__navigation-item-image {\n width: 100%;\n height: 100%;\n\n position: absolute;\n inset: 0;\n object-fit: cover;\n }\n\n &__navigation-item-label {\n padding: spacing.space(0.25) spacing.space(0.75);\n\n display: inline-block;\n\n position: absolute;\n top: 0;\n left: 0;\n z-index: 4;\n\n text-transform: capitalize;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(24);\n @include typography.main-font-weight-bold;\n\n @include colour.colour-background(\"background\");\n }\n\n &--interactive &__item-figure-inner {\n max-height: 50vh;\n aspect-ratio: 3 / 2;\n }\n\n &--interactive &__item-image {\n width: 100%;\n height: 100%;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n object-fit: contain;\n }\n\n @include media.on-medium {\n &__navigation {\n grid-template-columns: repeat(4, 1fr);\n }\n }\n\n @include media.on-mobile {\n &__options {\n flex-direction: row-reverse;\n align-items: flex-start;\n }\n\n &__navigation {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n\n @include media.on-tiny {\n &__navigation-item-label {\n @include typography.font-size(18);\n }\n }\n\n &--bounded,\n &:fullscreen {\n @include colour.tint;\n }\n\n &--bounded &__header,\n &:fullscreen &__header {\n padding: spacing.space(1);\n }\n\n &:fullscreen &__header-inner {\n display: none;\n }\n\n &:fullscreen &__options {\n flex: 1;\n\n flex-direction: row;\n align-items: flex-start;\n justify-content: flex-end;\n\n .tna-button[value=\"show-index\"] {\n display: none;\n }\n }\n\n &--bounded &__item-description,\n &:fullscreen &__item-description {\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n }\n\n &:fullscreen &__item-description {\n max-height: 6rem;\n\n overflow: auto;\n }\n\n &:fullscreen &__navigation {\n max-height: none;\n }\n\n @media (aspect-ratio >= 1/1) {\n &:fullscreen &__header {\n grid-column: 2 / 3;\n }\n\n &:fullscreen &__items {\n grid-column: 1;\n grid-row: 1 / 4;\n\n display: flex;\n flex-direction: column;\n }\n\n &:fullscreen &__item {\n flex: 1;\n }\n\n &:fullscreen &__item-figure {\n flex: 1;\n }\n\n &:fullscreen &__item-description {\n margin-right: 0;\n margin-bottom: 0;\n }\n\n &:fullscreen &__item-figure-inner,\n &:fullscreen &__navigation-buttons {\n max-height: none;\n flex: 1;\n\n aspect-ratio: auto;\n }\n\n &:fullscreen &__navigation-buttons {\n width: auto;\n padding: spacing.space(1);\n\n grid-column: 1;\n grid-row: 4;\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n top: 0;\n }\n\n &:fullscreen &__navigation-button {\n width: auto;\n padding: 0;\n\n position: static;\n\n opacity: 1;\n }\n\n &:fullscreen &__navigation {\n // padding-top: 0;\n // padding-left: 0;\n\n grid-column: 2 / 3;\n grid-row: 2 / 4;\n\n grid-template-columns: repeat(3, 1fr);\n gap: spacing.space(0.5);\n }\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin focus-outline-without-offset {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n}\n\n@mixin focus-outline {\n @include focus-outline-without-offset;\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n\n@mixin no-focus-outline-on-click {\n .tna-template--clicked &:focus {\n outline: none;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\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"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/gallery/gallery.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAsMA,8DACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA5JA,4CAJA,gCAqMF,8CACE,qCAlMA,4CA6MF,uFACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEA3NA,4CAJA,gCCzCF,aACE,gBAEA,yBACE,aCLJ,aAGE,aACA,kDACA,WAEA,mBAEA,qBACE,gBACA,WAEA,aACA,SAGF,2BACE,OAGF,sBACE,aAEA,sBACA,qBACA,2BAEA,kCACE,mBAIJ,qDAEE,gBACA,WAGF,oBACE,kBACA,UAEA,mBC/BF,iDACE,aDmCF,mBACE,aACA,sBACA,oBACA,uBAGF,0BACE,aAEA,cACA,kBE7CF,YCgBsB,IDjCtB,eFoEA,0BACE,aACA,sBACA,oBACA,SAGF,gCACE,WAEA,kBIjFF,gBAEA,cCJsB,IL0FtB,yBACE,cAGF,+BACE,mBACA,iBAEA,sBF3BE,2DEgCJ,iCACE,WACA,gBACA,iBAEA,kBACA,SACA,UAEA,oBAEA,wDACE,aAIJ,gCACE,UAEA,aACA,mBAEA,kBACA,MACA,SAEA,yBAEA,YAEA,UAEA,eACA,oBElHF,YCgBsB,IHqGpB,oFAEE,UAIJ,8BACE,kBAEA,2BAEA,OAGF,8BACE,mBAEA,yBAEA,QAGF,sCACE,qBAEA,aACA,mBACA,UIpKF,gBAEA,cCJsB,IL6KtB,qCACE,WAEA,aACA,cAEA,cACA,UF7GE,0GEkHF,yBAGF,mEACE,0BAGF,mEACE,wBAGF,oLAGE,aAGF,yBACE,iBACA,2CACA,aAEA,gBACA,WAEA,aACA,qCACA,2BACA,SAEA,cAGF,8BACE,YACA,aACA,eAEA,kBAEA,YI/NF,gBAEA,cCJsB,ILoOpB,eFsPA,wGAMA,0BACA,0BAEA,4DExPE,2CACE,WAEA,kBACA,QACA,UF/JF,0DEwKA,wDACE,WAEA,kBACA,QACA,UFrFJ,8BE4FF,oCACE,WACA,YAEA,kBACA,QACA,iBAGF,oCACE,iBAEA,qBAEA,kBACA,MACA,OACA,UAEA,0BFtOF,qCI7CA,iBAiBA,YCgBsB,ILgBtB,4CE2OE,wBAGF,0DACE,gBACA,iBAGF,mDACE,WACA,YAEA,kBACA,QACA,UACA,mBMnQF,kDNuQE,yBACE,sCMpOJ,wBNyOE,sBACE,2BACA,uBAGF,yBACE,sCMvQJ,wBN4QE,oCEhUF,oBF0UA,wFAEE,aAGF,mDACE,aAGF,8CACE,OAEA,mBACA,uBACA,yBAEA,4EACE,aAIJ,4GAEE,kBACA,iBAGF,uDACE,gBAEA,cAGF,iDACE,gBAGF,4BACE,6CACE,gBAGF,4CACE,cACA,aAEA,aACA,sBAGF,2CACE,OAGF,kDACE,OAGF,wDACE,0BAIF,uDACE,eACA,gBAGF,iHAEE,gBACA,OAEA,kBAGF,yDACE,WACA,aAEA,cACA,WAEA,aACA,mBACA,8BAEA,MAGF,wDACE,WACA,UAEA,gBAEA,UAGF,iDAIE,gBACA,aAEA,qCACA","file":"gallery.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n 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 border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-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(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-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(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\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 --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\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 --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../variables/a11y\" as a11yVariables;\n@use \"../../variables/borders\" as bordersVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-gallery {\n @include spacing.space-above;\n\n display: grid;\n grid-template: min-content min-content 1fr / 2fr 1fr;\n gap: 0 spacing.space(1);\n\n border-radius: 0.1px;\n\n &__header {\n grid-column: 1 / 3;\n grid-row: 1;\n\n display: flex;\n gap: spacing.space(2);\n }\n\n &__header-inner {\n flex: 1;\n }\n\n &__options {\n margin-top: 0;\n\n flex-direction: column;\n align-items: flex-end;\n justify-content: flex-start;\n\n .tna-button {\n white-space: nowrap;\n }\n }\n\n &__items,\n &__navigation-buttons {\n grid-column: 1 / 3;\n grid-row: 2;\n }\n\n &__items {\n position: relative;\n z-index: 1;\n\n border-radius: 0.1px;\n\n @include a11y.no-focus-outline-on-click;\n }\n\n &__item {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: center;\n }\n\n &__item-header {\n padding: spacing.space(1);\n\n line-height: 1;\n text-align: center;\n\n @include typography.main-font-weight-bold;\n @include typography.font-size(16);\n }\n\n &__item-figure {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: spacing.space(1);\n }\n\n &__item-figure-inner {\n width: 100%;\n\n position: relative;\n\n @include colour.contrast;\n\n @include borders.rounded-border;\n }\n\n &__item-image {\n margin: 0 auto;\n }\n\n &__item-description {\n margin-bottom: spacing.space(1);\n padding: spacing.space(0.5) spacing.space(1);\n\n align-self: flex-start;\n\n @include colour.thick-keyline-dark(left);\n }\n\n &__navigation-buttons {\n width: 100%;\n max-height: 50vh;\n aspect-ratio: 3 / 2;\n\n position: relative;\n top: 3rem;\n z-index: 2;\n\n pointer-events: none;\n\n .tna-template--touched & {\n display: none;\n }\n }\n\n &__navigation-button {\n width: 35%;\n\n display: flex;\n align-items: center;\n\n position: absolute;\n top: 0;\n bottom: 0;\n\n background: transparent;\n\n border: none;\n\n opacity: 0;\n\n cursor: pointer;\n pointer-events: auto;\n @include typography.main-font-weight-bold;\n\n &:hover,\n &:focus-visible {\n opacity: 1;\n }\n }\n\n &__navigation-prev {\n padding-left: 1rem;\n\n justify-content: flex-start;\n\n left: 0;\n }\n\n &__navigation-next {\n padding-right: 1rem;\n\n justify-content: flex-end;\n\n right: 0;\n }\n\n &__navigation-button-label {\n padding: 0.5rem 0.75rem;\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n @include colour.accent;\n\n @include borders.rounded-border;\n }\n\n &__navigation-button-icon {\n content: \"\";\n\n width: 0.75rem;\n height: 0.75rem;\n\n display: block;\n flex: none;\n\n @include colour.colour-border(\"font-dark\", 4px, solid, top);\n @include colour.colour-border(\"font-dark\", 4px, solid, right);\n\n transform-origin: 50% 50%;\n }\n\n &__navigation-prev &__navigation-button-icon {\n transform: rotate(-135deg);\n }\n\n &__navigation-next &__navigation-button-icon {\n transform: rotate(45deg);\n }\n\n &__items--hide-item-titles &__item &__item-header,\n &__items--hide-items,\n &__items--hide-items + &__navigation-buttons {\n display: none;\n }\n\n &__navigation {\n max-height: 40rem;\n max-height: clamp(15rem, calc(100vh - #{spacing.space(2)}), 40rem);\n padding: spacing.space(1);\n\n grid-column: 1 / 3;\n grid-row: 3;\n\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n grid-auto-rows: min-content;\n gap: spacing.space(1);\n\n overflow: auto;\n }\n\n &__navigation-item {\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n\n position: relative;\n\n border: none;\n @include borders.rounded-border;\n\n cursor: pointer;\n\n @include colour.contrast;\n\n @include colour.image-loader-background;\n\n &:hover {\n &::after {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 2;\n\n @include colour.thick-keyline-accent;\n }\n }\n\n &[aria-current=\"true\"] {\n @include colour.accent;\n\n &::after {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 2;\n\n @include colour.thick-keyline-brand(\"\", \"black\");\n }\n }\n }\n\n &__navigation-item-image {\n width: 100%;\n height: 100%;\n\n position: absolute;\n inset: 0;\n object-fit: cover;\n }\n\n &__navigation-item-label {\n padding: spacing.space(0.25) spacing.space(0.75);\n\n display: inline-block;\n\n position: absolute;\n top: 0;\n left: 0;\n z-index: 4;\n\n text-transform: capitalize;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(24);\n @include typography.main-font-weight-bold;\n\n @include colour.colour-background(\"background\");\n\n // @include borders.rounded-border;\n border-radius: 0 0 bordersVars.$rounded-border-radius 0;\n }\n\n &--interactive &__item-figure-inner {\n max-height: 50vh;\n aspect-ratio: 3 / 2;\n }\n\n &--interactive &__item-image {\n width: 100%;\n height: 100%;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n object-fit: contain;\n }\n\n @include media.on-medium {\n &__navigation {\n grid-template-columns: repeat(4, 1fr);\n }\n }\n\n @include media.on-mobile {\n &__options {\n flex-direction: row-reverse;\n align-items: flex-start;\n }\n\n &__navigation {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n\n @include media.on-tiny {\n &__navigation-item-label {\n @include typography.font-size(18);\n }\n }\n\n &--bounded,\n &:fullscreen {\n @include colour.tint;\n }\n\n &--bounded &__header,\n &:fullscreen &__header {\n padding: spacing.space(1);\n }\n\n &:fullscreen &__header-inner {\n display: none;\n }\n\n &:fullscreen &__options {\n flex: 1;\n\n flex-direction: row;\n align-items: flex-start;\n justify-content: flex-end;\n\n .tna-button[value=\"show-index\"] {\n display: none;\n }\n }\n\n &--bounded &__item-description,\n &:fullscreen &__item-description {\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n }\n\n &:fullscreen &__item-description {\n max-height: 6rem;\n\n overflow: auto;\n }\n\n &:fullscreen &__navigation {\n max-height: none;\n }\n\n @media (aspect-ratio >= 1/1) {\n &:fullscreen &__header {\n grid-column: 2 / 3;\n }\n\n &:fullscreen &__items {\n grid-column: 1;\n grid-row: 1 / 4;\n\n display: flex;\n flex-direction: column;\n }\n\n &:fullscreen &__item {\n flex: 1;\n }\n\n &:fullscreen &__item-figure {\n flex: 1;\n }\n\n &:fullscreen &__item-figure-inner {\n border-radius: 0 bordersVars.$rounded-border-radius\n bordersVars.$rounded-border-radius 0;\n }\n\n &:fullscreen &__item-description {\n margin-right: 0;\n margin-bottom: 0;\n }\n\n &:fullscreen &__item-figure-inner,\n &:fullscreen &__navigation-buttons {\n max-height: none;\n flex: 1;\n\n aspect-ratio: auto;\n }\n\n &:fullscreen &__navigation-buttons {\n width: auto;\n padding: spacing.space(1);\n\n grid-column: 1;\n grid-row: 4;\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n top: 0;\n }\n\n &:fullscreen &__navigation-button {\n width: auto;\n padding: 0;\n\n position: static;\n\n opacity: 1;\n }\n\n &:fullscreen &__navigation {\n // padding-top: 0;\n // padding-left: 0;\n\n grid-column: 2 / 3;\n grid-row: 2 / 4;\n\n grid-template-columns: repeat(3, 1fr);\n gap: spacing.space(0.5);\n }\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin focus-outline-without-offset {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n}\n\n@mixin focus-outline {\n @include focus-outline-without-offset;\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n\n@mixin no-focus-outline-on-click {\n .tna-template--clicked &:focus {\n outline: none;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-underline-offset: typography.$interactable-text-decoration-offset;\n\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n overflow: hidden;\n\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$rounded-border-radius: 4px !default;\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"]}