npm - @nationalarchives/frontend - Versions diffs - 0.34.0 → 0.34.1 - Mend

@nationalarchives/frontend 0.34.0 → 0.34.1

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 (20) hide show

package/nationalarchives/error-page.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../src/nationalarchives/tools/_colour.scss","../../src/nationalarchives/tools/_media.scss","../../src/nationalarchives/tools/_a11y.scss","../../src/nationalarchives/tools/_spacing.scss","../../src/nationalarchives/utilities/_a11y.scss","../../src/nationalarchives/utilities/_areas.scss","../../src/nationalarchives/tools/_borders.scss","../../src/nationalarchives/variables/_borders.scss","../../src/nationalarchives/utilities/colour/_index.scss","../../src/nationalarchives/utilities/global/_index.scss","../../src/nationalarchives/utilities/grid/_index.scss","../../src/nationalarchives/variables/_grid.scss","../../src/nationalarchives/tools/_grid.scss","../../src/nationalarchives/utilities/_reset.scss","../../src/nationalarchives/utilities/typography/_index.scss","../../src/nationalarchives/tools/_typography.scss","../../src/nationalarchives/variables/_typography.scss","../../src/nationalarchives/components/footer/footer.scss","../../src/nationalarchives/components/header/header.scss","../../src/nationalarchives/components/warning/warning.scss"],"names":[],"mappings":"CA8OA,2BAvMM,sBAEE,2BAFF,2DAEE,0BAFF,0BAEE,+BAFF,kCAEE,uCAFF,kCAEE,uCAFF,gBAEE,qBAFF,wBAEE,6BAFF,oEAEE,uCAFF,gCAEE,qCAFF,+/CA2MJ,+BAJF,2BAjLM,iCAEE,sCAFF,kDAEE,+BAFF,0BAEE,+BAFF,2BAEE,gCAFF,iCAEE,sCAFF,gBAEE,qBAFF,wBAEE,6BAFF,+DAEE,mCAFF,6BAEE,kCAFF,0+CAkMN,4EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAhLA,4CAJA,gCCNA,wBDqMF,0DAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAzMF,4CAJA,iCAyNF,qCAEI,4OAvNF,4CAJA,gCAuOF,qCACE,qCApOA,4CA6OF,qIACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEA3PA,4CAJA,gCA0QF,qGACE,6CACA,qBACA,0BACA,kCACA,kCACA,kCACA,gCACA,kCACA,kCAIA,kCAIA,8CAIA,0CA3RA,4CAJA,gCAqSE,mCADF,qNAKI,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,kEAIJ,6MAIE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEAQJ,kEACE,iDACA,yDACA,6CACA,4CACA,4CACA,mDACA,mDACA,uCACA,+CACA,gDACA,qDACA,sDACA,0DAOF,2VACE,kDACA,kDACA,yDACA,yDACA,6CACA,qDACA,sDACA,2DACA,sDAGF,+DACE,6CACA,yDACA,yCACA,gDACA,4DAQF,4DACE,iDACA,yDACA,6CACA,0DAQF,kEACE,iDACA,yDACA,4CACA,0DAQF,+DACE,+CACA,yDACA,8CACA,wDAQF,+FACE,gDACA,yDACA,6CACA,yDEveF,wBACE,kCACA,8BAEA,qCAGA,WACE,kCAGF,4EACE,8BAEA,qCAIA,mCADF,gFAEI,8BAEA,sCAeN,iFACE,kCACA,8BAEA,qCAGA,gBAEA,6OACE,8BAEA,qCAIA,mCADF,yPAEI,8BAEA,sCCtDN,sOACE,gBAUA,saACE,aCpCJ,8CFGE,qBACA,sBACA,oBACA,qBAEA,2BAEA,6BACA,uBACA,wBACA,sBAEA,0CAEA,oBAEA,wCACA,gCEfF,iCAGE,UAOF,uCACE,QACE,WAiBJ,4HFoBE,wBAEA,2BGrDF,aACE,iBACA,oBAGF,WAEE,aCTA,cCDsB,IP6gBtB,8BKrgBF,WL8GM,uDAiZJ,+BK/fF,WL8GM,uDKpGJ,kBACE,aJ6DF,wBIxDA,aACE,iBACA,oBAGF,WACE,cG9BJ,cR0FE,4CQpFE,mCADF,4BR2CI,sBAEE,2BAFF,kEAEE,4CAFF,gCAEE,qCAFF,wCAEE,6CAFF,wCAEE,6CAFF,yBAEE,8BAFF,qBAEE,0BAFF,sEAEE,0CAFF,0CAEE,+CAFF,sgDQtCF,+DALF,4BRiEI,mSAEE,yCAFF,mCAEE,wCAFF,g/CQvDJ,0BRiCI,sBAEE,2BAFF,kEAEE,4CAFF,gCAEE,qCAFF,wCAEE,6CAFF,wCAEE,6CAFF,yBAEE,8BAFF,qBAEE,0BAFF,sEAEE,0CAFF,0CAEE,+CAFF,qgDQ9BF,+BAHF,0BRuDI,mSAEE,yCAFF,mCAEE,wCAFF,g/CQEJ,oBR8CI,wDQ1CJ,yBR0CI,sDSxHN,cASE,gBACA,WACA,YAUA,iCAGF,oBACE,gBACA,SACA,UAEA,6FACE,aACA,sBAIJ,UACE,OC9BF,eACE,WACA,UCRwB,ODSxB,kBACA,iBACA,mBACA,kBAEA,aACA,eACA,oBACA,2BAEA,sBAEA,0CACE,8BAGA,gBACA,eAGF,oBACE,eAGF,qDAEE,uBAGF,4BACE,yBAGF,sCACE,WACA,mBACA,kBAGO,kCACP,gBAIJ,YACE,mBACA,kBAEA,sBAEA,oCACE,gBACA,eAGF,uBACE,sBAGF,0BACE,kBAGF,0BACE,oBEvCA,kBACE,WACA,UAUI,wBACE,oBACA,UAGF,+BACE,2BAGF,8BACE,0BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,yBACE,qBACA,UAGF,gCACE,4BAGF,+BACE,2BAkCN,oBACE,WAEA,SAHF,oBACE,WAEA,SAHF,oBACE,WAEA,SAKF,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EXnDf,kDWZE,yBACE,WACA,UAUI,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,UACA,UAGF,qCACE,iBAGF,oCACE,gBAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAwBN,oCACE,eAGF,mCACE,cAKF,2BACE,WAEA,SAHF,2BACE,WAEA,SAHF,2BACE,WAEA,SAKF,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,GX7Cf,kDWlBE,wBACE,WACA,UAUI,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAwBN,mCACE,eAGF,kCACE,cAKF,0BACE,WAEA,SAHF,0BACE,WAEA,SAHF,0BACE,WAEA,SAKF,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,GXvCf,wBS8BA,eACE,qBACA,oBAEA,sCACE,WACA,mBACA,kBAIJ,YACE,qBACA,oBEnEA,uBACE,WACA,UAUI,4BACE,UACA,UAGF,mCACE,iBAGF,kCACE,gBAwBN,kCACE,eAGF,iCACE,cAKF,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SAKF,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,GC9FjB,EACE,SACA,UAEA,+BAJF,EAKI,uBAUJ,MACE,wBAcF,yEACE,KAEE,yBAIJ,6BAKE,eACA,YAEA,cAGF,6BAIE,oBACA,kBAGF,SACE,wBAGF,GbyDM,sDavDJ,qBAEA,eb0DI,kDcpHN,cd+EE,gCe7DA,YCSA,qBDRA,kBACA,yBACA,mCAfA,YCuBiB,IF1BjB,cACA,kCACA,8BACA,sBACA,kCACA,mCdwfA,+BchgBF,cCUE,YCoBwB,KFf1B,oBACE,cCnBA,oBDqBA,YECiB,KfkBjB,kDatBF,oBClBE,oBd4EA,wBa1DF,oBClBE,qBDgCF,OCfE,YCiBsB,IFKtB,IACE,gBAIJ,ECYE,0BC/BuC,WDgCvC,sBCjCoC,OFuBpC,mBAEA,SdiCA,2Bc5BA,Ud4BA,mCcxBA,iBCGA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OFwClC,qCdkBF,2BcZF,MCtEE,sBD0EF,kCACE,sBACA,yBAEA,aACA,mBACA,WdEA,gCe5CA,YC4BA,sBD3BA,kBACA,yBAIE,YCwBiB,IDpEnB,mBAmDA,gBACA,yBDgCA,cACA,kBACA,wBRzFA,cCDsB,IO8Fb,oCACP,0BAEA,gDACE,0BACA,kCACA,8BAEA,oEACE,cAKN,sDdtBA,6CAibA,+Bc3ZA,sDdtBA,qBc+BF,gDACE,UAEA,gBAEA,+BAEA,YACA,mBAGE,8DC/DF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OFwGlC,sEACE,cAKN,4FdpBM,mDcyBJ,iCACA,yBAEA,oVd5DA,oDAIA,qDAiCI,iDc+BF,4XdpEF,2Dc0EE,mCADF,8MdzEA,oDAIA,qDAiCI,iDc4CA,kOdjFJ,4Dc4HF,eAGE,aACA,eACA,kBAEA,gBAEA,qBACE,aACA,mBAIJ,kNd3IE,qCc6IA,iBAEA,oOACE,qBAEA,mBAEA,mSACE,WAEA,cACA,eACA,mBACA,mBAEA,qBAEA,sBAEA,wBd1IA,4FciJA,opBdlIA,0CcwIJ,iRACE,oBAIJ,kDCnOE,YCmBA,gDDlBA,YCqBoB,IDuBpB,YCDuB,ID7EvB,edwCA,kDa4NF,kDCpQE,gBd4EA,wBawLF,kDCpQE,mBDiRF,gDChPE,YCmBA,gDDlBA,YCqBoB,IDuBpB,YCKsB,KDnFtB,kBdwCA,kDayOF,gDCjRE,gBd4EA,wBaqMF,gDCjRE,qBD8RE,kEACE,aACA,cACA,gBACA,kBAEA,sBACA,wBAKN,gDCzRE,YCiBsB,ID4CtB,YCWsB,IDzFtB,mBdwCA,kDakQF,gDC1SE,oBd4EA,wBa8NF,gDC1SE,qBDuTF,gDCtSE,YCiBsB,ID4CtB,YCiBsB,ID/FtB,oBDoUF,gBC3TE,YCuBiB,IFySjB,cACA,YE3OsB,IF8OxB,sIAEE,gBACA,iBAEA,kPACE,cAGF,mwBAGE,gBAgCE,qCACE,aAcN,wBACE,mBAaF,mBACE,SAEA,cAoBJ,gBAEE,eACA,gBACA,cACA,4Bd1UI,+DcyVJ,uBCpbA,YCoBwB,IFkatB,YACA,eAEA,uCACE,YAGF,4CACE,mBAGF,0CACE,oBAIJ,0BACE,gBCpdF,eDwdE,kCACE,gBACA,mBbtaJ,wBayXF,gBAkDI,mCAKJ,qBCpeE,mBfkFA,qCCNA,wBawZF,qBCpeE,mBD8eA,2Bd5ZA,gCerEA,YCoBwB,IFmd1B,kBC9cE,YC4BA,sBD3BA,kBACA,yBAIE,YCwBiB,IhBcnB,qCelFA,mBD0fA,gBb9aA,wBawaF,kBCpfE,mBDigBF,QACE,kBACA,mBGlgBA,mBAGE,iBACA,oBAIA,8CACE,yBjB+fJ,8BiBjgBA,4BAMI,cAIJ,mCFDA,YCiBsB,ICZtB,mCACE,kBACA,sBACA,uBFzBF,eE4BE,gBX/BF,cCDsB,IP4GlB,+DiBnEJ,oDACE,gBAEA,oBACA,0BAEA,gBAEA,YACA,mBAEA,ejBkCF,2BiB/BE,0DFUF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OCgCpC,sBACE,gBAGF,mBACE,gBACA,gBACA,cAMF,kBACE,gBFtEF,eE2EA,oBACE,gBAEA,0BACE,aACA,eACA,uBACA,cAIA,8BACE,aACA,mBACA,WFzFN,eE4FM,iBACA,qBAEA,kCACE,aAEA,uCACE,kBAIJ,oCF1CN,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OCyFpC,0BACE,gBACA,aFnHF,eEuHE,qCX1HF,cCDsB,IUiIpB,8BACE,iBAQA,mCACE,qBACA,wBFxIN,efwGI,+DiBsCE,wCACE,qBAEA,qBAEA,8CFtFR,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OC+H5B,kDACE,oBAOV,mBACE,iBFhKF,eEoKE,yBACE,gBAEA,kBhBnHJ,wBgBgHE,yBAMI,oBAIJ,wBACE,eAEA,qBhB7HJ,wBgB0HE,wBAMI,eAQN,eACE,kBACA,qBAGF,qBFjMA,eEoME,mCACE,mBAGF,iCACE,gBAIJ,0BACE,cAGF,mBACE,kBAEA,wBACE,qBAGF,kCACE,uBAEA,chB/IJ,wBgBoJE,mBACE,cACA,qBhB9KJ,wBgBmLE,0BACE,sBAGF,8BF3OF,oBfmgBA,+BiBlRE,4BjBzIE,gEAiaJ,8BiBzgBF,YjBwGM,0DiBmJE,oCjBnJF,0DiByJF,0BACE,+BjBhJA,uDAiZJ,+BiBngBF,YjBwGM,0DiBmJE,oCjBnJF,0DiByJF,0BACE,+BjBhJA,uDkBjHN,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBlBifJ,+BkBlgBF,YAsBI,oBAIA,oCACE,8BAIJ,0BACE,oBACA,uBAGF,kBACE,aACA,qBAEA,cACA,qBAGE,qFAGE,cAGF,0CACE,qBlB8EJ,sDkB3EI,mBAKN,4BACE,iBAEA,qBAEA,qBHhCF,YCmBA,gDDlBA,YCqBoB,IDvDpB,kBGoEE,yBAGF,uCACE,kBAEA,aAGF,uBACE,WACA,cAEA,qBlBKF,gDkBDE,6DAEE,WAEA,WACA,cAEA,cAEA,kBACA,QAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,+BACE,YACA,UAEA,gBAEA,aACA,mBACA,WAEA,kBAEA,cHxGF,YCiBsB,IDlCtB,eG6HE,gBAEA,6BACA,sBACA,mBAEA,eAEA,qCHxEF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OEkHhC,8DACE,SAEA,sEACE,YAEA,0BAGF,qEACE,eAEA,yBAMR,wBACE,aACA,8BACA,qBACA,8BAEA,kBACA,UAGF,kCACE,SACA,kBAEA,aACA,yBACA,kBAEA,cAEA,gBHhLF,oBGqLA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HlB7GF,6CkBsHI,udlBtHJ,gCkB6HE,4FHlJF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OE4LlC,gDACE,sBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,iBAEA,qBAEA,kBAEA,cACA,qBHpOF,YCoBwB,IEoNtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,OlBvKJ,gDkB4KE,mHAGE,cAIA,mDlBjKA,0DkBuKJ,kCACE,sCAOF,sBACE,WAEA,cjB9MF,wBiBkNE,0BACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,uCACE,cAEA,kDACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAIJ,kCACE,oBAEA,2BlBvNA,+DkB4NF,iCACE,SAGF,sCACE,iBAEA,+HlBzPJ,6CkB+PI,gGlB/PJ,qCkBqQE,8BACE,WAEA,sBACA,MAEA,oClBrPA,uHkB2PF,6BACE,SAEA,clB9PA,4DkBkQA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAIA,mDlBrRF,gEC1DJ,kDiBuVE,sBACE,WAGF,4BACE,oBAGF,mGAGE,mBAGF,4DAEE,kBAGF,kCACE,mBACA,mBjBtWJ,wBiB2WE,iEAEE,mBAGF,0BACE,kBAGF,sBACE,aAGF,4BACE,gBACA,iBAGF,+BHjbF,mBGqbE,kCACE,UAGF,kCACE,mBACA,iClB8EJ,8BkBxgBF,YlBuGM,gEA2ZJ,+BkBlgBF,YlBuGM,gEAiaJ,8BkBrEE,+BACE,YAEA,cHvcJ,mBAiBA,YCiBsB,IEyalB,YAGF,uBACE,cC/cN,aAEE,aAEA,aACA,uBACA,SnBqFA,oCA0HE,uCMxNF,cCDsB,IYmBtB,yBACA,4BlBoCA,wBkBpDF,aAmBI,sBACA,YAMF,2BACE,WACA,YAEA,cAEA,iBACA,kBACA,yBAEA,mBnB8CF,qCelFA,iBAiBA,YCiBsB,IhBgFlB,qDCtCJ,wBkBlDA,2BAmBI,aACA,cJ9CJ,oBIiDI,mBnBiEA,qDmB3DJ,mBACE,WACA,aAEA,OAEA","file":"error-page.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n // \"background-tint\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n // \"focus-outline\",\n \"keyline\",\n \"keyline-dark\",\n // \"input-foreground\",\n // \"input-background\",\n // \"input-border\",\n // \"form-error-border\",\n // \"form-error-text\",\n // \"button-text\",\n // \"button-background\",\n // \"button-hover-text\",\n // \"button-hover-background\",\n);\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 @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\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 @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\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 @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\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 @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\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(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: 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(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $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 @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n // @include colour-css-vars-high-contrast(\n // \"form-error-border\",\n // \"focus-outline\"\n // );\n @include colour-css-vars-high-contrast;\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%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\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.7)} !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.7)} !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%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(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 @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n@use \"borders\";\n\n@mixin visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n background-color: transparent !important;\n\n border: 0 !important;\n\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n}\n\n%focus-outline {\n outline: a11y.$focus-outline-outer-width #000 solid !important;\n outline-offset: a11y.$focus-outline-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition:\n outline-offset 0.1s,\n box-shadow 0.1s;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width #000 !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width #000 !important;\n }\n }\n}\n\n@mixin focus-outline {\n @extend %focus-outline;\n}\n\n@mixin no-focus-outline {\n outline: none !important;\n\n box-shadow: none !important;\n}\n\n%active-outline {\n outline: a11y.$focus-outline-active-outer-width #000 solid !important;\n outline-offset: a11y.$focus-outline-active-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition: none;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width #000 !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width #000 !important;\n }\n }\n}\n\n@mixin active-outline {\n @extend %active-outline;\n}\n\n%faux-full-outline {\n position: relative;\n}\n\n%faux-full-outline-anchor {\n &::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 9;\n\n @include borders.rounded-border;\n }\n\n &:focus,\n &:active {\n @include no-focus-outline;\n }\n\n &:focus {\n &::before {\n @include focus-outline;\n }\n }\n\n &:active {\n &::before {\n @include active-outline;\n }\n }\n}\n\n@mixin faux-full-outline($anchor_selector) {\n @extend %faux-full-outline;\n\n #{$anchor_selector} {\n @extend %faux-full-outline-anchor;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/\n ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n /\n@function space($size) {\n // @return #{$size spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\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 \"../tools/a11y\";\n\n.tna-visually-hidden,\n.tna-\\!--visually-hidden {\n @include a11y.visually-hidden;\n}\n\n:focus,\n:focus-visible,\n:active {\n z-index: 9;\n}\n\n:focus-visible {\n @include a11y.focus-outline;\n}\n\n@supports not selector(:focus-visible) {\n :focus {\n z-index: 9;\n\n @include a11y.focus-outline;\n }\n}\n\na,\nbutton,\ninput,\ntextarea,\nselect,\nsummary {\n &:active {\n @include a11y.active-outline;\n }\n}\n\n[tabindex=\"-1\"] :focus-visible,\n[tabindex=\"-1\"] :focus,\n.tna-\\!--no-focus-style:focus-visible,\n.tna-\\!--no-focus-style:focus {\n @include a11y.no-focus-outline;\n}\n","@use \"../tools/borders\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n\n.tna-section {\n padding-top: spacing.space(3);\n padding-bottom: spacing.space(3);\n}\n\n.tna-aside {\n @include spacing.space-above;\n padding: spacing.space(2);\n\n @include borders.rounded-border;\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &--tight {\n padding: spacing.space(1);\n }\n}\n\n@include media.on-mobile {\n .tna-section {\n padding-top: spacing.space(2);\n padding-bottom: spacing.space(2);\n }\n\n .tna-aside {\n padding: spacing.space(1);\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","@use \"../../tools/colour\";\n\n.tna-template {\n @include colour.always-light;\n\n @include colour.colour-background(\"background\");\n\n &--system-theme {\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--black-accent {\n @include colour.black-accent;\n }\n\n &--pink-accent {\n @include colour.pink-accent;\n }\n\n &--orange-accent {\n @include colour.orange-accent;\n }\n\n &--yellow-accent {\n @include colour.yellow-accent;\n }\n\n &--green-accent {\n @include colour.green-accent;\n }\n\n &--blue-accent {\n @include colour.blue-accent;\n }\n}\n\n.tna-background,\n.tna-block {\n &-tint {\n @include colour.tint;\n }\n\n &-contrast {\n @include colour.contrast;\n }\n\n &-accent {\n @include colour.accent;\n }\n\n &-accent-light {\n @include colour.accent-light;\n }\n\n &-base {\n @include colour.base;\n }\n}\n\n.tna-border {\n &-keyline {\n @include colour.colour-border(\"keyline\", 1px);\n }\n\n &-keyline-dark {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n\n.tna-accent {\n &-black {\n @include colour.black-accent;\n }\n\n &-pink {\n @include colour.pink-accent;\n }\n\n &-orange {\n @include colour.orange-accent;\n }\n\n &-yellow {\n @include colour.yellow-accent;\n }\n\n &-green {\n @include colour.green-accent;\n }\n\n &-blue {\n @include colour.blue-accent;\n }\n}\n",".tna-template {\n /\n * ------------------------------------------\n * A minimum page width of 320px is needed in\n * order to meet the WCAG AA success criteria\n * for 1.4.10 (Reflow)\n * https://www.w3.org/WAI/WCAG21/Understanding/reflow.html\n * ------------------------------------------\n /\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /\n * ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n /\n -webkit-overflow-scrolling: touch;\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(:is(.tna-global-header, .tna-header)):has(.tna-main):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n }\n}\n\n.tna-main {\n flex: 1;\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n\n.tna-container {\n width: 100%;\n max-width: gridVars.$largest-container-width;\n margin-right: auto;\n margin-left: auto;\n padding-right: grid.gutter-width-half();\n padding-left: grid.gutter-width-half();\n\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n justify-content: flex-start;\n\n box-sizing: border-box;\n\n & &--no-padding {\n max-width: calc(\n #{gridVars.$largest-container-width} - #{grid.gutter-width-double()}\n );\n padding-right: 0;\n padding-left: 0;\n }\n\n &--max {\n max-width: none;\n }\n\n &--centred,\n &--align-centre {\n justify-content: center;\n }\n\n &--align-right {\n justify-content: flex-end;\n }\n\n & &--nested {\n width: auto;\n margin-right: -#{grid.gutter-width()};\n margin-left: -#{grid.gutter-width()};\n }\n\n @at-root #{selector.unify(\"ul, ol\", &)} {\n list-style: none;\n }\n}\n\n.tna-column {\n padding-right: grid.gutter-width-half();\n padding-left: grid.gutter-width-half();\n\n box-sizing: border-box;\n\n & &--no-padding {\n padding-right: 0;\n padding-left: 0;\n }\n\n &--align-top {\n align-self: flex-start;\n }\n\n &--align-centre {\n align-self: center;\n }\n\n &--align-bottom {\n align-self: flex-end;\n }\n}\n\n@include grid.columns-generator(gridVars.$column-count);\n\n@include media.on-medium {\n @include grid.columns-generator(gridVars.$column-count-medium, \"medium\");\n}\n\n@include media.on-small {\n @include grid.columns-generator(gridVars.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n .tna-container {\n padding-right: grid.gutter-width-tiny-half();\n padding-left: grid.gutter-width-tiny-half();\n\n & &--nested {\n width: auto;\n margin-right: -#{grid.gutter-width-tiny()};\n margin-left: -#{grid.gutter-width-tiny()};\n }\n }\n\n .tna-column {\n padding-right: grid.gutter-width-tiny-half();\n padding-left: grid.gutter-width-tiny-half();\n }\n\n @include grid.columns-generator(gridVars.$column-count-tiny, \"tiny\");\n}\n","$largest-container-width: 1280px !default;\n\n$gutter-width: 2 !default;\n$gutter-width-tiny: 1 !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"sass:math\";\n@use \"../variables/grid\";\n@use \"spacing\";\n\n@function gutter-width() {\n @return spacing.space(grid.$gutter-width);\n}\n\n@function gutter-width-half() {\n @return spacing.space(math.div(grid.$gutter-width, 2));\n}\n\n@function gutter-width-double() {\n @return spacing.space(grid.$gutter-width 2);\n}\n\n@function gutter-width-tiny() {\n @return spacing.space(grid.$gutter-width-tiny);\n}\n\n@function gutter-width-tiny-half() {\n @return spacing.space(math.div(grid.$gutter-width-tiny, 2));\n}\n\n@function gutter-width-tiny-double() {\n @return spacing.space(grid.$gutter-width-tiny * 2);\n}\n\n@mixin columns-generator($count, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n .tna-column {\n &--full#{$suffix} {\n width: 100%;\n flex: none;\n }\n\n @for $i from 1 through $count - 1 {\n $simplest-fraction-found: false;\n\n @for $j from math.div($count, 2) through 1 {\n @if (\n $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n ) {\n &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n\n $simplest-fraction-found: true;\n }\n }\n\n @if $simplest-fraction-found != true {\n &--width-#{$i}-#{$count}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{$i}-#{$count}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{$i}-#{$count}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n }\n }\n\n @if $suffix != \"\" {\n &--no-margin-right#{$suffix} {\n margin-right: 0;\n }\n\n &--no-margin-left#{$suffix} {\n margin-left: 0;\n }\n }\n\n @for $i from 1 through 3 {\n &--flex-#{$i}#{$suffix} {\n width: auto;\n\n flex: $i 0;\n }\n }\n\n @for $i from 1 through 4 {\n &--order-#{$i}#{$suffix} {\n order: $i;\n }\n }\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/typography\";\n\n* {\n margin: 0;\n padding: 0;\n\n @media (prefers-contrast: more) {\n background-image: none;\n }\n}\n\n/\n ------------------------------------------\n * Disable the \"Auto dark mode\" feature as we\n * have our own dark theme\n * ------------------------------------------\n /\n:root {\n color-scheme: only light;\n}\n\n/\n * ------------------------------------------\n * If the browser supports -apple-system-body\n * which at the moment is just iOS then using\n * the system body font we can respond to the\n * Dynamic Type setting in iOS, however we do\n * disable it for any non-touch Apple devices\n * such as Mac OS, because the default system\n * font size is set to 13px rather than 16px\n * ------------------------------------------\n /\n@supports (font: -apple-system-body) and (-webkit-touch-callout: default) {\n html {\n / stylelint-disable-next-line font-family-no-missing-generic-family-keyword /\n font: -apple-system-body;\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n height: auto;\n\n display: block;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n font-family: inherit;\n font-size: inherit;\n}\n\n[hidden] {\n display: none !important;\n}\n\nhr {\n @include colour.colour-border(\"keyline\", 0, solid);\n border-top-width: 1px;\n\n &.tna-hr-dark {\n @include colour.colour-border(\"keyline-dark\");\n }\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../../variables/typography\" as typographyVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n direction: ltr;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n text-size-adjust: none;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n\n @include colour.on-high-contrast {\n @include typography.main-font-weight-medium;\n }\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-medium {\n @include typography.font-size(typographyVars.$body-font-size-px-medium);\n }\n\n @include media.on-mobile {\n @include typography.font-size(typographyVars.$body-font-size-px-mobile);\n }\n}\n\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n @include spacing.space-above;\n\n + p {\n margin-top: spacing.space(1);\n }\n}\n\na {\n @include typography.interactable-text-decoration;\n\n border-radius: 0.1px;\n\n &,\n &:link {\n @include colour.colour-font(\"link\");\n }\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-link--no-visited-state {\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n}\n\nsmall {\n @include typography.font-size(typographyVars.$body-font-size-px 0.85);\n}\n\n%chip {\n max-width: max-content;\n padding: spacing.space(0.125) spacing.space(0.25);\n\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n @include colour.colour-font(\"font-base\");\n @include typography.detail-font-small;\n line-height: 1;\n text-align: center;\n text-wrap-style: balance;\n\n @include borders.rounded-border;\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: underline;\n\n &:hover {\n text-decoration: underline;\n text-decoration-thickness: 0.1875em;\n text-underline-offset: 0.0625em;\n\n .fa-solid {\n color: inherit;\n }\n }\n }\n\n .fa-solid {\n @include colour.colour-font(\"icon-light\");\n\n @include colour.on-high-contrast {\n @include colour.colour-font(\"icon\");\n }\n }\n}\n\n%chip-plain {\n padding: 0;\n\n text-align: left;\n\n background-color: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n @at-root #{selector.unify(\"a\", &)} {\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid {\n color: inherit;\n }\n }\n}\n\n%chip-accent {\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 2px);\n\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n\n .tna-background-accent &,\n .tna-template--dark-theme .tna-background-accent-light & {\n @include colour.colour-font(\"contrast-font-base\");\n\n @include colour.colour-background(\"contrast-background\");\n\n @include colour.colour-border(\"contrast-background\");\n\n .fa-solid {\n @include colour.colour-font(\"contrast-icon-light\");\n }\n }\n\n .tna-template--system-theme .tna-background-accent-light & {\n @media (prefers-color-scheme: dark) {\n @include colour.colour-font(\"contrast-font-base\");\n\n @include colour.colour-background(\"contrast-background\");\n\n @include colour.colour-border(\"contrast-background\");\n\n .fa-solid {\n @include colour.colour-font(\"contrast-icon-light\");\n }\n }\n }\n}\n\n.tna-chip {\n @extend %chip;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &--black {\n @include colour.black-accent;\n }\n\n &--pink {\n @include colour.pink-accent;\n }\n\n &--orange {\n @include colour.orange-accent;\n }\n\n &--yellow {\n @include colour.yellow-accent;\n }\n\n &--green {\n @include colour.green-accent;\n }\n\n &--blue {\n @include colour.blue-accent;\n }\n\n &:not(&--plain) {\n @extend %chip-accent;\n }\n}\n\n.tna-chip-list {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n list-style: none;\n\n &__item {\n display: flex;\n align-items: center;\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n text-wrap: pretty;\n\n a {\n display: inline-block;\n\n vertical-align: top;\n\n &::after {\n content: \"\";\n\n width: 0.3125em;\n height: 0.3125em;\n margin-bottom: 0.1em;\n margin-left: 0.375em;\n\n display: inline-block;\n\n vertical-align: middle;\n\n transform: rotate(45deg);\n\n @include colour.colour-border(\"link\", 0.125em, solid, top);\n @include colour.colour-border(\"link\", 0.125em, solid, right);\n }\n\n &:not(.tna-link--no-visited-state):visited {\n &::after {\n @include colour.colour-border(\"link-visited\");\n }\n }\n }\n\n strong {\n font-weight: inherit;\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.heading-generator(\n typographyVars.$heading-xl-font-size-default,\n typographyVars.$heading-xl-font-size-medium,\n typographyVars.$heading-xl-font-size-small,\n typographyVars.$heading-xl-font-size-tiny,\n typographyVars.$heading-xl-line-height\n );\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.heading-generator(\n typographyVars.$heading-l-font-size-default,\n typographyVars.$heading-l-font-size-medium,\n typographyVars.$heading-l-font-size-small,\n typographyVars.$heading-l-font-size-tiny,\n typographyVars.$heading-l-line-height\n );\n\n a {\n &::after {\n width: 0.275em;\n height: 0.275em;\n margin-bottom: 0;\n margin-left: 0.25em;\n\n border-top-width: 0.1em;\n border-right-width: 0.1em;\n }\n }\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.heading-generator(\n typographyVars.$heading-m-font-size-default,\n typographyVars.$heading-m-font-size-medium,\n typographyVars.$heading-m-font-size-small,\n typographyVars.$heading-m-font-size-tiny,\n typographyVars.$heading-m-line-height\n );\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.heading-generator(\n typographyVars.$heading-s-font-size-default,\n typographyVars.$heading-s-font-size-medium,\n typographyVars.$heading-s-font-size-small,\n typographyVars.$heading-s-font-size-tiny,\n typographyVars.$heading-s-line-height\n );\n}\n\n%heading-xs {\n @extend %heading;\n\n @include typography.main-font-weight;\n\n font-size: 1em;\n line-height: typographyVars.$heading-s-line-height;\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 0;\n padding: spacing.space(1) 0 0;\n\n &:first-child {\n padding-top: 0;\n }\n\n + p,\n + .tna-large-paragraph,\n + .tna-scene-setter {\n margin-top: spacing.space(1);\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n\n &-xs {\n @extend %heading-xs;\n @extend %headings-and-heading-groups;\n }\n\n &--no-link-arrow {\n a {\n &::after {\n display: none;\n }\n }\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 spacing.space(0.25);\n\n @extend %chip;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(&--plain) {\n @extend %chip-accent;\n }\n }\n\n &__title {\n margin: 0;\n\n display: block;\n }\n\n &-xl &__title {\n @extend %heading-xl;\n }\n\n &-l &__title {\n @extend %heading-l;\n }\n\n &-m &__title {\n @extend %heading-m;\n }\n\n &-s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: spacing.space(1) spacing.space(1) spacing.space(1) spacing.space(2);\n\n @include colour.thick-keyline-accent(left);\n\n // &::before {\n // content: \"\\201C\";\n\n // display: block;\n\n // font-family: Georgia, \"Times New Roman\", Times, serif;\n // font-size: 3em;\n // line-height: 1;\n // @include colour.colour-font(\"font-light\");\n // }\n\n &__quote {\n @include typography.main-font-weight-medium;\n quotes: auto;\n quotes: \"‘\" \"’\";\n\n &:has(:is(ul, ol)) {\n quotes: none;\n }\n\n > :first-child::before {\n content: open-quote;\n }\n\n > :last-child::after {\n content: close-quote;\n }\n }\n\n &__citation {\n margin-top: spacing.space(1);\n\n @include typography.font-size(16);\n\n &::before {\n content: \"\\2014\" \" \";\n content: \"\\2014\" \" \" / \"\";\n }\n }\n\n @include media.on-tiny {\n padding: spacing.space(0.5) spacing.space(0.5) spacing.space(0.5)\n #{spacing.space(1)};\n }\n}\n\n.tna-large-paragraph {\n @include spacing.space-above;\n\n @include typography.font-size(22);\n @include colour.colour-font(\"font-dark\");\n\n @include media.on-mobile {\n @include typography.font-size(20);\n }\n\n &--bold {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font-weight-medium;\n }\n}\n\n.tna-scene-setter {\n @include spacing.space-above;\n\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(22);\n line-height: 1.7;\n\n @include media.on-mobile {\n @include typography.font-size(20);\n }\n}\n\naddress {\n line-height: 1.375;\n font-style: inherit;\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-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\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: 19 !default;\n$body-font-size-px-medium: 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: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !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.5 !default;\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 @include colour.on-forced-colours {\n display: none;\n }\n }\n\n &__theme-selector-button {\n @include typography.main-font-weight-bold;\n }\n\n &__theme-selector-notice {\n margin-top: spacing.space(0.5);\n margin-bottom: spacing.space(0.25);\n padding: spacing.space(0.5) spacing.space(0.75);\n\n @include typography.font-size(16);\n line-height: 1.5;\n\n @include colour.blue-accent;\n @include colour.accent-light;\n\n @include borders.rounded-border;\n @include colour.thick-keyline-accent(left);\n }\n\n &__theme-selector-enable-settings-cookies {\n appearance: none;\n\n line-height: inherit;\n text-decoration: underline;\n\n background: none;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n @include colour.colour-font(\"link\");\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n .tna-logo {\n margin-top: spacing.space(2);\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(1) spacing.space(2);\n }\n\n &-item {\n &-link {\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n @include typography.font-size(16);\n line-height: 1.25;\n text-decoration: none;\n\n svg {\n height: 1.5em;\n\n path {\n fill: currentColor;\n }\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &-text {\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 @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 media.on-tiny {\n &__social-items {\n flex-direction: column;\n }\n\n &__social-item-link {\n @include typography.font-size(14);\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 \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-header {\n @include colour.contrast;\n\n position: relative;\n\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n\n .tna-template--dark-theme & {\n background: colour.brand-colour(\"black\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n background: colour.brand-colour(\"black\");\n }\n }\n\n @include colour.on-high-contrast {\n background: colour.brand-colour(\"black\");\n }\n\n &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo-wrapper {\n padding-top: spacing.space(1.25);\n padding-bottom: spacing.space(1.25);\n }\n\n &__logo {\n display: flex;\n align-items: flex-end;\n\n color: inherit;\n text-decoration: none;\n\n &--link {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover:not(:focus) {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n }\n\n &__logo-strapline {\n margin: 0 spacing.space(0.75);\n\n display: inline-block;\n\n line-height: 1.625rem;\n @include typography.heading-font;\n @include typography.font-size(20);\n text-transform: uppercase;\n }\n\n &__navigation-button-wrapper {\n align-self: center;\n\n display: none;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: inline-block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n\n background-color: inherit;\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-button {\n height: 2rem;\n padding: 0;\n\n appearance: none;\n\n display: flex;\n align-items: center;\n gap: 0.75rem;\n\n position: relative;\n\n color: inherit;\n @include typography.main-font-weight-bold;\n @include typography.font-size(16);\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--opened {\n .tna-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation {\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n justify-content: space-between;\n\n position: relative;\n z-index: 2;\n }\n\n &__top-navigation-items {\n margin: 0;\n padding: spacing.space(1.25) 0;\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n line-height: 1;\n\n list-style: none;\n\n @include typography.font-size(15);\n }\n\n &__top-navigation-item {\n display: block;\n }\n\n &__top-navigation-item-link {\n display: flex;\n align-items: center;\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover,\n &:focus-visible,\n &--selected {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n }\n\n &:hover,\n &--selected {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid {\n margin-right: spacing.space(0.375);\n }\n }\n\n &__navigation-items {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n gap: spacing.space(2);\n\n white-space: nowrap;\n\n list-style: none;\n }\n\n &__navigation-item {\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) 0;\n\n display: inline-block;\n\n position: relative;\n\n line-height: 2;\n text-decoration: none;\n\n @include typography.main-font-weight-medium;\n\n &::after {\n content: \"\";\n\n height: 0;\n\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n\n @include colour.colour-background(\"font-dark\");\n }\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &--selected {\n &::after {\n @include colour.thick-keyline-dark(top);\n }\n }\n }\n\n &.tna-background-accent {\n background: colour.colour-var(\"background\");\n }\n\n &.tna-background-accent &__navigation {\n @include colour.contrast-on-mobile;\n }\n\n .tna-logo {\n width: 5rem;\n\n flex-shrink: 0;\n }\n\n @include media.on-mobile {\n &__logo-wrapper {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1);\n }\n\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__navigation-button-wrapper {\n display: block;\n\n &.tna-column {\n padding-left: 0;\n }\n }\n\n &__navigation {\n flex-direction: column;\n align-items: stretch;\n\n &.tna-column {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__top-navigation-items {\n padding: spacing.space(0.5) spacing.space(1);\n\n justify-content: flex-start;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__top-navigation-item {\n margin: 0;\n }\n\n &__top-navigation-item-link {\n padding: spacing.space(0.5) 0;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover,\n &:focus-visible {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &__navigation-items {\n width: 100%;\n\n flex-direction: column;\n gap: 0;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n margin: 0;\n\n display: block;\n\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n &:first-child {\n border-top: none;\n }\n }\n\n &__navigation-item-link {\n display: block;\n\n line-height: 1.75rem;\n\n &::after {\n width: 0;\n height: auto;\n\n top: 0;\n right: auto;\n }\n\n &--selected {\n &::after {\n @include colour.colour-border(\"keyline\", 0.5rem, solid, left);\n }\n }\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__logo-wrapper,\n &__navigation-item-link,\n &__navigation-button-wrapper {\n padding-right: grid.gutter-width();\n }\n\n &__logo-wrapper,\n &__navigation-item-link {\n padding-left: grid.gutter-width();\n }\n\n &__top-navigation-items {\n padding-right: grid.gutter-width();\n padding-left: grid.gutter-width();\n }\n }\n\n @include media.on-tiny {\n &__navigation-button-wrapper,\n &__logo-wrapper {\n padding-right: grid.gutter-width-tiny();\n }\n\n &__logo-wrapper {\n padding-left: grid.gutter-width-tiny();\n }\n\n .tna-logo {\n width: 3.5rem;\n }\n\n &__logo-strapline {\n font-size: 0.9rem;\n line-height: 1.25;\n }\n\n &__navigation-button {\n @include typography.font-size(14);\n }\n\n &__top-navigation-items {\n gap: 0.5rem;\n }\n\n &__navigation-item-link {\n padding-right: grid.gutter-width-tiny();\n padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem);\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n @include colour.on-forced-colours {\n &__navigation-button {\n height: auto;\n\n line-height: 2;\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n border: none;\n }\n\n &__hamburger {\n display: none;\n }\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-warning {\n @include spacing.space-above;\n padding: spacing.space(1);\n\n display: flex;\n align-items: flex-start;\n gap: spacing.space(1);\n\n @include colour.accent-light;\n @include colour.always-light;\n\n @include colour.colour-background-brand(\"cream\");\n\n @include colour.thick-keyline-brand(left, \"yellow\");\n @include borders.rounded-border;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @include media.on-tiny {\n flex-direction: column;\n gap: spacing.space(0.5);\n }\n\n &__heading {\n }\n\n &__heading-icon {\n width: 2rem;\n height: 2rem;\n\n display: block;\n\n line-height: 2rem;\n text-align: center;\n text-transform: lowercase;\n\n border-radius: 100%;\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-border(\"font-dark\", 0.1875rem);\n\n @include media.on-mobile {\n width: 1.5rem;\n height: 1.5rem;\n\n @include typography.font-size(19);\n line-height: 1.5rem;\n\n @include colour.colour-border(\"font-dark\", 0.125rem);\n }\n }\n\n &__body {\n width: 100%;\n margin-top: 0;\n\n flex: 1;\n\n align-self: center;\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../src/nationalarchives/tools/_colour.scss","../../src/nationalarchives/tools/_media.scss","../../src/nationalarchives/tools/_a11y.scss","../../src/nationalarchives/tools/_spacing.scss","../../src/nationalarchives/utilities/a11y/_index.scss","../../src/nationalarchives/utilities/areas/_index.scss","../../src/nationalarchives/tools/_borders.scss","../../src/nationalarchives/variables/_borders.scss","../../src/nationalarchives/utilities/colour/_index.scss","../../src/nationalarchives/utilities/global/_index.scss","../../src/nationalarchives/utilities/grid/_index.scss","../../src/nationalarchives/variables/_grid.scss","../../src/nationalarchives/tools/_grid.scss","../../src/nationalarchives/utilities/reset/_index.scss","../../src/nationalarchives/utilities/typography/_index.scss","../../src/nationalarchives/tools/_typography.scss","../../src/nationalarchives/variables/_typography.scss","../../src/nationalarchives/components/footer/footer.scss","../../src/nationalarchives/components/header/header.scss","../../src/nationalarchives/components/warning/warning.scss"],"names":[],"mappings":"CA8OA,2BAvMM,sBAEE,2BAFF,2DAEE,0BAFF,0BAEE,+BAFF,kCAEE,uCAFF,kCAEE,uCAFF,gBAEE,qBAFF,wBAEE,6BAFF,oEAEE,uCAFF,gCAEE,qCAFF,+/CA2MJ,+BAJF,2BAjLM,iCAEE,sCAFF,kDAEE,+BAFF,0BAEE,+BAFF,2BAEE,gCAFF,iCAEE,sCAFF,gBAEE,qBAFF,wBAEE,6BAFF,+DAEE,mCAFF,6BAEE,kCAFF,0+CAkMN,4EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAhLA,4CAJA,gCCNA,wBDqMF,0DAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAzMF,4CAJA,iCAyNF,qCAEI,4OAvNF,4CAJA,gCAuOF,qCACE,qCApOA,4CA6OF,qIACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEA3PA,4CAJA,gCA0QF,qGACE,6CACA,qBACA,0BACA,kCACA,kCACA,kCACA,gCACA,kCACA,kCAIA,kCAIA,8CAIA,0CA3RA,4CAJA,gCAqSE,mCADF,qNAKI,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,kEAIJ,6MAIE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEAQJ,kEACE,iDACA,yDACA,6CACA,4CACA,4CACA,mDACA,mDACA,uCACA,+CACA,gDACA,qDACA,sDACA,0DAOF,2VACE,kDACA,kDACA,yDACA,yDACA,6CACA,qDACA,sDACA,2DACA,sDAGF,+DACE,6CACA,yDACA,yCACA,gDACA,4DAQF,4DACE,iDACA,yDACA,6CACA,0DAQF,kEACE,iDACA,yDACA,4CACA,0DAQF,+DACE,+CACA,yDACA,8CACA,wDAQF,+FACE,gDACA,yDACA,6CACA,yDEveF,wBACE,kCACA,8BAEA,qCAGA,WACE,kCAGF,4EACE,8BAEA,qCAIA,mCADF,gFAEI,8BAEA,sCAeN,iFACE,kCACA,8BAEA,qCAGA,gBAEA,6OACE,8BAEA,qCAIA,mCADF,yPAEI,8BAEA,sCCtDN,sOACE,gBAUA,saACE,aCpCJ,8CFGE,qBACA,sBACA,oBACA,qBAEA,2BAEA,6BACA,uBACA,wBACA,sBAEA,0CAEA,oBAEA,wCACA,gCEfF,iCAGE,UAOF,uCACE,QACE,WAiBJ,4HFoBE,wBAEA,2BGrDF,aACE,iBACA,oBAGF,WAEE,aCTA,cCDsB,IP6gBtB,8BKrgBF,WL8GM,uDAiZJ,+BK/fF,WL8GM,uDKpGJ,kBACE,aJ6DF,wBIxDA,aACE,iBACA,oBAGF,WACE,cG9BJ,cR0FE,4CQpFE,mCADF,4BR2CI,sBAEE,2BAFF,kEAEE,4CAFF,gCAEE,qCAFF,wCAEE,6CAFF,wCAEE,6CAFF,yBAEE,8BAFF,qBAEE,0BAFF,sEAEE,0CAFF,0CAEE,+CAFF,sgDQtCF,+DALF,4BRiEI,mSAEE,yCAFF,mCAEE,wCAFF,g/CQvDJ,0BRiCI,sBAEE,2BAFF,kEAEE,4CAFF,gCAEE,qCAFF,wCAEE,6CAFF,wCAEE,6CAFF,yBAEE,8BAFF,qBAEE,0BAFF,sEAEE,0CAFF,0CAEE,+CAFF,qgDQ9BF,+BAHF,0BRuDI,mSAEE,yCAFF,mCAEE,wCAFF,g/CQEJ,oBR8CI,wDQ1CJ,yBR0CI,sDSxHN,cASE,gBACA,WACA,YAUA,iCAGF,oBACE,gBACA,SACA,UAEA,6FACE,aACA,sBAIJ,UACE,OC9BF,eACE,WACA,UCRwB,ODSxB,kBACA,iBACA,mBACA,kBAEA,aACA,eACA,oBACA,2BAEA,sBAEA,0CACE,8BAGA,gBACA,eAGF,oBACE,eAGF,qDAEE,uBAGF,4BACE,yBAGF,sCACE,WACA,mBACA,kBAGO,kCACP,gBAIJ,YACE,mBACA,kBAEA,sBAEA,oCACE,gBACA,eAGF,uBACE,sBAGF,0BACE,kBAGF,0BACE,oBEvCA,kBACE,WACA,UAUI,wBACE,oBACA,UAGF,+BACE,2BAGF,8BACE,0BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,yBACE,qBACA,UAGF,gCACE,4BAGF,+BACE,2BAkCN,oBACE,WAEA,SAHF,oBACE,WAEA,SAHF,oBACE,WAEA,SAKF,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EXnDf,kDWZE,yBACE,WACA,UAUI,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,UACA,UAGF,qCACE,iBAGF,oCACE,gBAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAwBN,oCACE,eAGF,mCACE,cAKF,2BACE,WAEA,SAHF,2BACE,WAEA,SAHF,2BACE,WAEA,SAKF,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,GX7Cf,kDWlBE,wBACE,WACA,UAUI,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAwBN,mCACE,eAGF,kCACE,cAKF,0BACE,WAEA,SAHF,0BACE,WAEA,SAHF,0BACE,WAEA,SAKF,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,GXvCf,wBS8BA,eACE,qBACA,oBAEA,sCACE,WACA,mBACA,kBAIJ,YACE,qBACA,oBEnEA,uBACE,WACA,UAUI,4BACE,UACA,UAGF,mCACE,iBAGF,kCACE,gBAwBN,kCACE,eAGF,iCACE,cAKF,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SAKF,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,GC9FjB,EACE,SACA,UAEA,+BAJF,EAKI,uBAUJ,MACE,wBAcF,yEACE,KAEE,yBAIJ,6BAKE,eACA,YAEA,cAGF,6BAIE,oBACA,kBAGF,SACE,wBAGF,GbyDM,sDavDJ,qBAEA,eb0DI,kDcpHN,cd+EE,gCe7DA,YCSA,qBDRA,kBACA,yBACA,mCAfA,YCuBiB,IF1BjB,cACA,kCACA,8BACA,sBACA,kCACA,mCdwfA,+BchgBF,cCUE,YCoBwB,KFf1B,oBACE,cCnBA,oBDqBA,YECiB,KfkBjB,kDatBF,oBClBE,oBd4EA,wBa1DF,oBClBE,qBDgCF,OCfE,YCiBsB,IFKtB,IACE,gBAIJ,ECYE,0BC/BuC,WDgCvC,sBCjCoC,OFuBpC,mBAEA,SdiCA,2Bc5BA,Ud4BA,mCcxBA,iBCGA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OFwClC,qCdkBF,2BcZF,MCtEE,sBD0EF,kCACE,sBACA,yBAEA,aACA,mBACA,WdEA,gCe5CA,YC4BA,sBD3BA,kBACA,yBAIE,YCwBiB,IDpEnB,mBAmDA,gBACA,yBDgCA,cACA,kBACA,wBRzFA,cCDsB,IO8Fb,oCACP,0BAEA,gDACE,0BACA,kCACA,8BAEA,oEACE,cAKN,sDdtBA,6CAibA,+Bc3ZA,sDdtBA,qBc+BF,gDACE,UAEA,gBAEA,+BAEA,YACA,mBAGE,8DC/DF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OFwGlC,sEACE,cAKN,4FdpBM,mDcyBJ,iCACA,yBAEA,oVd5DA,oDAIA,qDAiCI,iDc+BF,4XdpEF,2Dc0EE,mCADF,8MdzEA,oDAIA,qDAiCI,iDc4CA,kOdjFJ,4Dc4HF,eAGE,aACA,eACA,kBAEA,gBAEA,qBACE,aACA,mBAIJ,kNd3IE,qCc6IA,iBAEA,oOACE,qBAEA,mBAEA,mSACE,WAEA,cACA,eACA,mBACA,mBAEA,qBAEA,sBAEA,wBd1IA,4FciJA,opBdlIA,0CcwIJ,iRACE,oBAIJ,kDCnOE,YCmBA,gDDlBA,YCqBoB,IDuBpB,YCDuB,ID7EvB,edwCA,kDa4NF,kDCpQE,gBd4EA,wBawLF,kDCpQE,mBDiRF,gDChPE,YCmBA,gDDlBA,YCqBoB,IDuBpB,YCKsB,KDnFtB,kBdwCA,kDayOF,gDCjRE,gBd4EA,wBaqMF,gDCjRE,qBD8RE,kEACE,aACA,cACA,gBACA,kBAEA,sBACA,wBAKN,gDCzRE,YCiBsB,ID4CtB,YCWsB,IDzFtB,mBdwCA,kDakQF,gDC1SE,oBd4EA,wBa8NF,gDC1SE,qBDuTF,gDCtSE,YCiBsB,ID4CtB,YCiBsB,ID/FtB,oBDoUF,gBC3TE,YCuBiB,IFySjB,cACA,YE3OsB,IF8OxB,sIAEE,gBACA,iBAEA,kPACE,cAGF,mwBAGE,gBAgCE,qCACE,aAcN,wBACE,mBAaF,mBACE,SAEA,cAoBJ,gBAEE,eACA,gBACA,cACA,4Bd1UI,+DcyVJ,uBCpbA,YCoBwB,IFkatB,YACA,eAEA,uCACE,YAGF,4CACE,mBAGF,0CACE,oBAIJ,0BACE,gBCpdF,eDwdE,kCACE,gBACA,mBbtaJ,wBayXF,gBAkDI,mCAKJ,qBCpeE,mBfkFA,qCCNA,wBawZF,qBCpeE,mBD8eA,2Bd5ZA,gCerEA,YCoBwB,IFmd1B,kBC9cE,YC4BA,sBD3BA,kBACA,yBAIE,YCwBiB,IhBcnB,qCelFA,mBD0fA,gBb9aA,wBawaF,kBCpfE,mBDigBF,QACE,kBACA,mBGlgBA,mBAGE,iBACA,oBAIA,8CACE,yBjB+fJ,8BiBjgBA,4BAMI,cAIJ,mCFDA,YCiBsB,ICZtB,mCACE,kBACA,sBACA,uBFzBF,eE4BE,gBX/BF,cCDsB,IP4GlB,+DiBnEJ,oDACE,gBAEA,oBACA,0BAEA,gBAEA,YACA,mBAEA,ejBkCF,2BiB/BE,0DFUF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OCgCpC,sBACE,gBAGF,mBACE,gBACA,gBACA,cAMF,kBACE,gBFtEF,eE2EA,oBACE,gBAEA,0BACE,aACA,eACA,uBACA,cAIA,8BACE,aACA,mBACA,WFzFN,eE4FM,iBACA,qBAEA,kCACE,aAEA,uCACE,kBAIJ,oCF1CN,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OCyFpC,0BACE,gBACA,aFnHF,eEuHE,qCX1HF,cCDsB,IUiIpB,8BACE,iBAQA,mCACE,qBACA,wBFxIN,efwGI,+DiBsCE,wCACE,qBAEA,qBAEA,8CFtFR,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OC+H5B,kDACE,oBAOV,mBACE,iBFhKF,eEoKE,yBACE,gBAEA,kBhBnHJ,wBgBgHE,yBAMI,oBAIJ,wBACE,eAEA,qBhB7HJ,wBgB0HE,wBAMI,eAQN,eACE,kBACA,qBAGF,qBFjMA,eEoME,mCACE,mBAGF,iCACE,gBAIJ,0BACE,cAGF,mBACE,kBAEA,wBACE,qBAGF,kCACE,uBAEA,chB/IJ,wBgBoJE,mBACE,cACA,qBhB9KJ,wBgBmLE,0BACE,sBAGF,8BF3OF,oBfmgBA,+BiBlRE,4BjBzIE,gEAiaJ,8BiBzgBF,YjBwGM,0DiBmJE,oCjBnJF,0DiByJF,0BACE,+BjBhJA,uDAiZJ,+BiBngBF,YjBwGM,0DiBmJE,oCjBnJF,0DiByJF,0BACE,+BjBhJA,uDkBjHN,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBlBifJ,+BkBlgBF,YAsBI,oBAIA,oCACE,8BAIJ,0BACE,oBACA,uBAGF,kBACE,aACA,qBAEA,cACA,qBAGE,qFAGE,cAGF,0CACE,qBlB8EJ,sDkB3EI,mBAKN,4BACE,iBAEA,qBAEA,qBHhCF,YCmBA,gDDlBA,YCqBoB,IDvDpB,kBGoEE,yBAGF,uCACE,kBAEA,aAGF,uBACE,WACA,cAEA,qBlBKF,gDkBDE,6DAEE,WAEA,WACA,cAEA,cAEA,kBACA,QAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,+BACE,YACA,UAEA,gBAEA,aACA,mBACA,WAEA,kBAEA,cHxGF,YCiBsB,IDlCtB,eG6HE,gBAEA,6BACA,sBACA,mBAEA,eAEA,qCHxEF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OEkHhC,8DACE,SAEA,sEACE,YAEA,0BAGF,qEACE,eAEA,yBAMR,wBACE,aACA,8BACA,qBACA,8BAEA,kBACA,UAGF,kCACE,SACA,kBAEA,aACA,yBACA,kBAEA,cAEA,gBHhLF,oBGqLA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HlB7GF,6CkBsHI,udlBtHJ,gCkB6HE,4FHlJF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OE4LlC,gDACE,sBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,iBAEA,qBAEA,kBAEA,cACA,qBHpOF,YCoBwB,IEoNtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,OlBvKJ,gDkB4KE,mHAGE,cAIA,mDlBjKA,0DkBuKJ,kCACE,sCAOF,sBACE,WAEA,cjB9MF,wBiBkNE,0BACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,uCACE,cAEA,kDACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAIJ,kCACE,oBAEA,2BlBvNA,+DkB4NF,iCACE,SAGF,sCACE,iBAEA,+HlBzPJ,6CkB+PI,gGlB/PJ,qCkBqQE,8BACE,WAEA,sBACA,MAEA,oClBrPA,uHkB2PF,6BACE,SAEA,clB9PA,4DkBkQA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAIA,mDlBrRF,gEC1DJ,kDiBuVE,sBACE,WAGF,4BACE,oBAGF,mGAGE,mBAGF,4DAEE,kBAGF,kCACE,mBACA,mBjBtWJ,wBiB2WE,iEAEE,mBAGF,0BACE,kBAGF,sBACE,aAGF,4BACE,gBACA,iBAGF,+BHjbF,mBGqbE,kCACE,UAGF,kCACE,mBACA,iClB8EJ,8BkBxgBF,YlBuGM,gEA2ZJ,+BkBlgBF,YlBuGM,gEAiaJ,8BkBrEE,+BACE,YAEA,cHvcJ,mBAiBA,YCiBsB,IEyalB,YAGF,uBACE,cC/cN,aAEE,aAEA,aACA,uBACA,SnBqFA,oCA0HE,uCMxNF,cCDsB,IYmBtB,yBACA,4BlBoCA,wBkBpDF,aAmBI,sBACA,YAMF,2BACE,WACA,YAEA,cAEA,iBACA,kBACA,yBAEA,mBnB8CF,qCelFA,iBAiBA,YCiBsB,IhBgFlB,qDCtCJ,wBkBlDA,2BAmBI,aACA,cJ9CJ,oBIiDI,mBnBiEA,qDmB3DJ,mBACE,WACA,aAEA,OAEA","file":"error-page.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n // \"background-tint\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n // \"focus-outline\",\n \"keyline\",\n \"keyline-dark\",\n // \"input-foreground\",\n // \"input-background\",\n // \"input-border\",\n // \"form-error-border\",\n // \"form-error-text\",\n // \"button-text\",\n // \"button-background\",\n // \"button-hover-text\",\n // \"button-hover-background\",\n);\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 @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\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 @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\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 @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\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 @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\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(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: 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(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $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 @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n // @include colour-css-vars-high-contrast(\n // \"form-error-border\",\n // \"focus-outline\"\n // );\n @include colour-css-vars-high-contrast;\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%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\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.7)} !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.7)} !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%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(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 @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n@use \"borders\";\n\n@mixin visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n background-color: transparent !important;\n\n border: 0 !important;\n\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n}\n\n%focus-outline {\n outline: a11y.$focus-outline-outer-width #000 solid !important;\n outline-offset: a11y.$focus-outline-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition:\n outline-offset 0.1s,\n box-shadow 0.1s;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width #000 !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width #000 !important;\n }\n }\n}\n\n@mixin focus-outline {\n @extend %focus-outline;\n}\n\n@mixin no-focus-outline {\n outline: none !important;\n\n box-shadow: none !important;\n}\n\n%active-outline {\n outline: a11y.$focus-outline-active-outer-width #000 solid !important;\n outline-offset: a11y.$focus-outline-active-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition: none;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width #000 !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width #000 !important;\n }\n }\n}\n\n@mixin active-outline {\n @extend %active-outline;\n}\n\n%faux-full-outline {\n position: relative;\n}\n\n%faux-full-outline-anchor {\n &::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 9;\n\n @include borders.rounded-border;\n }\n\n &:focus,\n &:active {\n @include no-focus-outline;\n }\n\n &:focus {\n &::before {\n @include focus-outline;\n }\n }\n\n &:active {\n &::before {\n @include active-outline;\n }\n }\n}\n\n@mixin faux-full-outline($anchor_selector) {\n @extend %faux-full-outline;\n\n #{$anchor_selector} {\n @extend %faux-full-outline-anchor;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/\n ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n /\n@function space($size) {\n // @return #{$size spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\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 \"../../tools/a11y\";\n\n.tna-visually-hidden,\n.tna-\\!--visually-hidden {\n @include a11y.visually-hidden;\n}\n\n:focus,\n:focus-visible,\n:active {\n z-index: 9;\n}\n\n:focus-visible {\n @include a11y.focus-outline;\n}\n\n@supports not selector(:focus-visible) {\n :focus {\n z-index: 9;\n\n @include a11y.focus-outline;\n }\n}\n\na,\nbutton,\ninput,\ntextarea,\nselect,\nsummary {\n &:active {\n @include a11y.active-outline;\n }\n}\n\n[tabindex=\"-1\"] :focus-visible,\n[tabindex=\"-1\"] :focus,\n.tna-\\!--no-focus-style:focus-visible,\n.tna-\\!--no-focus-style:focus {\n @include a11y.no-focus-outline;\n}\n","@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-section {\n padding-top: spacing.space(3);\n padding-bottom: spacing.space(3);\n}\n\n.tna-aside {\n @include spacing.space-above;\n padding: spacing.space(2);\n\n @include borders.rounded-border;\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &--tight {\n padding: spacing.space(1);\n }\n}\n\n@include media.on-mobile {\n .tna-section {\n padding-top: spacing.space(2);\n padding-bottom: spacing.space(2);\n }\n\n .tna-aside {\n padding: spacing.space(1);\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","@use \"../../tools/colour\";\n\n.tna-template {\n @include colour.always-light;\n\n @include colour.colour-background(\"background\");\n\n &--system-theme {\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--black-accent {\n @include colour.black-accent;\n }\n\n &--pink-accent {\n @include colour.pink-accent;\n }\n\n &--orange-accent {\n @include colour.orange-accent;\n }\n\n &--yellow-accent {\n @include colour.yellow-accent;\n }\n\n &--green-accent {\n @include colour.green-accent;\n }\n\n &--blue-accent {\n @include colour.blue-accent;\n }\n}\n\n.tna-background,\n.tna-block {\n &-tint {\n @include colour.tint;\n }\n\n &-contrast {\n @include colour.contrast;\n }\n\n &-accent {\n @include colour.accent;\n }\n\n &-accent-light {\n @include colour.accent-light;\n }\n\n &-base {\n @include colour.base;\n }\n}\n\n.tna-border {\n &-keyline {\n @include colour.colour-border(\"keyline\", 1px);\n }\n\n &-keyline-dark {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n\n.tna-accent {\n &-black {\n @include colour.black-accent;\n }\n\n &-pink {\n @include colour.pink-accent;\n }\n\n &-orange {\n @include colour.orange-accent;\n }\n\n &-yellow {\n @include colour.yellow-accent;\n }\n\n &-green {\n @include colour.green-accent;\n }\n\n &-blue {\n @include colour.blue-accent;\n }\n}\n",".tna-template {\n /\n * ------------------------------------------\n * A minimum page width of 320px is needed in\n * order to meet the WCAG AA success criteria\n * for 1.4.10 (Reflow)\n * https://www.w3.org/WAI/WCAG21/Understanding/reflow.html\n * ------------------------------------------\n /\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /\n * ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n /\n -webkit-overflow-scrolling: touch;\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(:is(.tna-global-header, .tna-header)):has(.tna-main):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n }\n}\n\n.tna-main {\n flex: 1;\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n\n.tna-container {\n width: 100%;\n max-width: gridVars.$largest-container-width;\n margin-right: auto;\n margin-left: auto;\n padding-right: grid.gutter-width-half();\n padding-left: grid.gutter-width-half();\n\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n justify-content: flex-start;\n\n box-sizing: border-box;\n\n & &--no-padding {\n max-width: calc(\n #{gridVars.$largest-container-width} - #{grid.gutter-width-double()}\n );\n padding-right: 0;\n padding-left: 0;\n }\n\n &--max {\n max-width: none;\n }\n\n &--centred,\n &--align-centre {\n justify-content: center;\n }\n\n &--align-right {\n justify-content: flex-end;\n }\n\n & &--nested {\n width: auto;\n margin-right: -#{grid.gutter-width()};\n margin-left: -#{grid.gutter-width()};\n }\n\n @at-root #{selector.unify(\"ul, ol\", &)} {\n list-style: none;\n }\n}\n\n.tna-column {\n padding-right: grid.gutter-width-half();\n padding-left: grid.gutter-width-half();\n\n box-sizing: border-box;\n\n & &--no-padding {\n padding-right: 0;\n padding-left: 0;\n }\n\n &--align-top {\n align-self: flex-start;\n }\n\n &--align-centre {\n align-self: center;\n }\n\n &--align-bottom {\n align-self: flex-end;\n }\n}\n\n@include grid.columns-generator(gridVars.$column-count);\n\n@include media.on-medium {\n @include grid.columns-generator(gridVars.$column-count-medium, \"medium\");\n}\n\n@include media.on-small {\n @include grid.columns-generator(gridVars.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n .tna-container {\n padding-right: grid.gutter-width-tiny-half();\n padding-left: grid.gutter-width-tiny-half();\n\n & &--nested {\n width: auto;\n margin-right: -#{grid.gutter-width-tiny()};\n margin-left: -#{grid.gutter-width-tiny()};\n }\n }\n\n .tna-column {\n padding-right: grid.gutter-width-tiny-half();\n padding-left: grid.gutter-width-tiny-half();\n }\n\n @include grid.columns-generator(gridVars.$column-count-tiny, \"tiny\");\n}\n","$largest-container-width: 1280px !default;\n\n$gutter-width: 2 !default;\n$gutter-width-tiny: 1 !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"sass:math\";\n@use \"../variables/grid\";\n@use \"spacing\";\n\n@function gutter-width() {\n @return spacing.space(grid.$gutter-width);\n}\n\n@function gutter-width-half() {\n @return spacing.space(math.div(grid.$gutter-width, 2));\n}\n\n@function gutter-width-double() {\n @return spacing.space(grid.$gutter-width 2);\n}\n\n@function gutter-width-tiny() {\n @return spacing.space(grid.$gutter-width-tiny);\n}\n\n@function gutter-width-tiny-half() {\n @return spacing.space(math.div(grid.$gutter-width-tiny, 2));\n}\n\n@function gutter-width-tiny-double() {\n @return spacing.space(grid.$gutter-width-tiny * 2);\n}\n\n@mixin columns-generator($count, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n .tna-column {\n &--full#{$suffix} {\n width: 100%;\n flex: none;\n }\n\n @for $i from 1 through $count - 1 {\n $simplest-fraction-found: false;\n\n @for $j from math.div($count, 2) through 1 {\n @if (\n $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n ) {\n &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n\n $simplest-fraction-found: true;\n }\n }\n\n @if $simplest-fraction-found != true {\n &--width-#{$i}-#{$count}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{$i}-#{$count}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{$i}-#{$count}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n }\n }\n\n @if $suffix != \"\" {\n &--no-margin-right#{$suffix} {\n margin-right: 0;\n }\n\n &--no-margin-left#{$suffix} {\n margin-left: 0;\n }\n }\n\n @for $i from 1 through 3 {\n &--flex-#{$i}#{$suffix} {\n width: auto;\n\n flex: $i 0;\n }\n }\n\n @for $i from 1 through 4 {\n &--order-#{$i}#{$suffix} {\n order: $i;\n }\n }\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n\n* {\n margin: 0;\n padding: 0;\n\n @media (prefers-contrast: more) {\n background-image: none;\n }\n}\n\n/\n ------------------------------------------\n * Disable the \"Auto dark mode\" feature as we\n * have our own dark theme\n * ------------------------------------------\n /\n:root {\n color-scheme: only light;\n}\n\n/\n * ------------------------------------------\n * If the browser supports -apple-system-body\n * which at the moment is just iOS then using\n * the system body font we can respond to the\n * Dynamic Type setting in iOS, however we do\n * disable it for any non-touch Apple devices\n * such as Mac OS, because the default system\n * font size is set to 13px rather than 16px\n * ------------------------------------------\n /\n@supports (font: -apple-system-body) and (-webkit-touch-callout: default) {\n html {\n / stylelint-disable-next-line font-family-no-missing-generic-family-keyword /\n font: -apple-system-body;\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n height: auto;\n\n display: block;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n font-family: inherit;\n font-size: inherit;\n}\n\n[hidden] {\n display: none !important;\n}\n\nhr {\n @include colour.colour-border(\"keyline\", 0, solid);\n border-top-width: 1px;\n\n &.tna-hr-dark {\n @include colour.colour-border(\"keyline-dark\");\n }\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../../variables/typography\" as typographyVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n direction: ltr;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n text-size-adjust: none;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n\n @include colour.on-high-contrast {\n @include typography.main-font-weight-medium;\n }\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-medium {\n @include typography.font-size(typographyVars.$body-font-size-px-medium);\n }\n\n @include media.on-mobile {\n @include typography.font-size(typographyVars.$body-font-size-px-mobile);\n }\n}\n\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n @include spacing.space-above;\n\n + p {\n margin-top: spacing.space(1);\n }\n}\n\na {\n @include typography.interactable-text-decoration;\n\n border-radius: 0.1px;\n\n &,\n &:link {\n @include colour.colour-font(\"link\");\n }\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-link--no-visited-state {\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n}\n\nsmall {\n @include typography.font-size(typographyVars.$body-font-size-px 0.85);\n}\n\n%chip {\n max-width: max-content;\n padding: spacing.space(0.125) spacing.space(0.25);\n\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n @include colour.colour-font(\"font-base\");\n @include typography.detail-font-small;\n line-height: 1;\n text-align: center;\n text-wrap-style: balance;\n\n @include borders.rounded-border;\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: underline;\n\n &:hover {\n text-decoration: underline;\n text-decoration-thickness: 0.1875em;\n text-underline-offset: 0.0625em;\n\n .fa-solid {\n color: inherit;\n }\n }\n }\n\n .fa-solid {\n @include colour.colour-font(\"icon-light\");\n\n @include colour.on-high-contrast {\n @include colour.colour-font(\"icon\");\n }\n }\n}\n\n%chip-plain {\n padding: 0;\n\n text-align: left;\n\n background-color: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n @at-root #{selector.unify(\"a\", &)} {\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid {\n color: inherit;\n }\n }\n}\n\n%chip-accent {\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 2px);\n\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n\n .tna-background-accent &,\n .tna-template--dark-theme .tna-background-accent-light & {\n @include colour.colour-font(\"contrast-font-base\");\n\n @include colour.colour-background(\"contrast-background\");\n\n @include colour.colour-border(\"contrast-background\");\n\n .fa-solid {\n @include colour.colour-font(\"contrast-icon-light\");\n }\n }\n\n .tna-template--system-theme .tna-background-accent-light & {\n @media (prefers-color-scheme: dark) {\n @include colour.colour-font(\"contrast-font-base\");\n\n @include colour.colour-background(\"contrast-background\");\n\n @include colour.colour-border(\"contrast-background\");\n\n .fa-solid {\n @include colour.colour-font(\"contrast-icon-light\");\n }\n }\n }\n}\n\n.tna-chip {\n @extend %chip;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &--black {\n @include colour.black-accent;\n }\n\n &--pink {\n @include colour.pink-accent;\n }\n\n &--orange {\n @include colour.orange-accent;\n }\n\n &--yellow {\n @include colour.yellow-accent;\n }\n\n &--green {\n @include colour.green-accent;\n }\n\n &--blue {\n @include colour.blue-accent;\n }\n\n &:not(&--plain) {\n @extend %chip-accent;\n }\n}\n\n.tna-chip-list {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n list-style: none;\n\n &__item {\n display: flex;\n align-items: center;\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n text-wrap: pretty;\n\n a {\n display: inline-block;\n\n vertical-align: top;\n\n &::after {\n content: \"\";\n\n width: 0.3125em;\n height: 0.3125em;\n margin-bottom: 0.1em;\n margin-left: 0.375em;\n\n display: inline-block;\n\n vertical-align: middle;\n\n transform: rotate(45deg);\n\n @include colour.colour-border(\"link\", 0.125em, solid, top);\n @include colour.colour-border(\"link\", 0.125em, solid, right);\n }\n\n &:not(.tna-link--no-visited-state):visited {\n &::after {\n @include colour.colour-border(\"link-visited\");\n }\n }\n }\n\n strong {\n font-weight: inherit;\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.heading-generator(\n typographyVars.$heading-xl-font-size-default,\n typographyVars.$heading-xl-font-size-medium,\n typographyVars.$heading-xl-font-size-small,\n typographyVars.$heading-xl-font-size-tiny,\n typographyVars.$heading-xl-line-height\n );\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.heading-generator(\n typographyVars.$heading-l-font-size-default,\n typographyVars.$heading-l-font-size-medium,\n typographyVars.$heading-l-font-size-small,\n typographyVars.$heading-l-font-size-tiny,\n typographyVars.$heading-l-line-height\n );\n\n a {\n &::after {\n width: 0.275em;\n height: 0.275em;\n margin-bottom: 0;\n margin-left: 0.25em;\n\n border-top-width: 0.1em;\n border-right-width: 0.1em;\n }\n }\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.heading-generator(\n typographyVars.$heading-m-font-size-default,\n typographyVars.$heading-m-font-size-medium,\n typographyVars.$heading-m-font-size-small,\n typographyVars.$heading-m-font-size-tiny,\n typographyVars.$heading-m-line-height\n );\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.heading-generator(\n typographyVars.$heading-s-font-size-default,\n typographyVars.$heading-s-font-size-medium,\n typographyVars.$heading-s-font-size-small,\n typographyVars.$heading-s-font-size-tiny,\n typographyVars.$heading-s-line-height\n );\n}\n\n%heading-xs {\n @extend %heading;\n\n @include typography.main-font-weight;\n\n font-size: 1em;\n line-height: typographyVars.$heading-s-line-height;\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 0;\n padding: spacing.space(1) 0 0;\n\n &:first-child {\n padding-top: 0;\n }\n\n + p,\n + .tna-large-paragraph,\n + .tna-scene-setter {\n margin-top: spacing.space(1);\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n\n &-xs {\n @extend %heading-xs;\n @extend %headings-and-heading-groups;\n }\n\n &--no-link-arrow {\n a {\n &::after {\n display: none;\n }\n }\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 spacing.space(0.25);\n\n @extend %chip;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(&--plain) {\n @extend %chip-accent;\n }\n }\n\n &__title {\n margin: 0;\n\n display: block;\n }\n\n &-xl &__title {\n @extend %heading-xl;\n }\n\n &-l &__title {\n @extend %heading-l;\n }\n\n &-m &__title {\n @extend %heading-m;\n }\n\n &-s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: spacing.space(1) spacing.space(1) spacing.space(1) spacing.space(2);\n\n @include colour.thick-keyline-accent(left);\n\n // &::before {\n // content: \"\\201C\";\n\n // display: block;\n\n // font-family: Georgia, \"Times New Roman\", Times, serif;\n // font-size: 3em;\n // line-height: 1;\n // @include colour.colour-font(\"font-light\");\n // }\n\n &__quote {\n @include typography.main-font-weight-medium;\n quotes: auto;\n quotes: \"‘\" \"’\";\n\n &:has(:is(ul, ol)) {\n quotes: none;\n }\n\n > :first-child::before {\n content: open-quote;\n }\n\n > :last-child::after {\n content: close-quote;\n }\n }\n\n &__citation {\n margin-top: spacing.space(1);\n\n @include typography.font-size(16);\n\n &::before {\n content: \"\\2014\" \" \";\n content: \"\\2014\" \" \" / \"\";\n }\n }\n\n @include media.on-tiny {\n padding: spacing.space(0.5) spacing.space(0.5) spacing.space(0.5)\n #{spacing.space(1)};\n }\n}\n\n.tna-large-paragraph {\n @include spacing.space-above;\n\n @include typography.font-size(22);\n @include colour.colour-font(\"font-dark\");\n\n @include media.on-mobile {\n @include typography.font-size(20);\n }\n\n &--bold {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font-weight-medium;\n }\n}\n\n.tna-scene-setter {\n @include spacing.space-above;\n\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(22);\n line-height: 1.7;\n\n @include media.on-mobile {\n @include typography.font-size(20);\n }\n}\n\naddress {\n line-height: 1.375;\n font-style: inherit;\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-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\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: 19 !default;\n$body-font-size-px-medium: 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: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !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.5 !default;\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 @include colour.on-forced-colours {\n display: none;\n }\n }\n\n &__theme-selector-button {\n @include typography.main-font-weight-bold;\n }\n\n &__theme-selector-notice {\n margin-top: spacing.space(0.5);\n margin-bottom: spacing.space(0.25);\n padding: spacing.space(0.5) spacing.space(0.75);\n\n @include typography.font-size(16);\n line-height: 1.5;\n\n @include colour.blue-accent;\n @include colour.accent-light;\n\n @include borders.rounded-border;\n @include colour.thick-keyline-accent(left);\n }\n\n &__theme-selector-enable-settings-cookies {\n appearance: none;\n\n line-height: inherit;\n text-decoration: underline;\n\n background: none;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n @include colour.colour-font(\"link\");\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n .tna-logo {\n margin-top: spacing.space(2);\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(1) spacing.space(2);\n }\n\n &-item {\n &-link {\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n @include typography.font-size(16);\n line-height: 1.25;\n text-decoration: none;\n\n svg {\n height: 1.5em;\n\n path {\n fill: currentColor;\n }\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &-text {\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 @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 media.on-tiny {\n &__social-items {\n flex-direction: column;\n }\n\n &__social-item-link {\n @include typography.font-size(14);\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 \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-header {\n @include colour.contrast;\n\n position: relative;\n\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n\n .tna-template--dark-theme & {\n background: colour.brand-colour(\"black\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n background: colour.brand-colour(\"black\");\n }\n }\n\n @include colour.on-high-contrast {\n background: colour.brand-colour(\"black\");\n }\n\n &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo-wrapper {\n padding-top: spacing.space(1.25);\n padding-bottom: spacing.space(1.25);\n }\n\n &__logo {\n display: flex;\n align-items: flex-end;\n\n color: inherit;\n text-decoration: none;\n\n &--link {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover:not(:focus) {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n }\n\n &__logo-strapline {\n margin: 0 spacing.space(0.75);\n\n display: inline-block;\n\n line-height: 1.625rem;\n @include typography.heading-font;\n @include typography.font-size(20);\n text-transform: uppercase;\n }\n\n &__navigation-button-wrapper {\n align-self: center;\n\n display: none;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: inline-block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n\n background-color: inherit;\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-button {\n height: 2rem;\n padding: 0;\n\n appearance: none;\n\n display: flex;\n align-items: center;\n gap: 0.75rem;\n\n position: relative;\n\n color: inherit;\n @include typography.main-font-weight-bold;\n @include typography.font-size(16);\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--opened {\n .tna-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation {\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n justify-content: space-between;\n\n position: relative;\n z-index: 2;\n }\n\n &__top-navigation-items {\n margin: 0;\n padding: spacing.space(1.25) 0;\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n line-height: 1;\n\n list-style: none;\n\n @include typography.font-size(15);\n }\n\n &__top-navigation-item {\n display: block;\n }\n\n &__top-navigation-item-link {\n display: flex;\n align-items: center;\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover,\n &:focus-visible,\n &--selected {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n }\n\n &:hover,\n &--selected {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid {\n margin-right: spacing.space(0.375);\n }\n }\n\n &__navigation-items {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n gap: spacing.space(2);\n\n white-space: nowrap;\n\n list-style: none;\n }\n\n &__navigation-item {\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) 0;\n\n display: inline-block;\n\n position: relative;\n\n line-height: 2;\n text-decoration: none;\n\n @include typography.main-font-weight-medium;\n\n &::after {\n content: \"\";\n\n height: 0;\n\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n\n @include colour.colour-background(\"font-dark\");\n }\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &--selected {\n &::after {\n @include colour.thick-keyline-dark(top);\n }\n }\n }\n\n &.tna-background-accent {\n background: colour.colour-var(\"background\");\n }\n\n &.tna-background-accent &__navigation {\n @include colour.contrast-on-mobile;\n }\n\n .tna-logo {\n width: 5rem;\n\n flex-shrink: 0;\n }\n\n @include media.on-mobile {\n &__logo-wrapper {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1);\n }\n\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__navigation-button-wrapper {\n display: block;\n\n &.tna-column {\n padding-left: 0;\n }\n }\n\n &__navigation {\n flex-direction: column;\n align-items: stretch;\n\n &.tna-column {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__top-navigation-items {\n padding: spacing.space(0.5) spacing.space(1);\n\n justify-content: flex-start;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__top-navigation-item {\n margin: 0;\n }\n\n &__top-navigation-item-link {\n padding: spacing.space(0.5) 0;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover,\n &:focus-visible {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &__navigation-items {\n width: 100%;\n\n flex-direction: column;\n gap: 0;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n margin: 0;\n\n display: block;\n\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n &:first-child {\n border-top: none;\n }\n }\n\n &__navigation-item-link {\n display: block;\n\n line-height: 1.75rem;\n\n &::after {\n width: 0;\n height: auto;\n\n top: 0;\n right: auto;\n }\n\n &--selected {\n &::after {\n @include colour.colour-border(\"keyline\", 0.5rem, solid, left);\n }\n }\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__logo-wrapper,\n &__navigation-item-link,\n &__navigation-button-wrapper {\n padding-right: grid.gutter-width();\n }\n\n &__logo-wrapper,\n &__navigation-item-link {\n padding-left: grid.gutter-width();\n }\n\n &__top-navigation-items {\n padding-right: grid.gutter-width();\n padding-left: grid.gutter-width();\n }\n }\n\n @include media.on-tiny {\n &__navigation-button-wrapper,\n &__logo-wrapper {\n padding-right: grid.gutter-width-tiny();\n }\n\n &__logo-wrapper {\n padding-left: grid.gutter-width-tiny();\n }\n\n .tna-logo {\n width: 3.5rem;\n }\n\n &__logo-strapline {\n font-size: 0.9rem;\n line-height: 1.25;\n }\n\n &__navigation-button {\n @include typography.font-size(14);\n }\n\n &__top-navigation-items {\n gap: 0.5rem;\n }\n\n &__navigation-item-link {\n padding-right: grid.gutter-width-tiny();\n padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem);\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n @include colour.on-forced-colours {\n &__navigation-button {\n height: auto;\n\n line-height: 2;\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n border: none;\n }\n\n &__hamburger {\n display: none;\n }\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-warning {\n @include spacing.space-above;\n padding: spacing.space(1);\n\n display: flex;\n align-items: flex-start;\n gap: spacing.space(1);\n\n @include colour.accent-light;\n @include colour.always-light;\n\n @include colour.colour-background-brand(\"cream\");\n\n @include colour.thick-keyline-brand(left, \"yellow\");\n @include borders.rounded-border;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @include media.on-tiny {\n flex-direction: column;\n gap: spacing.space(0.5);\n }\n\n &__heading {\n }\n\n &__heading-icon {\n width: 2rem;\n height: 2rem;\n\n display: block;\n\n line-height: 2rem;\n text-align: center;\n text-transform: lowercase;\n\n border-radius: 100%;\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-border(\"font-dark\", 0.1875rem);\n\n @include media.on-mobile {\n width: 1.5rem;\n height: 1.5rem;\n\n @include typography.font-size(19);\n line-height: 1.5rem;\n\n @include colour.colour-border(\"font-dark\", 0.125rem);\n }\n }\n\n &__body {\n width: 100%;\n margin-top: 0;\n\n flex: 1;\n\n align-self: center;\n }\n}\n"]}