@nationalarchives/frontend 0.2.3 → 0.2.5

package/nationalarchives/components/footer/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/footer/footer.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/cookies.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/footer/footer.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","window.TNAFrontendCookies = window.TNAFrontendCookies || null;\nwindow.TNAFrontendCookieEvents = window.TNAFrontendCookieEvents || null;\n\nexport class CookieEventHandler {\n  events = {};\n  oneTimeEvents = {};\n\n  constructor() {\n    if (window.TNAFrontendCookieEvents) {\n      return window.TNAFrontendCookieEvents;\n    }\n    window.TNAFrontendCookieEvents = this;\n  }\n\n  /**\n   * Add an event listener.\n   * @param {String} event - The event to add a listener for.\n   * @param {Function} callback - The callback function to call when the event is triggered.\n   */\n  on(event, callback) {\n    if (!Object.hasOwn(this.events, event)) {\n      this.events[event] = [];\n    }\n    this.events[event] = [...this.events[event], callback];\n  }\n\n  once(event, callback) {\n    if (!Object.hasOwn(this.oneTimeEvents, event)) {\n      this.oneTimeEvents[event] = [];\n    }\n    this.oneTimeEvents[event] = [...this.oneTimeEvents[event], callback];\n  }\n\n  /** @protected */\n  trigger(event, data = {}) {\n    if (Object.hasOwn(this.events, event)) {\n      this.events[event].forEach((eventToTrigger) =>\n        eventToTrigger.call(this, data),\n      );\n    }\n    if (Object.hasOwn(this.oneTimeEvents, event)) {\n      for (let i = this.oneTimeEvents[event].length - 1; i >= 0; i--) {\n        const eventToTrigger = this.oneTimeEvents[event][i];\n        eventToTrigger.call(this, data);\n        this.oneTimeEvents[event].splice(i, 1);\n      }\n    }\n  }\n}\n\n/**\n * Class to handle cookies.\n * @class Cookies\n * @constructor\n * @public\n */\nexport default class Cookies {\n  /** @protected */\n  extraPolicies = [];\n  /** @protected */\n  domain = \"\";\n  /** @protected */\n  path = \"\";\n  /** @protected */\n  secure = true;\n  /** @protected */\n  policiesKey = \"\";\n  /** @protected */\n  events = null;\n\n  /**\n   * Create a cookie handler.\n   * @param {String} [options.extraPolicies=[]] - The extra cookie policies to manage in addition to essential, settings and usage.\n   * @param {String} [options.domain=\"\"] - The domain to register the cookie with.\n   * @param {String} [options.path=\"\"] - The domain to register the cookie with.\n   * @param {String} [options.secure=true] - Only set cookie in HTTPS environments.\n   * @param {String} [options.policiesKey=\"cookies_policy\"] - The name of the cookie.\n   * @param {String} [options.newInstance=false] - Create a fresh instance of the cookie class.\n   */\n  constructor(options = {}) {\n    const {\n      extraPolicies = [],\n      domain = \"\",\n      path = \"/\",\n      secure = true,\n      policiesKey = \"cookies_policy\",\n      newInstance = false,\n    } = options;\n    if (newInstance) {\n      this.destroyInstance();\n    } else if (window.TNAFrontendCookies) {\n      return window.TNAFrontendCookies;\n    }\n    this.extraPolicies = extraPolicies;\n    this.domain = domain;\n    this.path = path;\n    this.secure = secure;\n    this.policiesKey = policiesKey;\n    this.events = new CookieEventHandler();\n    this.init();\n    window.TNAFrontendCookies = this;\n  }\n\n  /** @protected */\n  init() {\n    this.savePolicies({\n      ...Object.fromEntries(\n        this.extraPolicies.map((k) => [k.toLowerCase(), false]),\n      ),\n      usage: false,\n      settings: false,\n      ...this.policies,\n      essential: true,\n    });\n  }\n\n  destroyInstance() {\n    window.TNAFrontendCookies = null;\n  }\n\n  /** @protected */\n  get all() {\n    const deserialised = {};\n    document.cookie\n      .split(\"; \")\n      .filter((x) => x)\n      .forEach((cookie) => {\n        const parts = cookie.trim().split(\"=\");\n        if (parts[0]) {\n          deserialised[parts[0]] = parts[1];\n        }\n      });\n    return deserialised;\n  }\n\n  /** @protected */\n  get policies() {\n    try {\n      return JSON.parse(this.get(this.policiesKey) || \"{}\");\n    } catch (e) {\n      return {};\n    }\n  }\n\n  /**\n   * Check to see whether a cookie exists or not.\n   * @param {String} key - The cookie name.\n   * @returns {Boolean}\n   */\n  exists(key) {\n    return Object.hasOwn(this.all, key);\n  }\n\n  /**\n   * Check to see whether a cookie has a particular value.\n   * @param {String} key - The cookie name.\n   * @param {String|Number|Boolean} value - The value to check against.\n   * @returns\n   */\n  hasValue(key, value) {\n    return this.get(key) == value;\n  }\n\n  /**\n   * Get a cookie.\n   * @param {String} key - The cookie name.\n   * @returns {String|Number|Boolean}\n   */\n  get(key) {\n    return this.exists(key) ? decodeURIComponent(this.all[key]) : null;\n  }\n\n  /**\n   * Set a cookie.\n   * @param {String} key - The cookie name.\n   * @param {String|Number|Boolean} value - The cookie value.\n   * @param {Object} options\n   * @param {Number} [options.maxAge=31536000] - The maximum age of the cookie in seconds.\n   * @param {String} [options.path=/] - The path to register the cookie for.\n   * @param {String} [options.sameSite=Lax] - The sameSite attribute.\n   * @param {String} [options.domain=this.domain] - The domain to register the cookie with.\n   * @param {String} [options.path=this.path] - The path to register the cookie with.\n   * @param {String} [options.secure=this.secure] - Only set cookie in HTTPS environments.\n   */\n  set(key, value, options = {}) {\n    const {\n      maxAge = 60 * 60 * 24 * 365,\n      sameSite = \"Lax\",\n      domain = this.domain,\n      path = this.path,\n      secure = this.secure,\n    } = options;\n    if (!key) {\n      return;\n    }\n    const cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};${\n      domain ? ` domain=${domain}; ` : \"\"\n    } samesite=${sameSite}; path=${path}; max-age=${maxAge}${\n      secure ? \"; secure\" : \"\"\n    }`;\n    document.cookie = cookie;\n    this.events.trigger(\"setCookie\", {\n      key,\n      value,\n      maxAge,\n      path,\n      sameSite,\n      domain,\n      secure,\n      cookie,\n    });\n  }\n\n  /**\n   * Delete a cookie.\n   * @param {String} key - The cookie name.\n   * @param {String} [path=/] - The path to the cookie is registered on.\n   */\n  delete(key, path = \"/\", domain = null) {\n    const options = { maxAge: -1, path, domain: domain || undefined };\n    this.set(key, \"\", options);\n    this.events.trigger(\"deleteCookie\", { key, ...options });\n  }\n\n  /**\n   * Delete all cookies.\n   */\n  deleteAll(path = \"/\", domain = null) {\n    Object.keys(this.all).forEach((cookie) => {\n      this.delete(cookie, path, domain);\n    });\n    this.events.trigger(\"deleteAllCookies\", { path, domain });\n  }\n\n  /**\n   * Accept a policy.\n   * @param {String} policy - The name of the policy.\n   */\n  acceptPolicy(policy) {\n    this.setPolicy(policy, true);\n    this.events.trigger(\"acceptPolicy\", policy);\n    this.events.trigger(\"changePolicy\", { [policy]: true });\n  }\n\n  /**\n   * Reject a policy.\n   * @param {String} policy - The name of the policy.\n   */\n  rejectPolicy(policy) {\n    this.setPolicy(policy, false);\n    this.events.trigger(\"rejectPolicy\", policy);\n    this.events.trigger(\"changePolicy\", { [policy]: false });\n  }\n\n  /**\n   * Set a policy.\n   * @param {String} policy - The name of the policy.\n   * @param {Boolean} accepted - Whether the policy is accepted or not.\n   */\n  setPolicy(policy, accepted) {\n    if (policy === \"essential\") {\n      return;\n    }\n    this.savePolicies({\n      ...this.policies,\n      [policy]: accepted,\n      essential: true,\n    });\n    this.events.trigger(\"changePolicy\", { [policy]: accepted });\n  }\n\n  /**\n   * Accept all the cookie policies.\n   */\n  acceptAllPolicies() {\n    const allPolicies = Object.fromEntries(\n      Object.keys(this.policies).map((k) => [k.toLowerCase(), true]),\n    );\n    this.savePolicies(allPolicies);\n    this.events.trigger(\"acceptAllPolicies\");\n    this.events.trigger(\"changePolicy\", allPolicies);\n  }\n\n  /**\n   * Reject all the cookie policies.\n   */\n  rejectAllPolicies() {\n    const allPolicies = {\n      ...Object.fromEntries(\n        Object.keys(this.policies).map((k) => [k.toLowerCase(), false]),\n      ),\n      essential: true,\n    };\n    this.savePolicies(allPolicies);\n    this.events.trigger(\"rejectAllPolicies\");\n    this.events.trigger(\"changePolicy\", allPolicies);\n  }\n\n  /**\n   * Commit policy preferences to the browser.\n   * @param {object} policies - The policies to commit.\n   */\n  savePolicies(policies) {\n    this.set(this.policiesKey, JSON.stringify(policies));\n  }\n\n  /**\n   * Get the acceptance status of a policy.\n   * @param {String} policy - The name of the policy.\n   * @returns {Boolean}\n   */\n  isPolicyAccepted(policy) {\n    return Object.hasOwn(this.policies, policy)\n      ? this.policies[policy] === true\n      : null;\n  }\n\n  /**\n   * Add an event listener.\n   * @param {String} event - The event to add a listener for.\n   * @param {Function} callback - The callback function to call when the event is triggered.\n   */\n  on(event, callback) {\n    this.events.on(event, callback);\n  }\n\n  /**\n   * Add a one-time event listener.\n   * @param {String} event - The event to add a listener for.\n   * @param {Function} callback - The callback function to call when the event is triggered.\n   */\n  once(event, callback) {\n    this.events.once(event, callback);\n  }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Cookies from \"../../lib/cookies.mjs\";\n\nexport class Footer {\n  constructor($module) {\n    this.$module = $module;\n    this.$themeSelector =\n      $module && $module.querySelector(\".tna-footer__theme-selector\");\n    this.$tnaTemplate = document.querySelector(\".tna-template\");\n\n    if (!this.$module || !this.$themeSelector || !this.$tnaTemplate) {\n      return;\n    }\n\n    this.$themeSelectorButtons = this.$themeSelector.querySelectorAll(\n      \"button.tna-footer__theme-selector-button[value]\",\n    );\n\n    Array.from(this.$themeSelectorButtons).forEach(($themeSelectorButton) => {\n      $themeSelectorButton.addEventListener(\"click\", (e) => {\n        const $button = e.target;\n        this.setTheme($button.value);\n        this.selectThemeSelectorButton($button);\n      });\n    });\n\n    this.cookies = new Cookies();\n    if (this.cookies.isPolicyAccepted(\"settings\")) {\n      this.showThemeSelector();\n    }\n    this.cookies.on(\"changePolicy\", (data) => {\n      if (Object.hasOwn(data, \"settings\")) {\n        if (data.settings === true) {\n          this.showThemeSelector();\n        } else {\n          this.cookies.delete(\"theme\");\n          this.hideThemeSelector();\n        }\n      }\n    });\n  }\n\n  showThemeSelector() {\n    this.$themeSelector.removeAttribute(\"hidden\");\n    if (this.cookies.exists(\"theme\")) {\n      const $currentThemeButton = Array.from(this.$themeSelectorButtons).find(\n        ($button) => $button.value === this.cookies.get(\"theme\"),\n      );\n      if ($currentThemeButton) {\n        this.selectThemeSelectorButton($currentThemeButton);\n      }\n    }\n  }\n\n  hideThemeSelector() {\n    this.$themeSelector.setAttribute(\"hidden\", true);\n  }\n\n  setTheme(theme) {\n    if (theme === \"light\") {\n      this.$tnaTemplate.classList.remove(\n        \"tna-template--system-theme\",\n        \"tna-template--dark-theme\",\n      );\n    } else if (theme === \"dark\") {\n      this.$tnaTemplate.classList.remove(\"tna-template--system-theme\");\n      this.$tnaTemplate.classList.add(`tna-template--dark-theme`);\n    } else if (theme === \"system\") {\n      this.$tnaTemplate.classList.remove(\"tna-template--dark-theme\");\n      this.$tnaTemplate.classList.add(`tna-template--system-theme`);\n    } else {\n      return;\n    }\n    this.cookies.set(\"theme\", theme);\n  }\n\n  selectThemeSelectorButton($selectedButton) {\n    Array.from(this.$themeSelectorButtons).forEach(($button) => {\n      if ($button.value === $selectedButton.value) {\n        $button.classList.remove(\"tna-button--plain\");\n        $button.setAttribute(\"aria-current\", true);\n      } else {\n        $button.classList.add(\"tna-button--plain\");\n        $button.removeAttribute(\"aria-current\");\n      }\n    });\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","window","TNAFrontendCookies","TNAFrontendCookieEvents","CookieEventHandler","_createClass","_classCallCheck","_defineProperty","this","key","value","event","callback","Object","hasOwn","events","concat","_toConsumableArray","oneTimeEvents","_this","data","arguments","length","undefined","forEach","eventToTrigger","call","i","splice","Cookies","options","_options$extraPolicie","extraPolicies","_options$domain","domain","_options$path","path","_options$secure","secure","_options$policiesKey","policiesKey","_options$newInstance","newInstance","destroyInstance","init","savePolicies","_objectSpread","fromEntries","map","k","toLowerCase","usage","settings","policies","essential","get","deserialised","document","cookie","split","filter","x","parts","trim","JSON","parse","e","all","exists","decodeURIComponent","_options$maxAge","maxAge","_options$sameSite","sameSite","_options$domain2","_options$path2","_options$secure2","encodeURIComponent","trigger","set","_this2","keys","policy","setPolicy","accepted","allPolicies","stringify","on","once","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__","d","definition","o","defineProperty","enumerable","obj","prop","prototype","hasOwnProperty","r","Symbol","toStringTag","Footer","$module","$themeSelector","querySelector","$tnaTemplate","$themeSelectorButtons","querySelectorAll","Array","from","$themeSelectorButton","addEventListener","$button","target","setTheme","selectThemeSelectorButton","cookies","isPolicyAccepted","showThemeSelector","hideThemeSelector","removeAttribute","$currentThemeButton","find","setAttribute","theme","classList","remove","add","$selectedButton"],"sourceRoot":""}
+{"version":3,"file":"components/footer/footer.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/cookies.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/footer/footer.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","window.TNAFrontendCookies = window.TNAFrontendCookies || null;\nwindow.TNAFrontendCookieEvents = window.TNAFrontendCookieEvents || null;\n\nexport class CookieEventHandler {\n  events = {};\n  oneTimeEvents = {};\n\n  constructor() {\n    if (window.TNAFrontendCookieEvents) {\n      return window.TNAFrontendCookieEvents;\n    }\n    window.TNAFrontendCookieEvents = this;\n  }\n\n  /**\n   * Add an event listener.\n   * @param {String} event - The event to add a listener for.\n   * @param {Function} callback - The callback function to call when the event is triggered.\n   */\n  on(event, callback) {\n    if (!Object.hasOwn(this.events, event)) {\n      this.events[event] = [];\n    }\n    this.events[event] = [...this.events[event], callback];\n  }\n\n  once(event, callback) {\n    if (!Object.hasOwn(this.oneTimeEvents, event)) {\n      this.oneTimeEvents[event] = [];\n    }\n    this.oneTimeEvents[event] = [...this.oneTimeEvents[event], callback];\n  }\n\n  /** @protected */\n  trigger(event, data = {}) {\n    if (Object.hasOwn(this.events, event)) {\n      this.events[event].forEach((eventToTrigger) =>\n        eventToTrigger.call(this, data),\n      );\n    }\n    if (Object.hasOwn(this.oneTimeEvents, event)) {\n      for (let i = this.oneTimeEvents[event].length - 1; i >= 0; i--) {\n        const eventToTrigger = this.oneTimeEvents[event][i];\n        eventToTrigger.call(this, data);\n        this.oneTimeEvents[event].splice(i, 1);\n      }\n    }\n  }\n}\n\n/**\n * Class to handle cookies.\n * @class Cookies\n * @constructor\n * @public\n */\nexport default class Cookies {\n  /** @protected */\n  extraPolicies = [];\n  /** @protected */\n  domain = \"\";\n  /** @protected */\n  path = \"\";\n  /** @protected */\n  secure = true;\n  /** @protected */\n  policiesKey = \"\";\n  /** @protected */\n  events = null;\n  /** @protected */\n  defaultAge = null;\n\n  /**\n   * Create a cookie handler.\n   * @param {String} [options.extraPolicies=[]] - The extra cookie policies to manage in addition to essential, settings and usage.\n   * @param {String} [options.domain=\"\"] - The domain to register the cookie with.\n   * @param {String} [options.path=\"\"] - The domain to register the cookie with.\n   * @param {String} [options.secure=true] - Only set cookie in HTTPS environments.\n   * @param {String} [options.policiesKey=\"cookies_policy\"] - The name of the cookie.\n   * @param {String} [options.newInstance=false] - Create a fresh instance of the cookie class.\n   * @param {String} [options.defaultAge=31536000] - The default age of non-session cookies.\n   */\n  constructor(options = {}) {\n    const {\n      extraPolicies = [],\n      domain = \"\",\n      path = \"/\",\n      secure = true,\n      policiesKey = \"cookies_policy\",\n      newInstance = false,\n      defaultAge = 31536000, // 365 days\n    } = options;\n    if (newInstance) {\n      this.destroyInstance();\n    } else if (window.TNAFrontendCookies) {\n      return window.TNAFrontendCookies;\n    }\n    this.extraPolicies = extraPolicies;\n    this.domain = domain;\n    this.path = path;\n    this.secure = secure;\n    this.policiesKey = policiesKey;\n    this.defaultAge = defaultAge;\n    this.events = new CookieEventHandler();\n    this.init();\n    window.TNAFrontendCookies = this;\n  }\n\n  /** @protected */\n  init() {\n    this.savePolicies({\n      ...Object.fromEntries(\n        this.extraPolicies.map((k) => [k.toLowerCase(), false]),\n      ),\n      usage: false,\n      settings: false,\n      ...this.policies,\n      essential: true,\n    });\n  }\n\n  destroyInstance() {\n    window.TNAFrontendCookies = null;\n  }\n\n  /** @protected */\n  get all() {\n    const deserialised = {};\n    document.cookie\n      .split(\"; \")\n      .filter((x) => x)\n      .forEach((cookie) => {\n        const parts = cookie.trim().split(\"=\");\n        if (parts[0]) {\n          deserialised[parts[0]] = parts[1];\n        }\n      });\n    return deserialised;\n  }\n\n  /** @protected */\n  get policies() {\n    try {\n      return JSON.parse(this.get(this.policiesKey) || \"{}\");\n    } catch (e) {\n      return {};\n    }\n  }\n\n  /**\n   * Check to see whether a cookie exists or not.\n   * @param {String} key - The cookie name.\n   * @returns {Boolean}\n   */\n  exists(key) {\n    return Object.hasOwn(this.all, key);\n  }\n\n  /**\n   * Check to see whether a cookie has a particular value.\n   * @param {String} key - The cookie name.\n   * @param {String|Number|Boolean} value - The value to check against.\n   * @returns\n   */\n  hasValue(key, value) {\n    return this.get(key) == value;\n  }\n\n  /**\n   * Get a cookie.\n   * @param {String} key - The cookie name.\n   * @returns {String|Number|Boolean}\n   */\n  get(key) {\n    return this.exists(key) ? decodeURIComponent(this.all[key]) : null;\n  }\n\n  /**\n   * Set a cookie.\n   * @param {String} key - The cookie name.\n   * @param {String|Number|Boolean} value - The cookie value.\n   * @param {Object} options\n   * @param {Number} [options.maxAge=this.defaultAge] - The maximum age of the cookie in seconds.\n   * @param {String} [options.path=/] - The path to register the cookie for.\n   * @param {String} [options.sameSite=Lax] - The sameSite attribute.\n   * @param {String} [options.domain=this.domain] - The domain to register the cookie with.\n   * @param {String} [options.path=this.path] - The path to register the cookie with.\n   * @param {String} [options.secure=this.secure] - Only set cookie in HTTPS environments.\n   * @param {String} [options.session=false] - Set a session cookie.\n   */\n  set(key, value, options = {}) {\n    const {\n      maxAge = this.defaultAge,\n      sameSite = \"Lax\",\n      domain = this.domain,\n      path = this.path,\n      secure = this.secure,\n      session = false,\n    } = options;\n    if (!key) {\n      return;\n    }\n    const cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};${\n      domain ? ` domain=${domain}; ` : \"\"\n    } samesite=${sameSite}; path=${path}${!session ? `; max-age=${maxAge}` : \"\"}${\n      secure ? \"; secure\" : \"\"\n    }`;\n    document.cookie = cookie;\n    this.events.trigger(\"setCookie\", {\n      key,\n      value,\n      maxAge,\n      path,\n      sameSite,\n      domain,\n      secure,\n      session,\n      cookie,\n    });\n  }\n\n  /**\n   * Delete a cookie.\n   * @param {String} key - The cookie name.\n   * @param {String} [path=/] - The path to the cookie is registered on.\n   */\n  delete(key, path = \"/\", domain = null) {\n    const options = { maxAge: -1, path, domain: domain || undefined };\n    this.set(key, \"\", options);\n    this.events.trigger(\"deleteCookie\", { key, ...options });\n  }\n\n  /**\n   * Delete all cookies.\n   */\n  deleteAll(path = \"/\", domain = null) {\n    Object.keys(this.all).forEach((cookie) => {\n      this.delete(cookie, path, domain);\n    });\n    this.events.trigger(\"deleteAllCookies\", { path, domain });\n  }\n\n  /**\n   * Accept a policy.\n   * @param {String} policy - The name of the policy.\n   */\n  acceptPolicy(policy) {\n    this.setPolicy(policy, true);\n    this.events.trigger(\"acceptPolicy\", policy);\n    this.events.trigger(\"changePolicy\", { [policy]: true });\n  }\n\n  /**\n   * Reject a policy.\n   * @param {String} policy - The name of the policy.\n   */\n  rejectPolicy(policy) {\n    this.setPolicy(policy, false);\n    this.events.trigger(\"rejectPolicy\", policy);\n    this.events.trigger(\"changePolicy\", { [policy]: false });\n  }\n\n  /**\n   * Set a policy.\n   * @param {String} policy - The name of the policy.\n   * @param {Boolean} accepted - Whether the policy is accepted or not.\n   */\n  setPolicy(policy, accepted) {\n    if (policy === \"essential\") {\n      return;\n    }\n    this.savePolicies({\n      ...this.policies,\n      [policy]: accepted,\n      essential: true,\n    });\n    this.events.trigger(\"changePolicy\", { [policy]: accepted });\n  }\n\n  /**\n   * Accept all the cookie policies.\n   */\n  acceptAllPolicies() {\n    const allPolicies = Object.fromEntries(\n      Object.keys(this.policies).map((k) => [k.toLowerCase(), true]),\n    );\n    this.savePolicies(allPolicies);\n    this.events.trigger(\"acceptAllPolicies\");\n    this.events.trigger(\"changePolicy\", allPolicies);\n  }\n\n  /**\n   * Reject all the cookie policies.\n   */\n  rejectAllPolicies() {\n    const allPolicies = {\n      ...Object.fromEntries(\n        Object.keys(this.policies).map((k) => [k.toLowerCase(), false]),\n      ),\n      essential: true,\n    };\n    this.savePolicies(allPolicies);\n    this.events.trigger(\"rejectAllPolicies\");\n    this.events.trigger(\"changePolicy\", allPolicies);\n  }\n\n  /**\n   * Commit policy preferences to the browser.\n   * @param {object} policies - The policies to commit.\n   */\n  savePolicies(policies) {\n    this.set(this.policiesKey, JSON.stringify(policies), {\n      maxAge: 60 * 60 * 24 * 365,\n    });\n  }\n\n  /**\n   * Get the acceptance status of a policy.\n   * @param {String} policy - The name of the policy.\n   * @returns {Boolean}\n   */\n  isPolicyAccepted(policy) {\n    return Object.hasOwn(this.policies, policy)\n      ? this.policies[policy] === true\n      : null;\n  }\n\n  /**\n   * Add an event listener.\n   * @param {String} event - The event to add a listener for.\n   * @param {Function} callback - The callback function to call when the event is triggered.\n   */\n  on(event, callback) {\n    this.events.on(event, callback);\n  }\n\n  /**\n   * Add a one-time event listener.\n   * @param {String} event - The event to add a listener for.\n   * @param {Function} callback - The callback function to call when the event is triggered.\n   */\n  once(event, callback) {\n    this.events.once(event, callback);\n  }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Cookies from \"../../lib/cookies.mjs\";\n\nexport class Footer {\n  constructor($module) {\n    this.$module = $module;\n    this.$themeSelector =\n      $module && $module.querySelector(\".tna-footer__theme-selector\");\n    this.$tnaTemplate = document.querySelector(\".tna-template\");\n\n    if (!this.$module || !this.$themeSelector || !this.$tnaTemplate) {\n      return;\n    }\n\n    this.$themeSelectorButtons = this.$themeSelector.querySelectorAll(\n      \"button.tna-footer__theme-selector-button[value]\",\n    );\n\n    Array.from(this.$themeSelectorButtons).forEach(($themeSelectorButton) => {\n      $themeSelectorButton.addEventListener(\"click\", (e) => {\n        const $button = e.target;\n        this.setTheme($button.value);\n        this.selectThemeSelectorButton($button);\n      });\n    });\n\n    this.cookies = new Cookies();\n    if (this.cookies.isPolicyAccepted(\"settings\")) {\n      this.showThemeSelector();\n    }\n    this.cookies.on(\"changePolicy\", (data) => {\n      if (Object.hasOwn(data, \"settings\")) {\n        if (data.settings === true) {\n          this.showThemeSelector();\n        } else {\n          this.cookies.delete(\"theme\");\n          this.hideThemeSelector();\n        }\n      }\n    });\n  }\n\n  showThemeSelector() {\n    this.$themeSelector.removeAttribute(\"hidden\");\n    if (this.cookies.exists(\"theme\")) {\n      const $currentThemeButton = Array.from(this.$themeSelectorButtons).find(\n        ($button) => $button.value === this.cookies.get(\"theme\"),\n      );\n      if ($currentThemeButton) {\n        this.selectThemeSelectorButton($currentThemeButton);\n      }\n    }\n  }\n\n  hideThemeSelector() {\n    this.$themeSelector.setAttribute(\"hidden\", true);\n  }\n\n  setTheme(theme) {\n    if (theme === \"light\") {\n      this.$tnaTemplate.classList.remove(\n        \"tna-template--system-theme\",\n        \"tna-template--dark-theme\",\n      );\n    } else if (theme === \"dark\") {\n      this.$tnaTemplate.classList.remove(\"tna-template--system-theme\");\n      this.$tnaTemplate.classList.add(`tna-template--dark-theme`);\n    } else if (theme === \"system\") {\n      this.$tnaTemplate.classList.remove(\"tna-template--dark-theme\");\n      this.$tnaTemplate.classList.add(`tna-template--system-theme`);\n    } else {\n      return;\n    }\n    this.cookies.set(\"theme\", theme);\n  }\n\n  selectThemeSelectorButton($selectedButton) {\n    Array.from(this.$themeSelectorButtons).forEach(($button) => {\n      if ($button.value === $selectedButton.value) {\n        $button.classList.remove(\"tna-button--plain\");\n        $button.setAttribute(\"aria-current\", true);\n      } else {\n        $button.classList.add(\"tna-button--plain\");\n        $button.removeAttribute(\"aria-current\");\n      }\n    });\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","window","TNAFrontendCookies","TNAFrontendCookieEvents","CookieEventHandler","_createClass","_classCallCheck","_defineProperty","this","key","value","event","callback","Object","hasOwn","events","concat","_toConsumableArray","oneTimeEvents","_this","data","arguments","length","undefined","forEach","eventToTrigger","call","i","splice","Cookies","options","_options$extraPolicie","extraPolicies","_options$domain","domain","_options$path","path","_options$secure","secure","_options$policiesKey","policiesKey","_options$newInstance","newInstance","_options$defaultAge","defaultAge","destroyInstance","init","savePolicies","_objectSpread","fromEntries","map","k","toLowerCase","usage","settings","policies","essential","get","deserialised","document","cookie","split","filter","x","parts","trim","JSON","parse","e","all","exists","decodeURIComponent","_options$maxAge","maxAge","_options$sameSite","sameSite","_options$domain2","_options$path2","_options$secure2","_options$session","session","encodeURIComponent","trigger","set","_this2","keys","policy","setPolicy","accepted","allPolicies","stringify","on","once","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__","d","definition","o","defineProperty","enumerable","obj","prop","prototype","hasOwnProperty","r","Symbol","toStringTag","Footer","$module","$themeSelector","querySelector","$tnaTemplate","$themeSelectorButtons","querySelectorAll","Array","from","$themeSelectorButton","addEventListener","$button","target","setTheme","selectThemeSelectorButton","cookies","isPolicyAccepted","showThemeSelector","hideThemeSelector","removeAttribute","$currentThemeButton","find","setAttribute","theme","classList","remove","add","$selectedButton"],"sourceRoot":""}

package/nationalarchives/components/gallery/analytics.js

@@ -15,8 +15,7 @@ export default [
       },
       {
         eventName: "click",
-        targetElement:
-          ".tna-gallery__navigation-button tna-gallery__navigation-prev",
+        targetElement: ".tna-gallery__navigation-prev",
         on: "click",
         data: {
           value: ($el, $scope) =>
@@ -27,8 +26,7 @@ export default [
       },
       {
         eventName: "click",
-        targetElement:
-          ".tna-gallery__navigation-button tna-gallery__navigation-next",
+        targetElement: ".tna-gallery__navigation-next",
         on: "click",
         data: {
           value: ($el, $scope) =>
@@ -38,26 +36,24 @@ export default [
         },
       },
       {
-        eventName: "key press",
+        eventName: "keypress",
         on: "keydown",
         data: {
           value: ($el, $scope, event) => event.key,
         },
       },
       {
-        eventName: "click",
+        eventName: "enter-fullscreen",
         targetElement: '.tna-gallery__options button[value="enter-fullscreen"]',
         on: "click",
-        data: { state: "enter" },
       },
       {
-        eventName: "click",
+        eventName: "exit-fullscreen",
         targetElement: '.tna-gallery__options button[value="exit-fullscreen"]',
         on: "click",
-        data: { state: "exit" },
       },
       {
-        eventName: "click",
+        eventName: "index",
         targetElement: '.tna-gallery__options button[value="show-index"]',
         on: "click",
       },

package/nationalarchives/components/gallery/gallery.css

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

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/gallery/gallery.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/variables/_a11y.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAyLA,8DACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAjJA,4CAJA,gCA6LF,6CACE,qCA1LA,4CAJA,gCAyMF,kDACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCACA,yCACA,qDACA,qDACA,iEApNA,4CAJA,gCC5CF,aACE,aACA,kDACA,WAIA,mBAEA,oBCEA,eChBqB,IFkBrB,qBACE,aAEA,gBACA,WAEA,aACA,SAGF,2BACE,OAGF,sBACE,aAEA,sBACA,qBACA,2BAEA,kCACE,mBAIJ,qDAEE,gBACA,WAGF,oBACE,kBACA,UAEA,mBAEA,iDACE,aAIJ,mBACE,aACA,sBACA,oBACA,uBAGF,0BACE,aAEA,cACA,kBGlDF,YCYsB,ID7BtB,eHyEA,0BACE,aACA,sBACA,oBACA,SAGF,gCACE,WAEA,kBAKF,yBACE,cAGF,+BACE,mBACA,iBAEA,sBDhCE,mDCqCJ,iCACE,WACA,gBACA,iBAEA,kBACA,SACA,UAEA,oBAEA,wDACE,aAIJ,gCACE,UACA,UAEA,kBACA,MACA,SAEA,YAEA,UAEA,eACA,oBAIA,4EAEE,UAIJ,8BACE,kBAEA,OAEA,gFAOF,8BACE,iBAEA,QAEA,iFAOF,sCACE,WACA,YAEA,qBAEA,YD1GE,0GC+GF,yBAGF,oEACE,0BAGF,oEACE,wBAGF,uGAEE,aAGF,yBACE,aAEA,gBACA,WAEA,aACA,qCACA,2BACA,SAEA,cAGF,8BACE,YACA,aACA,eAEA,kBAEA,YAEA,eAKE,2CACE,WAEA,kBACA,QACA,UDtJF,0DC+JA,yDACE,WAEA,kBACA,QACA,UD5EJ,8BCmFF,oCACE,WACA,YAEA,kBACA,QACA,iBAGF,oCACE,iBAEA,qBAEA,kBACA,MACA,OACA,UAEA,0BD5NF,qCI5CA,iBAiBA,YCYsB,ILmBtB,4CCiOA,0BACE,kBAGF,0DACE,gBACA,iBAGF,mDACE,WACA,YAEA,kBACA,QACA,UACA,mBKzPF,kDL6PE,yBACE,sCK1NJ,wBL+NE,sBACE,2BACA,uBAGF,yBACE,sCK7PJ,wBLkQE,oCGtTF,oBH2TA,mDACE,aAGF,8CACE,OAEA,mBACA,uBACA,yBAEA,4EACE,aAIJ,uDACE,kBAEA,cAGF,4BACE,6CACE,gBAGF,qGAEE,gBACA,aAGF,2CACE,YAGF,kDACE,OAGF,iHAEE,gBACA,OAEA,kBAGF,iDACE,cACA,eAEA,gBACA,aAEA,qCACA","file":"gallery.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline-dark\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"accent-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid\n    );\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width\n      #{brand-colour($brandColour)}\n      solid;\n  } @else {\n    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  @include colour-css-vars(\"form-error-border\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error-border\");\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  --accent-list-marker: var(--accent-border);\n  // --accent-list-marker: var(--font-base);\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    --accent-list-marker: var(--accent-border);\n    // --accent-list-marker: var(--font-base);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n  --accent-list-marker: var(--accent-font-base);\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(--font-base);\n  --accent-list-marker: var(--font-base);\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  }\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}\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-list-marker: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"grey\")} !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  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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","@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-gallery {\n  display: grid;\n  grid-template: min-content min-content 1fr / 2fr 1fr;\n  gap: 0 spacing.space(1);\n\n  @include colour.tint;\n\n  border-radius: 0.1px;\n\n  &:active {\n    @include a11y.no-active-outline;\n  }\n\n  &__header {\n    padding: spacing.space(1);\n\n    grid-column: 1 / 3;\n    grid-row: 1;\n\n    display: flex;\n    gap: spacing.space(2);\n  }\n\n  &__header-inner {\n    flex: 1;\n  }\n\n  &__options {\n    margin-top: 0;\n\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: flex-start;\n\n    .tna-button {\n      white-space: nowrap;\n    }\n  }\n\n  &__items,\n  &__navigation-buttons {\n    grid-column: 1 / 3;\n    grid-row: 2;\n  }\n\n  &__items {\n    position: relative;\n    z-index: 1;\n\n    border-radius: 0.1px;\n\n    .tna-template--clicked &:focus {\n      outline: none;\n    }\n  }\n\n  &__item {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: center;\n  }\n\n  &__item-header {\n    padding: spacing.space(1);\n\n    line-height: 1;\n    text-align: center;\n\n    @include typography.main-font-weight-bold;\n    @include typography.font-size(16);\n  }\n\n  &__item-figure {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    gap: spacing.space(1);\n  }\n\n  &__item-figure-inner {\n    width: 100%;\n\n    position: relative;\n\n    @include colour.contrast;\n  }\n\n  &__item-image {\n    margin: 0 auto;\n  }\n\n  &__item-description {\n    margin: 0 spacing.space(1) spacing.space(1);\n    padding: spacing.space(0.5) spacing.space(1);\n\n    align-self: flex-start;\n\n    @include colour.thick-keyline-dark(left);\n  }\n\n  &__navigation-buttons {\n    width: 100%;\n    max-height: 50vh;\n    aspect-ratio: 3 / 2;\n\n    position: relative;\n    top: 3rem;\n    z-index: 2;\n\n    pointer-events: none;\n\n    .tna-template--touched & {\n      display: none;\n    }\n  }\n\n  &__navigation-button {\n    width: 25%;\n    padding: 0;\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n\n    border: none;\n\n    opacity: 0;\n\n    cursor: pointer;\n    pointer-events: auto;\n\n    @include colour.tint;\n\n    &:hover,\n    &:focus {\n      opacity: 1;\n    }\n  }\n\n  &__navigation-prev {\n    padding-right: 10%;\n\n    left: 0;\n\n    background: linear-gradient(\n      90deg,\n      var(--background) 15%,\n      rgb(0 0 0 / 0%) 100%\n    );\n  }\n\n  &__navigation-next {\n    padding-left: 10%;\n\n    right: 0;\n\n    background: linear-gradient(\n      270deg,\n      var(--background) 15%,\n      rgb(0 0 0 / 0%) 100%\n    );\n  }\n\n  &__navigation-button-label {\n    width: 1rem;\n    height: 1rem;\n\n    display: inline-block;\n\n    font-size: 0;\n\n    @include colour.colour-border(\"font-dark\", 4px, solid, top);\n    @include colour.colour-border(\"font-dark\", 4px, solid, right);\n\n    transform-origin: 50% 50%;\n  }\n\n  &__navigation-prev &__navigation-button-label {\n    transform: rotate(-135deg);\n  }\n\n  &__navigation-next &__navigation-button-label {\n    transform: rotate(45deg);\n  }\n\n  &__items[tabindex=\"-1\"],\n  &__items[tabindex=\"-1\"] + &__navigation-buttons {\n    display: none;\n  }\n\n  &__navigation {\n    padding: spacing.space(1);\n\n    grid-column: 1 / 3;\n    grid-row: 3;\n\n    display: grid;\n    grid-template-columns: repeat(6, 1fr);\n    grid-auto-rows: min-content;\n    gap: spacing.space(1);\n\n    overflow: auto;\n  }\n\n  &__navigation-item {\n    min-width: 0;\n    min-height: 0;\n    aspect-ratio: 1;\n\n    position: relative;\n\n    border: none;\n\n    cursor: pointer;\n\n    @include colour.contrast;\n\n    &:hover {\n      &::after {\n        content: \"\";\n\n        position: absolute;\n        inset: 0;\n        z-index: 2;\n\n        @include colour.thick-keyline-accent;\n      }\n    }\n\n    &[aria-selected=\"true\"] {\n      @include colour.accent;\n\n      &::after {\n        content: \"\";\n\n        position: absolute;\n        inset: 0;\n        z-index: 2;\n\n        @include colour.thick-keyline-brand(\"\", \"black\");\n      }\n    }\n  }\n\n  &__navigation-item-image {\n    width: 100%;\n    height: 100%;\n\n    position: absolute;\n    inset: 0;\n    object-fit: cover;\n  }\n\n  &__navigation-item-label {\n    padding: spacing.space(0.25) spacing.space(0.75);\n\n    display: inline-block;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 4;\n\n    text-transform: capitalize;\n\n    @include colour.colour-font(\"font-dark\");\n    @include typography.font-size(24);\n    @include typography.main-font-weight-bold;\n\n    @include colour.colour-background(\"background\");\n  }\n\n  &--interactive {\n    max-height: 175dvh;\n  }\n\n  &--interactive &__item-figure-inner {\n    max-height: 50vh;\n    aspect-ratio: 3 / 2;\n  }\n\n  &--interactive &__item-image {\n    width: 100%;\n    height: 100%;\n\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    object-fit: contain;\n  }\n\n  @include media.on-medium {\n    &__navigation {\n      grid-template-columns: repeat(4, 1fr);\n    }\n  }\n\n  @include media.on-mobile {\n    &__options {\n      flex-direction: row-reverse;\n      align-items: flex-start;\n    }\n\n    &__navigation {\n      grid-template-columns: repeat(3, 1fr);\n    }\n  }\n\n  @include media.on-tiny {\n    &__navigation-item-label {\n      @include typography.font-size(18);\n    }\n  }\n\n  &:fullscreen &__header-inner {\n    display: none;\n  }\n\n  &:fullscreen &__options {\n    flex: 1;\n\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: flex-end;\n\n    .tna-button[value=\"show-index\"] {\n      display: none;\n    }\n  }\n\n  &:fullscreen &__item-description {\n    max-height: 4.5rem;\n\n    overflow: auto;\n  }\n\n  @media (aspect-ratio >= 1/1) {\n    &:fullscreen &__header {\n      grid-column: 2 / 3;\n    }\n\n    &:fullscreen &__items,\n    &:fullscreen &__navigation-buttons {\n      grid-column: 1 / 2;\n      grid-row: 1 / 4;\n    }\n\n    &:fullscreen &__item {\n      height: 100%;\n    }\n\n    &:fullscreen &__item-figure {\n      flex: 1;\n    }\n\n    &:fullscreen &__item-figure-inner,\n    &:fullscreen &__navigation-buttons {\n      max-height: none;\n      flex: 1;\n\n      aspect-ratio: auto;\n    }\n\n    &:fullscreen &__navigation {\n      padding-top: 0;\n      padding-left: 0;\n\n      grid-column: 2 / 3;\n      grid-row: 2 / 4;\n\n      grid-template-columns: repeat(3, 1fr);\n      gap: spacing.space(0.5);\n    }\n  }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin focus-outline {\n  @include colour.colour-outline(\n    \"focus-outline\",\n    a11y.$focus-outline-width,\n    solid\n  );\n  outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n  outline-offset: 0;\n}\n\n@mixin no-active-outline {\n  outline-offset: a11y.$focus-outline-offset;\n}\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n$focus-outline-padding: $focus-outline-width + $focus-outline-offset;\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  font-variation-settings: \"wdth\" 100;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n","/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n  #{$main-font-family-name},\n  sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n  #{$heading-font-family-name},\n  \"Arial Narrow\",\n  sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n  #{$detail-font-family-name},\n  monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/gallery/gallery.scss","../../../../src/nationalarchives/variables/_a11y.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAyLA,8DACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAjJA,4CAJA,gCA6LF,6CACE,qCA1LA,4CAJA,gCAyMF,kDACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCACA,yCACA,qDACA,qDACA,iEApNA,4CAJA,gCCxCF,aACE,gBAEA,yBACE,aCRJ,aAGE,aACA,kDACA,WAIA,mBAEA,mCChBqB,IDoBrB,qBACE,aAEA,gBACA,WAEA,aACA,SAGF,2BACE,OAGF,sBACE,aAEA,sBACA,qBACA,2BAEA,kCACE,mBAIJ,qDAEE,gBACA,WAGF,oBACE,kBACA,UAEA,mBAEA,iDACE,aAIJ,mBACE,aACA,sBACA,oBACA,uBAGF,0BACE,aAEA,cACA,kBEpDF,YCYsB,ID7BtB,eF2EA,0BACE,aACA,sBACA,oBACA,SAGF,gCACE,WAEA,kBAKF,yBACE,cAGF,+BACE,mBACA,iBAEA,sBFlCE,mDEuCJ,iCACE,WACA,gBACA,iBAEA,kBACA,SACA,UAEA,oBAEA,wDACE,aAIJ,gCACE,UACA,UAEA,kBACA,MACA,SAEA,YAEA,UAEA,eACA,oBAIA,4EAEE,UAIJ,8BACE,kBAEA,OAEA,gFAOF,8BACE,iBAEA,QAEA,iFAOF,sCACE,WACA,YAEA,qBAEA,YF5GE,0GEiHF,yBAGF,oEACE,0BAGF,oEACE,wBAGF,uGAEE,aAGF,yBACE,aAEA,gBACA,WAEA,aACA,qCACA,2BACA,SAEA,cAGF,8BACE,YACA,aACA,eAEA,kBAEA,YAEA,eAKE,2CACE,WAEA,kBACA,QACA,UFxJF,0DEiKA,yDACE,WAEA,kBACA,QACA,UF9EJ,8BEqFF,oCACE,WACA,YAEA,kBACA,QACA,iBAGF,oCACE,iBAEA,qBAEA,kBACA,MACA,OACA,UAEA,0BF9NF,qCI5CA,iBAiBA,YCYsB,ILmBtB,4CEmOA,0BACE,kBAGF,0DACE,gBACA,iBAGF,mDACE,WACA,YAEA,kBACA,QACA,UACA,mBI3PF,kDJ+PE,yBACE,sCI5NJ,wBJiOE,sBACE,2BACA,uBAGF,yBACE,sCI/PJ,wBJoQE,oCExTF,oBF6TA,mDACE,aAGF,8CACE,OAEA,mBACA,uBACA,yBAEA,4EACE,aAIJ,uDACE,kBAEA,cAGF,4BACE,6CACE,gBAGF,qGAEE,gBACA,aAGF,2CACE,YAGF,kDACE,OAGF,iHAEE,gBACA,OAEA,kBAGF,iDACE,cACA,eAEA,gBACA,aAEA,qCACA","file":"gallery.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline-dark\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"accent-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid\n    );\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width\n      #{brand-colour($brandColour)}\n      solid;\n  } @else {\n    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  @include colour-css-vars(\"form-error-border\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error-border\");\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  --accent-list-marker: var(--accent-border);\n  // --accent-list-marker: var(--font-base);\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    --accent-list-marker: var(--accent-border);\n    // --accent-list-marker: var(--font-base);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n  --accent-list-marker: var(--accent-font-base);\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(--font-base);\n  --accent-list-marker: var(--font-base);\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  }\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}\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-list-marker: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"grey\")} !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  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n  @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n  margin-top: space(2);\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n%space-only-above {\n  margin: #{space(2)} 0 0;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above($zero-other-margins: false) {\n  @if $zero-other-margins {\n    @extend %space-only-above;\n  } @else {\n    @extend %space-above;\n  }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{space($amount)} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{space($amount)} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-gallery {\n  @include spacing.space-above;\n\n  display: grid;\n  grid-template: min-content min-content 1fr / 2fr 1fr;\n  gap: 0 spacing.space(1);\n\n  @include colour.tint;\n\n  border-radius: 0.1px;\n\n  &:active {\n    @include a11y.no-active-outline;\n  }\n\n  &__header {\n    padding: spacing.space(1);\n\n    grid-column: 1 / 3;\n    grid-row: 1;\n\n    display: flex;\n    gap: spacing.space(2);\n  }\n\n  &__header-inner {\n    flex: 1;\n  }\n\n  &__options {\n    margin-top: 0;\n\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: flex-start;\n\n    .tna-button {\n      white-space: nowrap;\n    }\n  }\n\n  &__items,\n  &__navigation-buttons {\n    grid-column: 1 / 3;\n    grid-row: 2;\n  }\n\n  &__items {\n    position: relative;\n    z-index: 1;\n\n    border-radius: 0.1px;\n\n    .tna-template--clicked &:focus {\n      outline: none;\n    }\n  }\n\n  &__item {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: center;\n  }\n\n  &__item-header {\n    padding: spacing.space(1);\n\n    line-height: 1;\n    text-align: center;\n\n    @include typography.main-font-weight-bold;\n    @include typography.font-size(16);\n  }\n\n  &__item-figure {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    gap: spacing.space(1);\n  }\n\n  &__item-figure-inner {\n    width: 100%;\n\n    position: relative;\n\n    @include colour.contrast;\n  }\n\n  &__item-image {\n    margin: 0 auto;\n  }\n\n  &__item-description {\n    margin: 0 spacing.space(1) spacing.space(1);\n    padding: spacing.space(0.5) spacing.space(1);\n\n    align-self: flex-start;\n\n    @include colour.thick-keyline-dark(left);\n  }\n\n  &__navigation-buttons {\n    width: 100%;\n    max-height: 50vh;\n    aspect-ratio: 3 / 2;\n\n    position: relative;\n    top: 3rem;\n    z-index: 2;\n\n    pointer-events: none;\n\n    .tna-template--touched & {\n      display: none;\n    }\n  }\n\n  &__navigation-button {\n    width: 25%;\n    padding: 0;\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n\n    border: none;\n\n    opacity: 0;\n\n    cursor: pointer;\n    pointer-events: auto;\n\n    @include colour.tint;\n\n    &:hover,\n    &:focus {\n      opacity: 1;\n    }\n  }\n\n  &__navigation-prev {\n    padding-right: 10%;\n\n    left: 0;\n\n    background: linear-gradient(\n      90deg,\n      var(--background) 15%,\n      rgb(0 0 0 / 0%) 100%\n    );\n  }\n\n  &__navigation-next {\n    padding-left: 10%;\n\n    right: 0;\n\n    background: linear-gradient(\n      270deg,\n      var(--background) 15%,\n      rgb(0 0 0 / 0%) 100%\n    );\n  }\n\n  &__navigation-button-label {\n    width: 1rem;\n    height: 1rem;\n\n    display: inline-block;\n\n    font-size: 0;\n\n    @include colour.colour-border(\"font-dark\", 4px, solid, top);\n    @include colour.colour-border(\"font-dark\", 4px, solid, right);\n\n    transform-origin: 50% 50%;\n  }\n\n  &__navigation-prev &__navigation-button-label {\n    transform: rotate(-135deg);\n  }\n\n  &__navigation-next &__navigation-button-label {\n    transform: rotate(45deg);\n  }\n\n  &__items[tabindex=\"-1\"],\n  &__items[tabindex=\"-1\"] + &__navigation-buttons {\n    display: none;\n  }\n\n  &__navigation {\n    padding: spacing.space(1);\n\n    grid-column: 1 / 3;\n    grid-row: 3;\n\n    display: grid;\n    grid-template-columns: repeat(6, 1fr);\n    grid-auto-rows: min-content;\n    gap: spacing.space(1);\n\n    overflow: auto;\n  }\n\n  &__navigation-item {\n    min-width: 0;\n    min-height: 0;\n    aspect-ratio: 1;\n\n    position: relative;\n\n    border: none;\n\n    cursor: pointer;\n\n    @include colour.contrast;\n\n    &:hover {\n      &::after {\n        content: \"\";\n\n        position: absolute;\n        inset: 0;\n        z-index: 2;\n\n        @include colour.thick-keyline-accent;\n      }\n    }\n\n    &[aria-selected=\"true\"] {\n      @include colour.accent;\n\n      &::after {\n        content: \"\";\n\n        position: absolute;\n        inset: 0;\n        z-index: 2;\n\n        @include colour.thick-keyline-brand(\"\", \"black\");\n      }\n    }\n  }\n\n  &__navigation-item-image {\n    width: 100%;\n    height: 100%;\n\n    position: absolute;\n    inset: 0;\n    object-fit: cover;\n  }\n\n  &__navigation-item-label {\n    padding: spacing.space(0.25) spacing.space(0.75);\n\n    display: inline-block;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 4;\n\n    text-transform: capitalize;\n\n    @include colour.colour-font(\"font-dark\");\n    @include typography.font-size(24);\n    @include typography.main-font-weight-bold;\n\n    @include colour.colour-background(\"background\");\n  }\n\n  &--interactive {\n    max-height: 175dvh;\n  }\n\n  &--interactive &__item-figure-inner {\n    max-height: 50vh;\n    aspect-ratio: 3 / 2;\n  }\n\n  &--interactive &__item-image {\n    width: 100%;\n    height: 100%;\n\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    object-fit: contain;\n  }\n\n  @include media.on-medium {\n    &__navigation {\n      grid-template-columns: repeat(4, 1fr);\n    }\n  }\n\n  @include media.on-mobile {\n    &__options {\n      flex-direction: row-reverse;\n      align-items: flex-start;\n    }\n\n    &__navigation {\n      grid-template-columns: repeat(3, 1fr);\n    }\n  }\n\n  @include media.on-tiny {\n    &__navigation-item-label {\n      @include typography.font-size(18);\n    }\n  }\n\n  &:fullscreen &__header-inner {\n    display: none;\n  }\n\n  &:fullscreen &__options {\n    flex: 1;\n\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: flex-end;\n\n    .tna-button[value=\"show-index\"] {\n      display: none;\n    }\n  }\n\n  &:fullscreen &__item-description {\n    max-height: 4.5rem;\n\n    overflow: auto;\n  }\n\n  @media (aspect-ratio >= 1/1) {\n    &:fullscreen &__header {\n      grid-column: 2 / 3;\n    }\n\n    &:fullscreen &__items,\n    &:fullscreen &__navigation-buttons {\n      grid-column: 1 / 2;\n      grid-row: 1 / 4;\n    }\n\n    &:fullscreen &__item {\n      height: 100%;\n    }\n\n    &:fullscreen &__item-figure {\n      flex: 1;\n    }\n\n    &:fullscreen &__item-figure-inner,\n    &:fullscreen &__navigation-buttons {\n      max-height: none;\n      flex: 1;\n\n      aspect-ratio: auto;\n    }\n\n    &:fullscreen &__navigation {\n      padding-top: 0;\n      padding-left: 0;\n\n      grid-column: 2 / 3;\n      grid-row: 2 / 4;\n\n      grid-template-columns: repeat(3, 1fr);\n      gap: spacing.space(0.5);\n    }\n  }\n}\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n$focus-outline-padding: $focus-outline-width + $focus-outline-offset;\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  font-variation-settings: \"wdth\" 100;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n","/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n  #{$main-font-family-name},\n  sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n  #{$heading-font-family-name},\n  \"Arial Narrow\",\n  sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n  #{$detail-font-family-name},\n  monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}

package/nationalarchives/components/gallery/gallery.scss

@@ -5,6 +5,8 @@
 @use "../../tools/typography";
 
 .tna-gallery {
+  @include spacing.space-above;
+
   display: grid;
   grid-template: min-content min-content 1fr / 2fr 1fr;
   gap: 0 spacing.space(1);

package/nationalarchives/components/hero/hero.css

@@ -1 +1 @@
-.tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary,.tna-hero--split:not(.tna-background-accent,.tna-background-tint),.tna-hero--shift:not(.tna-background-accent,.tna-background-tint) .tna-hero__content-inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-background-accent,.tna-background-tint) .tna-hero__inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-list-marker: var(--accent-font-base);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:160px;padding-bottom:32px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:5}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;top:8px;right:8px;z-index:2;font-size:0;line-height:1.5rem;text-align:center;list-style:none;border-radius:100%;cursor:pointer;border:4px var(--background, #f4f4f4) solid}.tna-hero__details-summary:hover{color:var(--background, #f4f4f4);background-color:var(--font-base, #343338)}.tna-hero__details-summary-icon{font-size:1.25rem;font-weight:700;font-style:normal;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 52px 10px 16px;position:absolute;top:0;right:0;z-index:1;font-size:1rem}.tna-hero__image{position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:var(--background, #f4f4f4)}.tna-hero--split .tna-hero__figure{min-height:clamp(15rem,33.3333333333vw,50rem);padding-top:32px;padding-bottom:32px;align-items:center;box-sizing:border-box}.tna-hero--split .tna-hero__information{max-width:50%;box-sizing:border-box}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--split .tna-hero__content{width:50%;padding-right:32px}.tna-hero--split .tna-hero__content-inner{padding:0}.tna-hero--shift{margin-bottom:48px}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.tna-hero--narrow .tna-hero__figure{min-height:max(96px,20rem);padding-top:48px;padding-bottom:48px}@media(max-width: 48em){.tna-hero .tna-hero__figure{min-height:auto;padding:0;flex-direction:column}.tna-hero__caption{order:2}.tna-hero__information,.tna-hero--split .tna-hero__information{width:auto;max-width:none;left:0}.tna-hero__image{width:100%;position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3}.tna-hero__content-inner{padding-right:0;padding-left:0}.tna-hero__body{margin-top:16px}.tna-hero--shift{margin-bottom:0}.tna-hero--shift .tna-hero__content-inner{position:static}.tna-hero--split .tna-hero__figure{min-height:auto;padding-top:0;padding-bottom:0}.tna-hero--split .tna-hero__content{width:100%;padding-right:16px}.tna-hero--split .tna-hero__content-inner{padding-top:32px;padding-bottom:32px}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}/*# sourceMappingURL=hero.css.map */
+.tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary,.tna-hero--split:not(.tna-background-accent,.tna-background-tint),.tna-hero--shift:not(.tna-background-accent,.tna-background-tint) .tna-hero__content-inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-background-accent,.tna-background-tint) .tna-hero__inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-list-marker: var(--accent-font-base);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:160px;padding-bottom:32px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:5}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;top:8px;right:8px;z-index:2;font-size:0;line-height:1.5rem;text-align:center;list-style:none;border-radius:100%;cursor:pointer;border:4px var(--background, #f4f4f4) solid}.tna-hero__details-summary:hover{color:var(--background, #f4f4f4);background-color:var(--font-base, #343338)}.tna-hero__details-summary-icon{font-size:1.25rem;font-weight:700;font-style:normal;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 52px 10px 16px;position:absolute;top:0;right:0;z-index:1;font-size:1rem}.tna-hero__information p+p{margin-top:8px}.tna-hero__image{position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:var(--background, #f4f4f4)}.tna-hero--split .tna-hero__figure{min-height:clamp(15rem,33.3333333333vw,50rem);padding-top:32px;padding-bottom:32px;align-items:center;box-sizing:border-box}.tna-hero--split .tna-hero__information{max-width:50%;box-sizing:border-box}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--split .tna-hero__content{width:50%;padding-right:32px}.tna-hero--split .tna-hero__content-inner{padding:0}.tna-hero--shift{margin-bottom:48px}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.tna-hero--narrow .tna-hero__figure{min-height:max(96px,20rem);padding-top:48px;padding-bottom:48px}@media(max-width: 48em){.tna-hero .tna-hero__figure{min-height:auto;padding:0;flex-direction:column}.tna-hero__caption{order:2}.tna-hero__information,.tna-hero--split .tna-hero__information{width:auto;max-width:none;left:0}.tna-hero__image{width:100%;position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3}.tna-hero__content-inner{padding-right:0;padding-left:0}.tna-hero__body{margin-top:16px}.tna-hero--shift{margin-bottom:0}.tna-hero--shift .tna-hero__content-inner{position:static}.tna-hero--split .tna-hero__figure{min-height:auto;padding-top:0;padding-bottom:0}.tna-hero--split .tna-hero__content{width:100%;padding-right:16px}.tna-hero--split .tna-hero__content-inner{padding-top:32px;padding-bottom:32px}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}/*# sourceMappingURL=hero.css.map */

package/nationalarchives/components/hero/hero.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAyLA,wOACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAjJA,4CAJA,gCCgCA,wBDiIF,4EAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA5KF,4CAJA,iCAyMF,2BACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCACA,yCACA,qDACA,qDACA,iEApNA,4CAJA,gCEpCA,kBACE,2CAKA,SACA,kBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,UAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,QACA,UACA,UAEA,YACA,mBACA,kBAEA,gBAEA,mBAEA,eFgBE,4CEVF,iCFpBF,iCAIA,2CEuBA,gCACE,kBACA,gBACA,kBACA,yBAGF,uBACE,YACA,eACA,4BAGA,kBACA,MACA,QACA,UCvFF,eD8FA,iBACE,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SFzEJ,gDE8EE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aF/GF,4CEiIA,mCACE,8CACA,iBACA,oBAEA,mBAEA,sBAGF,wCACE,cAEA,sBAGF,kCACE,SAGF,oCACE,UACA,mBAGF,0CACE,UAGF,iBACE,mBAGF,0CACE,kBACA,SAUF,oCACE,2BACA,iBACA,oBDrJF,wBCyJE,4BACE,gBACA,UAEA,sBAGF,mBACE,QAYF,+DAEE,WACA,eAEA,OAGF,iBACE,WAEA,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAMF,yBACE,gBACA,eAMF,gBACE,gBAGF,iBACE,gBAGF,0CACE,gBAGF,mCACE,gBACA,cACA,iBAGF,oCACE,WACA,mBAGF,0CACE,iBACA,qBFgHJ,8BE3GE,gDFhPE,+CCEJ,mDCoPI,iBFtPA,8CEwPE,aAGF,yBACE,aFyFN,+BErGE,gDFhPE,+CCEJ,oDCoPI,iBFtPA,8CEwPE,aAGF,yBACE","file":"hero.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline-dark\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"accent-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid\n    );\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width\n      #{brand-colour($brandColour)}\n      solid;\n  } @else {\n    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  @include colour-css-vars(\"form-error-border\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error-border\");\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  --accent-list-marker: var(--accent-border);\n  // --accent-list-marker: var(--font-base);\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    --accent-list-marker: var(--accent-border);\n    // --accent-list-marker: var(--font-base);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n  --accent-list-marker: var(--accent-font-base);\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(--font-base);\n  --accent-list-marker: var(--font-base);\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  }\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}\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-list-marker: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"grey\")} !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  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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","@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 \"sass:math\";\n\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$padding-units-top: 10 !default;\n$padding-units-bottom: 2 !default;\n$padding-units-narrow: 3 !default;\n$shift-units: 5 !default;\n\n.tna-hero {\n  &__figure {\n    min-height: clamp(\n      #{spacing.space($padding-units-top + $padding-units-bottom)},\n      calc(40vw - #{spacing.space($padding-units-top + $padding-units-bottom)}),\n      50rem\n    );\n    margin: 0;\n    padding-top: spacing.space($padding-units-top);\n    padding-bottom: spacing.space($padding-units-bottom);\n\n    display: flex;\n    align-items: flex-end;\n\n    position: relative;\n  }\n\n  &__caption {\n    width: 100%;\n\n    overflow: visible;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 5;\n  }\n\n  &__details {\n    width: 100%;\n\n    overflow: visible;\n  }\n\n  &__details-summary {\n    width: 1.5rem;\n    height: 1.5rem;\n\n    position: absolute;\n    top: spacing.space(0.5);\n    right: spacing.space(0.5);\n    z-index: 2;\n\n    font-size: 0;\n    line-height: 1.5rem;\n    text-align: center;\n\n    list-style: none;\n\n    border-radius: 100%;\n\n    cursor: pointer;\n\n    @include colour.accent;\n\n    @include colour.colour-border(\"background\", 4px);\n\n    &:hover {\n      @include colour.colour-font(\"background\");\n\n      @include colour.colour-background(\"font-base\");\n    }\n  }\n\n  &__details-summary-icon {\n    font-size: 1.25rem;\n    font-weight: 700;\n    font-style: normal;\n    text-transform: lowercase;\n  }\n\n  &__information {\n    width: 45rem;\n    max-width: 75vw;\n    padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n      spacing.space(1);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n\n    @include colour.contrast;\n\n    @include typography.font-size(16);\n  }\n\n  &__image {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    img {\n      width: 100%;\n      height: 100%;\n\n      object-fit: cover;\n    }\n  }\n\n  &__details[open] &__details-summary {\n    @include colour.contrast;\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      width: 1.5rem;\n      height: 0.125rem;\n\n      display: block;\n\n      position: absolute;\n      top: 50%;\n      left: 50%;\n\n      @include colour.colour-background(\"font-dark\");\n    }\n\n    &::before {\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n\n    &::after {\n      transform: translate(-50%, -50%) rotate(-45deg);\n    }\n\n    &:hover {\n      &::before,\n      &::after {\n        height: 0.25rem;\n      }\n    }\n\n    &-icon {\n      font-size: 0;\n    }\n  }\n\n  &__inner {\n    position: relative;\n    z-index: 4;\n  }\n\n  &:not(.tna-background-accent, .tna-background-tint) &__inner {\n    @include colour.contrast-on-mobile;\n  }\n\n  &__content {\n  }\n\n  &__content-inner {\n    padding: spacing.space(2);\n\n    @include colour.colour-background(\"background\");\n  }\n\n  &__heading {\n  }\n\n  &__body {\n  }\n\n  &--split {\n  }\n\n  &--split:not(.tna-background-accent, .tna-background-tint) {\n    @include colour.contrast;\n  }\n\n  &--split &__figure {\n    min-height: clamp(15rem, #{math.div(100vw, 3)}, 50rem);\n    padding-top: spacing.space(2);\n    padding-bottom: spacing.space(2);\n\n    align-items: center;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__information {\n    max-width: 50%;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__image {\n    left: 50%;\n  }\n\n  &--split &__content {\n    width: 50%;\n    padding-right: grid.gutter-width();\n  }\n\n  &--split &__content-inner {\n    padding: 0;\n  }\n\n  &--shift {\n    margin-bottom: spacing.space($shift-units - $padding-units-bottom);\n  }\n\n  &--shift &__content-inner {\n    position: relative;\n    top: spacing.space($shift-units);\n  }\n\n  &--shift:not(.tna-background-accent, .tna-background-tint) &__content-inner {\n    @include colour.contrast;\n  }\n\n  &--narrow {\n  }\n\n  &--narrow &__figure {\n    min-height: max(#{spacing.space($padding-units-narrow * 2)}, 20rem);\n    padding-top: spacing.space($padding-units-narrow);\n    padding-bottom: spacing.space($padding-units-narrow);\n  }\n\n  @include media.on-mobile {\n    & &__figure {\n      min-height: auto;\n      padding: 0;\n\n      flex-direction: column;\n    }\n\n    &__caption {\n      order: 2;\n    }\n\n    &__details {\n    }\n\n    &__details-summary {\n    }\n\n    &__details-summary-icon {\n    }\n\n    &__information,\n    &--split &__information {\n      width: auto;\n      max-width: none;\n\n      left: 0;\n    }\n\n    &__image {\n      width: 100%;\n\n      position: static;\n\n      order: 1;\n\n      img {\n        height: auto;\n      }\n    }\n\n    &__inner {\n      order: 3;\n    }\n\n    &__content {\n    }\n\n    &__content-inner {\n      padding-right: 0;\n      padding-left: 0;\n    }\n\n    &__heading {\n    }\n\n    &__body {\n      margin-top: spacing.space(1);\n    }\n\n    &--shift {\n      margin-bottom: 0;\n    }\n\n    &--shift &__content-inner {\n      position: static;\n    }\n\n    &--split &__figure {\n      min-height: auto;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    &--split &__content {\n      width: 100%;\n      padding-right: grid.gutter-width-half();\n    }\n\n    &--split &__content-inner {\n      padding-top: spacing.space(2);\n      padding-bottom: spacing.space(2);\n    }\n  }\n\n  @include colour.on-high-contrast-and-forced-colours {\n    &__information,\n    &__content-inner {\n      @include colour.colour-border(\"keyline-dark\", 1px);\n    }\n\n    @include media.on-mobile {\n      &__inner {\n        @include colour.colour-border(\"keyline-dark\", 1px);\n        border-top: 0;\n      }\n\n      &__content-inner {\n        border: none;\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  font-variation-settings: \"wdth\" 100;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAyLA,wOACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAjJA,4CAJA,gCCgCA,wBDiIF,4EAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA5KF,4CAJA,iCAyMF,2BACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCACA,yCACA,qDACA,qDACA,iEApNA,4CAJA,gCEpCA,kBACE,2CAKA,SACA,kBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,UAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,QACA,UACA,UAEA,YACA,mBACA,kBAEA,gBAEA,mBAEA,eFgBE,4CEVF,iCFpBF,iCAIA,2CEuBA,gCACE,kBACA,gBACA,kBACA,yBAGF,uBACE,YACA,eACA,4BAGA,kBACA,MACA,QACA,UCvFF,eD6FE,2BACE,eAIJ,iBACE,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SF7EJ,gDEkFE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aFnHF,4CEqIA,mCACE,8CACA,iBACA,oBAEA,mBAEA,sBAGF,wCACE,cAEA,sBAGF,kCACE,SAGF,oCACE,UACA,mBAGF,0CACE,UAGF,iBACE,mBAGF,0CACE,kBACA,SAUF,oCACE,2BACA,iBACA,oBDzJF,wBC6JE,4BACE,gBACA,UAEA,sBAGF,mBACE,QAYF,+DAEE,WACA,eAEA,OAGF,iBACE,WAEA,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAMF,yBACE,gBACA,eAMF,gBACE,gBAGF,iBACE,gBAGF,0CACE,gBAGF,mCACE,gBACA,cACA,iBAGF,oCACE,WACA,mBAGF,0CACE,iBACA,qBF4GJ,8BEvGE,gDFpPE,+CCEJ,mDCwPI,iBF1PA,8CE4PE,aAGF,yBACE,aFqFN,+BEjGE,gDFpPE,+CCEJ,oDCwPI,iBF1PA,8CE4PE,aAGF,yBACE","file":"hero.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline-dark\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"accent-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid\n    );\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width\n      #{brand-colour($brandColour)}\n      solid;\n  } @else {\n    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  @include colour-css-vars(\"form-error-border\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error-border\");\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  --accent-list-marker: var(--accent-border);\n  // --accent-list-marker: var(--font-base);\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    --accent-list-marker: var(--accent-border);\n    // --accent-list-marker: var(--font-base);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n  --accent-list-marker: var(--accent-font-base);\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(--font-base);\n  --accent-list-marker: var(--font-base);\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  }\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}\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-list-marker: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"grey\")} !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  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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","@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 \"sass:math\";\n\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$padding-units-top: 10 !default;\n$padding-units-bottom: 2 !default;\n$padding-units-narrow: 3 !default;\n$shift-units: 5 !default;\n\n.tna-hero {\n  &__figure {\n    min-height: clamp(\n      #{spacing.space($padding-units-top + $padding-units-bottom)},\n      calc(40vw - #{spacing.space($padding-units-top + $padding-units-bottom)}),\n      50rem\n    );\n    margin: 0;\n    padding-top: spacing.space($padding-units-top);\n    padding-bottom: spacing.space($padding-units-bottom);\n\n    display: flex;\n    align-items: flex-end;\n\n    position: relative;\n  }\n\n  &__caption {\n    width: 100%;\n\n    overflow: visible;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 5;\n  }\n\n  &__details {\n    width: 100%;\n\n    overflow: visible;\n  }\n\n  &__details-summary {\n    width: 1.5rem;\n    height: 1.5rem;\n\n    position: absolute;\n    top: spacing.space(0.5);\n    right: spacing.space(0.5);\n    z-index: 2;\n\n    font-size: 0;\n    line-height: 1.5rem;\n    text-align: center;\n\n    list-style: none;\n\n    border-radius: 100%;\n\n    cursor: pointer;\n\n    @include colour.accent;\n\n    @include colour.colour-border(\"background\", 4px);\n\n    &:hover {\n      @include colour.colour-font(\"background\");\n\n      @include colour.colour-background(\"font-base\");\n    }\n  }\n\n  &__details-summary-icon {\n    font-size: 1.25rem;\n    font-weight: 700;\n    font-style: normal;\n    text-transform: lowercase;\n  }\n\n  &__information {\n    width: 45rem;\n    max-width: 75vw;\n    padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n      spacing.space(1);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n\n    @include colour.contrast;\n\n    @include typography.font-size(16);\n\n    p + p {\n      margin-top: spacing.space(0.5);\n    }\n  }\n\n  &__image {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    img {\n      width: 100%;\n      height: 100%;\n\n      object-fit: cover;\n    }\n  }\n\n  &__details[open] &__details-summary {\n    @include colour.contrast;\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      width: 1.5rem;\n      height: 0.125rem;\n\n      display: block;\n\n      position: absolute;\n      top: 50%;\n      left: 50%;\n\n      @include colour.colour-background(\"font-dark\");\n    }\n\n    &::before {\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n\n    &::after {\n      transform: translate(-50%, -50%) rotate(-45deg);\n    }\n\n    &:hover {\n      &::before,\n      &::after {\n        height: 0.25rem;\n      }\n    }\n\n    &-icon {\n      font-size: 0;\n    }\n  }\n\n  &__inner {\n    position: relative;\n    z-index: 4;\n  }\n\n  &:not(.tna-background-accent, .tna-background-tint) &__inner {\n    @include colour.contrast-on-mobile;\n  }\n\n  &__content {\n  }\n\n  &__content-inner {\n    padding: spacing.space(2);\n\n    @include colour.colour-background(\"background\");\n  }\n\n  &__heading {\n  }\n\n  &__body {\n  }\n\n  &--split {\n  }\n\n  &--split:not(.tna-background-accent, .tna-background-tint) {\n    @include colour.contrast;\n  }\n\n  &--split &__figure {\n    min-height: clamp(15rem, #{math.div(100vw, 3)}, 50rem);\n    padding-top: spacing.space(2);\n    padding-bottom: spacing.space(2);\n\n    align-items: center;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__information {\n    max-width: 50%;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__image {\n    left: 50%;\n  }\n\n  &--split &__content {\n    width: 50%;\n    padding-right: grid.gutter-width();\n  }\n\n  &--split &__content-inner {\n    padding: 0;\n  }\n\n  &--shift {\n    margin-bottom: spacing.space($shift-units - $padding-units-bottom);\n  }\n\n  &--shift &__content-inner {\n    position: relative;\n    top: spacing.space($shift-units);\n  }\n\n  &--shift:not(.tna-background-accent, .tna-background-tint) &__content-inner {\n    @include colour.contrast;\n  }\n\n  &--narrow {\n  }\n\n  &--narrow &__figure {\n    min-height: max(#{spacing.space($padding-units-narrow * 2)}, 20rem);\n    padding-top: spacing.space($padding-units-narrow);\n    padding-bottom: spacing.space($padding-units-narrow);\n  }\n\n  @include media.on-mobile {\n    & &__figure {\n      min-height: auto;\n      padding: 0;\n\n      flex-direction: column;\n    }\n\n    &__caption {\n      order: 2;\n    }\n\n    &__details {\n    }\n\n    &__details-summary {\n    }\n\n    &__details-summary-icon {\n    }\n\n    &__information,\n    &--split &__information {\n      width: auto;\n      max-width: none;\n\n      left: 0;\n    }\n\n    &__image {\n      width: 100%;\n\n      position: static;\n\n      order: 1;\n\n      img {\n        height: auto;\n      }\n    }\n\n    &__inner {\n      order: 3;\n    }\n\n    &__content {\n    }\n\n    &__content-inner {\n      padding-right: 0;\n      padding-left: 0;\n    }\n\n    &__heading {\n    }\n\n    &__body {\n      margin-top: spacing.space(1);\n    }\n\n    &--shift {\n      margin-bottom: 0;\n    }\n\n    &--shift &__content-inner {\n      position: static;\n    }\n\n    &--split &__figure {\n      min-height: auto;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    &--split &__content {\n      width: 100%;\n      padding-right: grid.gutter-width-half();\n    }\n\n    &--split &__content-inner {\n      padding-top: spacing.space(2);\n      padding-bottom: spacing.space(2);\n    }\n  }\n\n  @include colour.on-high-contrast-and-forced-colours {\n    &__information,\n    &__content-inner {\n      @include colour.colour-border(\"keyline-dark\", 1px);\n    }\n\n    @include media.on-mobile {\n      &__inner {\n        @include colour.colour-border(\"keyline-dark\", 1px);\n        border-top: 0;\n      }\n\n      &__content-inner {\n        border: none;\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  font-variation-settings: \"wdth\" 100;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n"]}

package/nationalarchives/components/hero/hero.scss

@@ -96,6 +96,10 @@ $shift-units: 5 !default;
     @include colour.contrast;
 
     @include typography.font-size(16);
+
+    p + p {
+      margin-top: spacing.space(0.5);
+    }
   }
 
   &__image {

package/nationalarchives/components/hero/macro-options.json

@@ -161,10 +161,10 @@
     "description": "The style of hero to use. This can be `contrast`, `tint` or `accent`."
   },
   {
-    "name": "style",
+    "name": "layout",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "An alternative layout of the hero component to use. This can be `shift` or `split`."
   },
   {
     "name": "classes",

package/nationalarchives/components/picture/picture.css

@@ -1 +1 @@
-.tna-picture__transcript{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-picture{margin-top:32px}.tna-picture:first-child{margin-top:0}.tna-picture{margin-right:0;margin-bottom:0;margin-left:0;padding:0}.tna-picture__image-wrapper{padding:24px;position:relative}.tna-picture__image{width:auto;height:auto;max-height:40rem;margin:0 auto;box-shadow:0 .25rem 1rem -0.25rem rgba(0,0,0,.25),0 .125rem .5rem -0.25rem rgba(0,0,0,.75)}.tna-picture__toggle-transcript{position:absolute;right:16px;bottom:16px}.tna-picture__transcript{padding:16px 24px}.tna-template--clicked .tna-picture__transcript:focus{outline:none}.tna-picture__transcript .tna-tabs{margin-bottom:8px}.tna-picture__caption{margin:0 16px;padding:16px;font-size:1rem;border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}@media(max-width: 30em){.tna-picture__image-wrapper{padding:0}}@media(max-width: 30em){.tna-column .tna-picture{width:calc(100% + 32px);position:relative;left:-16px}.tna-picture__image{max-height:60rem}.tna-picture__caption{margin-right:0;margin-left:0;font-size:0.875rem}}@media(forced-colors: active){.tna-picture{border:1px var(--keyline-dark, #26262a) solid}.tna-picture__caption{margin:0;border:none}}@media(prefers-contrast: more){.tna-picture{border:1px var(--keyline-dark, #26262a) solid}.tna-picture__caption{margin:0;border:none}}/*# sourceMappingURL=picture.css.map */
+.tna-picture__transcript{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-picture{margin-top:32px}.tna-picture:first-child{margin-top:0}.tna-picture{margin-right:0;margin-bottom:0;margin-left:0;padding:0}.tna-picture__image-wrapper{padding:24px;position:relative}.tna-picture__image{width:auto;height:auto;max-height:40rem;margin:0 auto;box-shadow:0 .25rem 1rem -0.25rem rgba(0,0,0,.25),0 .125rem .5rem -0.25rem rgba(0,0,0,.75)}.tna-picture__toggle-transcript{position:absolute;right:16px;bottom:16px}.tna-picture__transcript{padding:16px 24px}.tna-template--clicked .tna-picture__transcript:focus{outline:none}.tna-picture__transcript .tna-tabs{margin-bottom:8px}.tna-picture__caption{margin:0 16px;padding:16px;font-size:1rem;border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-picture--plain .tna-picture__image-wrapper{padding:0}.tna-picture--plain .tna-picture__image{box-shadow:none}@media(max-width: 30em){.tna-picture__image-wrapper{padding:0}}@media(max-width: 30em){.tna-column .tna-picture{width:calc(100% + 32px);position:relative;left:-16px}.tna-picture__image{max-height:60rem}.tna-picture__caption{margin-right:0;margin-left:0;font-size:0.875rem}}@media(forced-colors: active){.tna-picture{border:1px var(--keyline-dark, #26262a) solid}.tna-picture__caption{margin:0;border:none}}@media(prefers-contrast: more){.tna-picture{border:1px var(--keyline-dark, #26262a) solid}.tna-picture__caption{margin:0;border:none}}/*# sourceMappingURL=picture.css.map */