@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/themes/london-calling.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/themes/base/noto-sans.scss","../src/themes/base/noto-sans-jp.scss","../src/themes/base/noto-sans-sc.scss","../src/themes/base/normalize.scss","../src/themes/base/structure.scss","../src/global/style/utilities/_mixins.scss","../src/global/style/nano-theme/typography.scss","../src/global/style/nano-theme/tokens/_colours.scss","../src/global/style/nano-theme/buttons.scss","../src/global/style/utilities/css-patterns/_unstyled_input.scss","../src/global/style/utilities/css-patterns/_unstyled_anchor.scss","../src/global/style/nano-theme/tokens/_button.scss","../src/themes/london-calling.scss"],"names":[],"mappings":"AACA,WACE,kBACA,wBACA,kBACA,gBACA,wFAIF,WACE,kBACA,wBACA,kBACA,gBACA,uFAIF,WACE,kBACA,wBACA,kBACA,gBACA,oFAIF,WACE,kBACA,wBACA,kBACA,gBACA,0FAIF,WACE,kBACA,wBACA,kBACA,gBACA,oFAIF,WACE,kBACA,wBACA,kBACA,gBACA,0FAGF,WACE,2CACA,mBCvDF,WACE,kBACA,2BACA,kBACA,gBACA,2FAIF,WACE,kBACA,2BACA,kBACA,gBACA,uFAIF,WACE,kBACA,2BACA,kBACA,gBACA,uFAGF,WACE,2CACA,mBC5BF,WACE,kBACA,2BACA,kBACA,gBACA,qGAIF,WACE,kBACA,2BACA,kBACA,gBACA,iGAIF,WACE,kBACA,2BACA,kBACA,gBACA,iGAGF,WACE,2CACA,mBC7BF,qBAGE,sBASF,4BAIE,wBAKF,sBACE,aACA,aAOF,SAEE,iBAOF,IACE,qBACA,SAIF,eACE,gBAOF,OACE,iBACA,mBAGF,GACE,eACA,eACA,uBAIF,IACE,cAIF,kBAIE,sBACA,cAeF,4BAIE,oBACA,mBAGF,SACE,cACA,gBACA,aACA,cAGF,sBACE,yBAGF,2BAIE,SACA,aACA,cAQF,6DAGE,eACA,gBAIF,qNAkBE,0BAGF,6BAEE,oBAGF,OACE,SACA,gBACA,oBACA,mBACA,qBACA,cACA,oBACA,eACA,gBAGF,WACE,eAIF,kDAGE,eAIF,iDAEE,UACA,SAMF,uCAEE,UACA,sBAMF,4FAEE,gBAMF,+FAEE,gBAOF,MACE,yBACA,iBAGF,MAEE,UAGF,SACE,wBC7NF,EACE,sBACA,0CACA,0CACA,2BAGF,6BAIE,iDAGF,qBAGE,sBACA,oBAGF,KACE,iBACA,sBAGF,KCiCE,kCACA,mCD/BA,SACA,UACA,kCEhBF,UACE,oCACA,yCACA,MCuGW,gCDtGX,qCAGF,EACE,yCACA,qBAEA,QACE,0BAIJ,kBAME,uBACA,YAvCqB,IAwCrB,YAtCqB,IAyCvB,GACE,wBACA,UAzCa,KA4Cf,GACE,wBACA,UA5Ca,KA+Cf,GACE,UA9Ca,KAiDf,GACE,UAhDa,KAmDf,GACE,UAlDa,KAqDf,GACE,UApDa,KAuDf,MACE,cAGF,QAEE,kBACA,cACA,cACA,wBAGF,IACE,yBAGF,IACE,wBAGF,EACE,mBACA,gBACA,oBAEA,aACE,kBAIJ,SACE,gBACA,gBACA,sBACA,gBAEA,oBACE,cAGF,aAVF,SAWI,eAGF,cACE,iBDHA,yBCEF,cAII,mBAIJ,cACE,iBDXA,yBCUF,cAII,gBAIJ,gBACE,mBDnBA,yBCkBF,gBAII,oBAIJ,eACE,mBAGF,eACE,eAGF,gBACE,gBAGF,gBACE,yBAGF,eACE,kBACA,yBACA,qBACA,iBACA,sBEhKJ,kBCCE,YACA,+BACA,aACA,yBCJA,qBACA,cCgBA,WACE,uHAyDF,qFACA,yFACA,yEACA,qBACA,iDACA,+CACA,gBACA,eACA,2BFzEA,0BACE,SACA,UCTF,4BAEE,qBACA,cC+EF,aHrFF,QGsFI,cAGF,oCAEE,aACA,wHAGF,uCAEE,8BAEA,qBACA,yCACA,sBACA,4BACA,qBAIA,6EAEE,qBAIJ,qCACE,wEAGF,qDACE,gBAGF,mCAEE,WAEA,+CACE,eH1HN,iBGwCE,iBHtCE,mCGuCF,MHtCE,yCGwCF,6FAEE,iBAPS,yCAQT,MATW,yCAWX,6HACE,iBH/CF,mCGgDE,MH/CF,yCGmDF,uBACE,MHpDA,yCGuDF,iCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MH3DA,mCG4DA,aH5DA,mCG2BF,8LAGE,gBHxBJ,mBGgCE,iBH9BE,QG+BF,MH9BE,KGgCF,iGAEE,iBAPS,QAQT,MATW,KAWX,iIACE,iBHvCF,QGwCE,MHvCF,KG2CF,yBACE,MH5CA,KG+CF,mCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MHnDA,QGoDA,aHpDA,QGmBF,oMAGE,gBHhBJ,eGwBE,iBHtBE,KGuBF,MHtBE,QGwBF,yFAEE,iBAPS,KAQT,MATW,QAWX,yHACE,iBH/BF,KGgCE,MH/BF,QGmCF,qBACE,MHpCA,QGuCF,+BArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MH3CA,KG4CA,aH5CA,KGWF,wLAGE,gBHPJ,gBGeE,iBHbE,QGcF,MHbE,KGeF,2FAEE,iBAPS,QAQT,MATW,KAWX,2HACE,iBHtBF,QGuBE,MHtBF,KG0BF,sBACE,MH3BA,KG8BF,gCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MHlCA,QGmCA,aHnCA,QGEF,2LAGE,gBHCJ,iBGOE,iBHLE,QGMF,MHLE,KGOF,6FAEE,iBAPS,QAQT,MATW,KAWX,6HACE,iBHdF,QGeE,MHdF,KGkBF,uBACE,MHnBA,KGsBF,iCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MH1BA,QG2BA,aH3BA,QGNF,8LAGE,gBHSJ,kBACE,yBACA,gBACA,0BACA,gBAIE,0MAEE,cACA,gBACA,0BInDN,MACE,4BACA,qBP0JE,yBO5JJ,MAKI,6BAIJ,KACE,gFAEA,qEAEA,gBACE,qFAEA,2EAGA,qCACE,6BAIJ,gBACE,qFAEA,2EAGA,qCACE","file":"london-calling.css","sourcesContent":["/* noto-sans-regular - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: normal;\n  font-weight: 400;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-regular.woff2') format('woff2'); \n}\n\n/* noto-sans-italic - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: italic;\n  font-weight: 400;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-italic.woff2') format('woff2'); \n}\n\n/* noto-sans-500 - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: normal;\n  font-weight: 500;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-500.woff2') format('woff2'); \n}\n\n/* noto-sans-500italic - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: italic;\n  font-weight: 500;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-500italic.woff2') format('woff2'); \n}\n\n/* noto-sans-700 - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: normal;\n  font-weight: 700;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-700.woff2') format('woff2'); \n}\n\n/* noto-sans-700italic - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: italic;\n  font-weight: 700;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-700italic.woff2') format('woff2'); \n}\n\n@font-face {\n  font-family: \"Noto Sans SC Fallback: Arial\";\n  src: local(\"Arial\");\n}","/* noto-sans-jp-regular - japanese */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans JP\";\n  font-style: normal;\n  font-weight: 400;\n  src: url('../nano-assets/fonts/jp/noto-sans-jp-v53-japanese-regular.woff2') format('woff2'); \n}\n\n/* noto-sans-jp-500 - japanese */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans JP\";\n  font-style: normal;\n  font-weight: 500;\n  src: url('../nano-assets/fonts/jp/noto-sans-jp-v53-japanese-500.woff2') format('woff2'); \n}\n\n/* noto-sans-jp-700 - japanese */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans JP\";\n  font-style: normal;\n  font-weight: 700;\n  src: url('../nano-assets/fonts/jp/noto-sans-jp-v53-japanese-700.woff2') format('woff2'); \n}\n\n@font-face {\n  font-family: \"Noto Sans JP Fallback: Arial\";\n  src: local(\"Arial\");\n}","/* noto-sans-sc-regular - chinese-simplified_latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans SC\";\n  font-style: normal;\n  font-weight: 400;\n  src: url('../nano-assets/fonts/sc/noto-sans-sc-v37-chinese-simplified-regular.woff2') format('woff2'); \n}\n\n/* noto-sans-sc-500 - chinese-simplified_latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans SC\";\n  font-style: normal;\n  font-weight: 500;\n  src: url('../nano-assets/fonts/sc/noto-sans-sc-v37-chinese-simplified-500.woff2') format('woff2'); \n}\n\n/* noto-sans-sc-700 - chinese-simplified_latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans SC\";\n  font-style: normal;\n  font-weight: 700;\n  src: url('../nano-assets/fonts/sc/noto-sans-sc-v37-chinese-simplified-700.woff2') format('woff2'); \n}\n\n@font-face {\n  font-family: \"Noto Sans SC Fallback: Arial\";\n  src: local(\"Arial\");\n}","*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n// ! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css\n\n// HTML5 display definitions\n// ==========================================================================\n\n// 1. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.\naudio,\ncanvas,\nprogress,\nvideo {\n  vertical-align: baseline; // 1\n}\n\n// Prevent modern browsers from displaying `audio` without controls.\n// Remove excess height in iOS 5 devices.\naudio:not([controls]) {\n  display: none;\n  block-size: 0;\n}\n\n// Text-level semantics\n// ==========================================================================\n\n// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.\nb,\nstrong {\n  font-weight: bold;\n}\n\n// Embedded content\n// ==========================================================================\n\n// Remove border when inside `a` element in IE 8/9/10.\nimg {\n  max-inline-size: 100%;\n  border: 0;\n}\n\n// Correct overflow not hidden in IE 9/10/11.\nsvg:not(:root) {\n  overflow: hidden;\n}\n\n// Grouping content\n// ==========================================================================\n\n// Address margin not present in IE 8/9 and Safari.\nfigure {\n  margin-block: 1em;\n  margin-inline: 40px;\n}\n\nhr {\n  block-size: 1px;\n  border-width: 0;\n  box-sizing: content-box;\n}\n\n// Contain overflow in all browsers.\npre {\n  overflow: auto;\n}\n\n// Address odd `em`-unit font size rendering in all browsers.\ncode,\nkbd,\npre,\nsamp {\n  font-family: monospace;\n  font-size: 1em;\n}\n\n// Forms\n// ==========================================================================\n\n// Known limitation: by default, Chrome and Safari on OS X allow very limited\n// styling of `select`, unless a `border` property is set.\n\n// 1. Correct color not being inherited.\n//    Known issue: affects color of disabled elements.\n// 2. Correct font properties not being inherited.\n// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\n//\n\nlabel,\ninput,\nselect,\ntextarea {\n  font-family: inherit;\n  line-height: normal;\n}\n\ntextarea {\n  overflow: auto;\n  block-size: auto;\n  font: inherit;\n  color: inherit;\n}\n\ntextarea::placeholder {\n  padding-inline-start: 2px;\n}\n\nform,\ninput,\noptgroup,\nselect {\n  margin: 0; // 3\n  font: inherit; // 2\n  color: inherit; // 1\n}\n\n// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n//    and `video` controls.\n// 2. Correct inability to style clickable `input` types in iOS.\n// 3. Improve usability and consistency of cursor style between image-type\n//    `input` and others.\nhtml input[type='button'],\ninput[type='reset'],\ninput[type='submit'] {\n  cursor: pointer; // 3\n  appearance: auto; // 2\n}\n\n// remove 300ms delay\na,\na div,\na span,\na ion-icon,\na ion-label,\nbutton,\nbutton div,\nbutton span,\nbutton ion-icon,\nbutton ion-label,\n.ion-tappable,\n[tappable],\n[tappable] div,\n[tappable] span,\n[tappable] ion-icon,\n[tappable] ion-label,\ninput,\ntextarea {\n  touch-action: manipulation;\n}\n\na ion-label,\nbutton ion-label {\n  pointer-events: none;\n}\n\nbutton {\n  border: 0;\n  border-radius: 0;\n  font-family: inherit;\n  font-style: inherit;\n  font-variant: inherit;\n  line-height: 1;\n  text-transform: none;\n  cursor: pointer;\n  appearance: auto;\n}\n\n[tappable] {\n  cursor: pointer;\n}\n\n// Re-set default cursor for disabled elements.\na[disabled],\nbutton[disabled],\nhtml input[disabled] {\n  cursor: default;\n}\n\n// Remove inner padding and border in Firefox 4+.\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n  padding: 0;\n  border: 0;\n}\n\n// Firefox's implementation doesn't respect box-sizing, padding, or width.\n// 1. Address box sizing set to `content-box` in IE 8/9/10.\n// 2. Remove excess padding in IE 8/9/10.\ninput[type='checkbox'],\ninput[type='radio'] {\n  padding: 0; // 2\n  box-sizing: border-box; // 1\n}\n\n// Fix the cursor style for Chrome's increment/decrement buttons. For certain\n// `font-size` values of the `input`, it causes the cursor style of the\n// decrement button to change from `default` to `text`.\ninput[type='number']::-webkit-inner-spin-button,\ninput[type='number']::-webkit-outer-spin-button {\n  block-size: auto;\n}\n\n// Remove inner padding and search cancel button in Safari and Chrome on OS X.\n// Safari (but not Chrome) clips the cancel button when the search input has\n// padding (and `textfield` appearance).\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-decoration {\n  appearance: none;\n}\n\n// Tables\n// ==========================================================================//\n\n// Remove most spacing between table cells.\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\ntd,\nth {\n  padding: 0;\n}\n\n[hidden] {\n  display: none !important;\n}\n","@use '../../global/style/utilities/mixins';\n\n// Structure\n// --------------------------------------------------\n// Adds structural css to the native html elements\n\n* {\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n  -webkit-tap-highlight-color: rgb(201 224 253 / 80%);\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\nhtml {\n  inline-size: 100%;\n  text-size-adjust: 100%;\n}\n\nbody {\n  @include mixins.font-smoothing();\n\n  margin: 0;\n  padding: 0;\n  text-rendering: optimizelegibility;\n}\n","@use 'sass:map';\n@use 'sass:list';\n@use 'sass:string';\n@use 'globals';\n\n@mixin input-cover() {\n  inset-block: 0;\n  inset-inline: auto;\n  margin: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin text-inherit() {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n}\n\n// A transition-friendly alternative to `display: none` for hiding content\n@mixin hidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden; // prevent tab stops and screen reader discovery\n}\n\n// Hides content visually while still making it available to screen readers\n@mixin visually-hide {\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map.keys($map);\n\n  @return list.nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: globals.$screen-breakpoints) {\n  $min: map.get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: globals.$screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) ==null, '', '-#{$name}');\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: globals.$screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  }\n\n  @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next(\n  $name,\n  $breakpoints: globals.$screen-breakpoints,\n  $breakpoint-names: map.keys($breakpoints)\n) {\n  $n: index($breakpoint-names, $name);\n\n  @return if(\n    $n < length($breakpoint-names),\n    list.nth($breakpoint-names, $n + 1),\n    null\n  );\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is calculated as the minimum of the current one.\n//\n//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-max($name, $breakpoints: globals.$screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @return if($min, breakpoint-min($name, $breakpoints), null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: globals.$screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  }\n\n  @else {\n    @content;\n  }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin host($hostCtx: null) {\n  $root: #{&};\n\n  @if $hostCtx {\n    @at-root :host(#{$hostCtx}) {\n      #{$root} {\n        @content;\n      }\n    }\n  }\n\n  @else {\n    @at-root :host {\n      #{$root} {\n        @content;\n      }\n    }\n  }\n}\n\n@mixin rtl-host($hostCtx: '') {\n  $root: #{&};\n\n  @at-root :host(#{$hostCtx}:dir(rtl)) {\n    @if string.length($root) > 0 {\n      #{$root} { @content; }\n    }\n\n @else {\n      @content;\n    }\n  }\n\n  @at-root :host-context([dir=\"rtl\"]) {\n    @if string.length($root) > 0 {\n      #{$root} { @content; }\n    }\n\n @else {\n      @content;\n    }\n  }\n}\n\n\n@mixin rtl() {\n  $root: #{&};\n\n  @at-root #{$root + '[dir=rtl]'} {\n    @content;\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), ' ');\n\n  @if $flip-rtl !=true or $viewBox==null {\n    @include multi-dir() {\n      background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n    }\n  }\n\n  @else {\n    $transform: \"transform='translate(#{list.nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: str-replace($flipped-url, '<path', '<path #{$transform}');\n    $flipped-url: str-replace($flipped-url, '<line', '<line #{$transform}');\n    $flipped-url: str-replace(\n      $flipped-url,\n      '<polygon',\n      '<polygon #{$transform}'\n    );\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr() {\n      background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n    }\n\n    @include rtl() {\n      background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');\n    }\n  }\n}\n\n@mixin background-position(\n  $horizontal,\n  $horizontal-amount: null,\n  $vertical: null,\n  $vertical-amount: null\n) {\n  @if $horizontal==start or $horizontal==end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n\n    @if $horizontal==start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    }\n\n    @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position:\n        $horizontal-ltr $horizontal-amount $vertical\n        $vertical-amount;\n    }\n\n    @include rtl() {\n      background-position:\n        $horizontal-rtl $horizontal-amount $vertical\n        $vertical-amount;\n    }\n  }\n\n  @else {\n    @include multi-dir() {\n      background-position:\n        $horizontal $horizontal-amount $vertical\n        $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis==start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  }\n\n  @else if $x-axis==end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  }\n\n  @else if $x-axis==left or $x-axis==right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  }\n\n  @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: str-replace($transform, 'translate3d(');\n      $transform: str-replace($transform, ')');\n\n      $coordinates: str-split($transform, ',');\n\n      $x: list.nth($coordinates, 1);\n      $y: list.nth($coordinates, 2);\n      $z: list.nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    }\n\n    @else {\n      @if $extra==null {\n        $extra: $transform;\n      }\n\n      @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x== '0' or $x==null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  }\n\n  @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n\n@mixin hide-scrollbar() {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    inline-size: 0;\n    block-size: 0;\n  }\n}\n","@use 'sass:map';\n@use 'tokens';\n@use '../utilities/mixins' as mx;\n\n/// @prop - Font weight of all headings\n$headings-font-weight: 600 !default;\n/// @prop - Line height of all headings\n$headings-line-height: 1.2 !default;\n/// @prop - Font size of heading level 1\n$h1-font-size: 28px !default;\n/// @prop - Font size of heading level 2\n$h2-font-size: 24px !default;\n/// @prop - Font size of heading level 3\n$h3-font-size: 22px !default;\n/// @prop - Font size of heading level 4\n$h4-font-size: 20px !default;\n/// @prop - Font size of heading level 5\n$h5-font-size: 18px !default;\n/// @prop - Font size of heading level 6\n$h6-font-size: 16px !default;\n\nhtml, body {\n  font-family: var(--nano-font-family);\n  font-weight: var(--nano-font-weight, 400);\n  color: tokens.$text-color;\n  font-size: var(--nano-base-font-size);\n}\n\na {\n  color: tokens.nano-color(primary, base);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-block: 16px 10px;\n  font-weight: $headings-font-weight;\n  line-height: $headings-line-height;\n}\n\nh1 {\n  margin-block-start: 10px;\n  font-size: $h1-font-size;\n}\n\nh2 {\n  margin-block-start: 18px;\n  font-size: $h2-font-size;\n}\n\nh3 {\n  font-size: $h3-font-size;\n}\n\nh4 {\n  font-size: $h4-font-size;\n}\n\nh5 {\n  font-size: $h5-font-size;\n}\n\nh6 {\n  font-size: $h6-font-size;\n}\n\nsmall {\n  font-size: 75%;\n}\n\nsub,\nsup {\n  position: relative;\n  font-size: 75%;\n  line-height: 0;\n  vertical-align: baseline;\n}\n\nsup {\n  inset-block-start: -0.5em;\n}\n\nsub {\n  inset-block-end: -0.25em;\n}\n\np {\n  font-size: 1.125rem;\n  line-height: 1.4;\n  margin-block: 0 1rem;\n\n  &.supporting {\n    font-size: 0.875rem;\n  }\n}\n\n.heading {\n  font-weight: 600;\n  line-height: 1.3;\n  margin-block: 0 1.5rem;\n  margin-inline: 0;\n\n  &__highlight {\n    color: map.get(tokens.$colors, blue);\n  }\n\n  @media print {\n    color: map.get(tokens.$colors, black);\n  }\n\n  &--one {\n    font-size: 2.5rem;\n\n    @include mx.media-breakpoint-up('md') {\n      font-size: 3.25rem;\n    }\n  }\n\n  &--two {\n    font-size: 1.5rem;\n\n    @include mx.media-breakpoint-up('md') {\n      font-size: 2rem;\n    }\n  }\n\n  &--three {\n    font-size: 1.125rem;\n\n    @include mx.media-breakpoint-up('md') {\n      font-size: 1.375rem;\n    }\n  }\n\n  &--four {\n    font-size: 1.125rem;\n  }\n\n  &--five {\n    font-size: 1rem;\n  }\n\n  &--light {\n    font-weight: 200;\n  }\n\n  &--upper {\n    text-transform: uppercase;\n  }\n\n  &--meta {\n    font-size: 0.875rem;\n    text-transform: uppercase;\n    letter-spacing: 1.3px;\n    font-weight: bold;\n    margin-block-end: 1rem;\n  }\n}\n","@use 'sass:map';\n@use 'sass:color';\n@use '../../utilities/colours' as utils;\n\n$colors: (\n  white: #fff,\n  lightblue: #90c6e7,\n  blue: color.adjust(#0084a9, $lightness: -4%),\n  darkblue: #0c5a71,\n  darkgrey: #455556,\n  palegrey: #b5aea7,\n  dimgrey: #918b86,\n  lightgrey: #e4e6e8,\n  mediumgrey: #687576,\n  green: #17bb75,\n  orange: #f57e20,\n  paleyellow: #ede797,\n  purple: #a53f97,\n  red: #ef4135,\n  yellow: #f5cc49,\n  background: #f0efed,\n  black: #4a4a4a,\n  // Bg Colors\n  celsius: #f0efed,\n  offwhite: #f9f9fb,\n  darkblue--faded: #005c75,\n  // Faded Colors\n  red--faded: #fee8de,\n  orange--faded: #feeddb,\n  yellow--faded: #fefcf2,\n  green--faded: #edf5f2,\n  blue--faded: #f2f7f9,\n  // Darkened Colours\n  blue--darker: #245a6f,\n  green--darker: #0b814f,\n  red--darker: #be2a20,\n  purple--darker: #772c6d,\n  orange--darker: #b95e17,\n  palegrey--darker: #8c8379,\n  lightblue--darker: #548caf,\n);\n\n// Text\n$dark-text-default: map.get($colors, black);\n$light-text-default: map.get($colors, white);\n\n// Theme\n$primary: map.get($colors, blue) !default;\n$secondary: map.get($colors, lightblue--darker) !default;\n$tertiary: map.get($colors, palegrey) !default;\n$success: map.get($colors, green) !default;\n$warning: map.get($colors, orange) !default;\n$danger: map.get($colors, red) !default;\n$light: map.get($colors, blue--faded) !default;\n$medium: map.get($colors, darkblue--faded) !default;\n$dark: map.get($colors, darkgrey) !default;\n\n// Theme css variables and variations\n$themes: (\n  primary: (\n    base: $primary,\n    contrast: utils.color-contrast($primary),\n    shade: utils.get-color-shade($primary),\n    tint: utils.get-color-tint($primary),\n  ),\n  secondary: (\n    base: $secondary,\n    contrast: utils.color-contrast($secondary),\n    shade: utils.get-color-shade($secondary),\n    tint: utils.get-color-tint($secondary),\n  ),\n  tertiary: (\n    base: $tertiary,\n    contrast: utils.color-contrast($tertiary),\n    shade: utils.get-color-shade($tertiary),\n    tint: utils.get-color-tint($tertiary),\n  ),\n  success: (\n    base: $success,\n    contrast: utils.color-contrast($tertiary),\n    shade: utils.get-color-shade($success),\n    tint: utils.get-color-tint($success),\n  ),\n  warning: (\n    base: $warning,\n    contrast: utils.color-contrast($warning),\n    shade: utils.get-color-shade($warning),\n    tint: utils.get-color-tint($warning),\n  ),\n  danger: (\n    base: $danger,\n    contrast: utils.color-contrast($danger),\n    shade: utils.get-color-shade($danger),\n    tint: utils.get-color-tint($danger),\n  ),\n  light: (\n    base: $light,\n    contrast: utils.color-contrast($light),\n    shade: utils.get-color-shade($light),\n    tint: utils.get-color-tint($light),\n  ),\n  medium: (\n    base: $medium,\n    contrast: utils.color-contrast($medium),\n    shade: utils.get-color-shade($medium),\n    tint: utils.get-color-tint($medium),\n  ),\n  dark: (\n    base: $dark,\n    contrast: utils.color-contrast($dark),\n    shade: utils.get-color-shade($dark),\n    tint: utils.get-color-tint($dark),\n  ),\n) !default;\n\n// Default Foreground and Background Colors\n// -------------------------------------------------------------------------------------------\n// Used internally to calculate the default steps\n\n$background-color-value: map.get($colors, background) !default;\n$background-color-rgb-value: utils.color-to-rgb-list(\n  $background-color-value\n) !default;\n\n$text-color-value: map.get($colors, black) !default;\n$text-color-rgb-value: utils.color-to-rgb-list($text-color-value) !default;\n\n$text-color: var(--nano-text-color, $text-color-value) !default;\n$text-color-rgb: var(--nano-text-color-rgb, $text-color-rgb-value) !default;\n\n$background-color: var(\n  --nano-background-color,\n  $background-color-value\n) !default;\n$background-color-rgb: var(\n  --nano-background-color-rgb,\n  $background-color-rgb-value\n) !default;\n\n\n@function nano-color($name, $variation, $alpha: null, $rgb: null) {\n  $values: map.get($themes, $name);\n  $value: map.get($values, $variation);\n  $variable: --nano-color-#{$name}-#{$variation};\n\n  @if ($variation == base) {\n    $variable: --nano-color-#{$name};\n  }\n\n  @if ($alpha) {\n    $value: utils.color-to-rgb-list($value);\n\n    @return rgb(var(#{$variable}-rgb, $value) / $alpha);\n  }\n\n  @if ($rgb) {\n    $value: utils.color-to-rgb-list($value);\n    $variable: #{$variable}-rgb;\n  }\n\n  @return var(#{$variable}, $value);\n}\n\n@mixin generate-color($color-name, $important: '') {\n  $value: map.get($themes, $color-name);\n\n  $base: map.get($value, base);\n  $contrast: map.get($value, contrast);\n  $shade: map.get($value, shade);\n  $tint: map.get($value, tint);\n\n  --nano-color-base: var(--nano-color-#{$color-name}, #{$base}) #{$important};\n  --nano-color-base-rgb:\n    var(\n      --nano-color-#{$color-name}-rgb,\n      #{utils.color-to-rgb-list($base)}\n    )\n    #{$important};\n  --nano-color-contrast:\n    var(--nano-color-#{$color-name}-contrast, #{$contrast})\n    #{$important};\n  --nano-color-contrast-rgb:\n    var(\n      --nano-color-#{$color-name}-contrast-rgb,\n      #{utils.color-to-rgb-list($contrast)}\n    )\n    #{$important};\n  --nano-color-shade: var(--nano-color-#{$color-name}-shade, #{$shade}) #{$important};\n  --nano-color-tint: var(--nano-color-#{$color-name}-tint, #{$tint}) #{$important};\n  --nano-color-tint-rgb:\n    var(\n      --nano-color-#{$color-name}-tint-rgb,\n      #{utils.color-to-rgb-list($tint)}\n    )\n    #{$important};\n}\n","@use 'sass:map';\n@use 'tokens';\n\n.button {\n  @include tokens.button-base;\n}\n\n.button--primary {\n  @include tokens.button-standard(\n    #{tokens.nano-color(primary, base)},\n    #{tokens.nano-color(primary, contrast)},\n    #{tokens.nano-color(primary, shade)}\n  );\n}\n\n.button--secondary {\n  @include tokens.button-standard(\n    map.get(tokens.$colors, green),\n    map.get(tokens.$colors, white),\n    map.get(tokens.$colors, green--darker)\n  );\n}\n\n.button--light {\n  @include tokens.button-standard(\n    map.get(tokens.$colors, white),\n    map.get(tokens.$colors, blue),\n    map.get(tokens.$colors, white),\n    map.get(tokens.$colors, darkblue)\n  );\n}\n\n.button--danger {\n  @include tokens.button-standard(\n    map.get(tokens.$colors, red),\n    map.get(tokens.$colors, white),\n    map.get(tokens.$colors, red--darker)\n  );\n}\n\n.button--warning {\n  @include tokens.button-standard(\n    map.get(tokens.$colors, orange),\n    map.get(tokens.$colors, white),\n    map.get(tokens.$colors, orange--darker)\n  );\n}\n\n.button--tertiary {\n  background: transparent;\n  box-shadow: none;\n  text-decoration: underline;\n  font-weight: 400;\n\n  &:hover,\n  &:focus {\n    &:not(.button--disabled):not(:disabled),\n    &.button--active {\n      color: map.get(tokens.$colors, palegrey);\n      box-shadow: none;\n      text-decoration: underline;\n    }\n  }\n}\n","/// Strips browser styling from an input.\n\n@mixin unstyled-input($outline: false) {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  font: inherit;\n  -webkit-box-align: center;\n\n  @if $outline == false {\n    outline: none;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n  }\n}\n","/// Displays an anchor as plain text.\n\n@mixin unstyled-anchor {\n  text-decoration: none;\n  color: inherit;\n\n  &:hover,\n  &:focus {\n    text-decoration: none;\n    color: inherit;\n  }\n}\n","@use '../../utilities/css-patterns' as patterns;\n@use 'layers';\n@use 'form';\n\n// Border\n$btn-border-radius: var(--nano-btn-border-radius, 5px);\n$btn-border-width: var(--nano-btn-border-width, 2px);\n$btn-border-style: var(--nano-btn-border-style, solid);\n\n// Spacing\n$btn-padding-top: var(--nano-btn-padding-top, 0.5rem);\n$btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5rem);\n$btn-padding-start: var(--nano-btn-padding-start, 1rem);\n$btn-padding-end: var(--nano-btn-padding-end, 1rem);\n$btn-line-height: var(--nano-btn-line-height, 1.5em);\n\n// Misc\n$btn-icon-size: var(--nano-btn-icon-size, 1em);\n\n@mixin transition-hover {\n  transition:\n    background-color 100ms ease-in-out,\n    box-shadow 100ms ease-in-out,\n    border-color 100ms ease-in-out,\n    color 100ms ease-in-out;\n}\n\n@mixin button-keyline {\n  background: transparent;\n  border-style: #{$btn-border-style};\n  border-width: #{$btn-border-width};\n  border-radius: #{$btn-border-radius};\n  padding-block:\n    calc(#{$btn-padding-top} - #{$btn-border-width})\n    calc(#{$btn-padding-bottom} - #{$btn-border-width});\n\n  &:hover:not(.button--disabled):not(:disabled),\n  &:not(:focus):not(.button--focus),\n  &.button--active {\n    box-shadow: none;\n  }\n}\n\n@mixin button-standard($bg, $font, $bg-hover: false, $font-hover: false) {\n  $font-hover: if($font-hover, $font-hover, $font);\n  $bg-hover: if($bg-hover, $bg-hover, $bg);\n\n  background-color: $bg;\n  color: $font;\n\n  &:hover:not(.button--disabled):not(:disabled),\n  &.button--active {\n    background-color: $bg-hover;\n    color: $font-hover;\n\n    &.button--keyline {\n      background-color: $bg;\n      color: $font;\n    }\n  }\n\n  &:focus {\n    color: $font;\n  }\n\n  &.button--keyline {\n    @include button-keyline;\n\n    color: $bg;\n    border-color: $bg;\n  }\n}\n\n@mixin button-base {\n  @include patterns.unstyled-input($outline: true);\n  @include patterns.unstyled-anchor;\n  @include transition-hover;\n\n  padding-inline: #{$btn-padding-start} #{$btn-padding-end};\n  padding-block: #{$btn-padding-top} #{$btn-padding-bottom};\n  box-shadow: #{layers.$layer-shadow-medium};\n  display: inline-block;\n  border-radius: #{$btn-border-radius};\n  line-height: #{$btn-line-height};\n  font-weight: 400;\n  cursor: pointer;\n  background: rgb(0 0 0 / 2%);\n\n  @media print {\n    display: none;\n  }\n\n  &:focus,\n  &.button--focus {\n    outline: none;\n    box-shadow: #{form.$control-focus-style};\n  }\n\n  nano-icon,\n  nano-spinner {\n    --base-color-rgb: 255 255 255;\n\n    margin-inline: 0.5em 0;\n    font-size: #{$btn-icon-size};\n    vertical-align: middle;\n    margin-block-start: -0.188em;\n    display: inline-block;\n  }\n\n  &.button--icon-start {\n    nano-icon,\n    nano-spinner {\n      margin-inline: 0 0.5em;\n    }\n  }\n\n  &:hover:not(.button--disabled) {\n    box-shadow: #{layers.$layer-shadow-large};\n  }\n\n  &:active:not(.button--disabled):not(:disabled) {\n    box-shadow: none;\n  }\n\n  &--disabled,\n  &:disabled {\n    opacity: 0.6;\n\n    &:hover {\n      cursor: default;\n    }\n  }\n}\n","@use 'base/noto-sans';\n@use 'base/noto-sans-jp';\n@use 'base/noto-sans-sc';\n@use 'base/normalize';\n@use 'base/structure';\n@use '../global/style/utilities/mixins' as mx;\n@use '../global/style/nano-theme/typography';\n@use '../global/style/nano-theme/buttons';\n\n:root {\n  --nano-base-font-size: 16px;\n  --nano-padding: 1rem;\n\n  @include mx.media-breakpoint-down('sm') {\n    --nano-base-font-size: 14px;\n  }\n}\n\nhtml {\n  --nano-font-family: 'Noto Sans', 'Noto Sans Fallback: Arial', arial, sans-serif;\n\n  font-family: 'Noto Sans', 'Noto Sans Fallback: Arial', arial, sans-serif;\n\n  &[lang^='ja-'] {\n    --nano-font-family: 'Noto Sans JP','Noto Sans JP Fallback: Arial', arial, sans-serif;\n\n    font-family: 'Noto Sans JP','Noto Sans JP Fallback: Arial', arial, sans-serif;\n\n    // no italics in japanese\n    em, i {\n      font-style: normal !important;\n    }\n  }\n\n  &[lang^='zh-'] {\n    --nano-font-family: 'Noto Sans SC', 'Noto Sans SC Fallback: Arial', arial,sans-serif;\n\n    font-family: 'Noto Sans SC', 'Noto Sans SC Fallback: Arial', arial,sans-serif;\n\n    // no italics in chinese\n    em, i {\n      font-style: normal !important;\n    }\n  }\n}"]}

package/themes/nanopore.css

@@ -1 +0,0 @@
-@font-face{font-display:swap;font-family:"Noto Sans";font-style:normal;font-weight:400;src:url("../nano-assets/fonts/latin/noto-sans-v38-latin-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Noto Sans";font-style:italic;font-weight:400;src:url("../nano-assets/fonts/latin/noto-sans-v38-latin-italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Noto Sans";font-style:normal;font-weight:500;src:url("../nano-assets/fonts/latin/noto-sans-v38-latin-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Noto Sans";font-style:italic;font-weight:500;src:url("../nano-assets/fonts/latin/noto-sans-v38-latin-500italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Noto Sans";font-style:normal;font-weight:700;src:url("../nano-assets/fonts/latin/noto-sans-v38-latin-700.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Noto Sans";font-style:italic;font-weight:700;src:url("../nano-assets/fonts/latin/noto-sans-v38-latin-700italic.woff2") format("woff2")}@font-face{font-family:"Noto Sans SC Fallback: Arial";src:local("Arial")}@font-face{font-display:swap;font-family:"Noto Sans JP";font-style:normal;font-weight:400;src:url("../nano-assets/fonts/jp/noto-sans-jp-v53-japanese-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Noto Sans JP";font-style:normal;font-weight:500;src:url("../nano-assets/fonts/jp/noto-sans-jp-v53-japanese-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Noto Sans JP";font-style:normal;font-weight:700;src:url("../nano-assets/fonts/jp/noto-sans-jp-v53-japanese-700.woff2") format("woff2")}@font-face{font-family:"Noto Sans JP Fallback: Arial";src:local("Arial")}@font-face{font-display:swap;font-family:"Noto Sans SC";font-style:normal;font-weight:400;src:url("../nano-assets/fonts/sc/noto-sans-sc-v37-chinese-simplified-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Noto Sans SC";font-style:normal;font-weight:500;src:url("../nano-assets/fonts/sc/noto-sans-sc-v37-chinese-simplified-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Noto Sans SC";font-style:normal;font-weight:700;src:url("../nano-assets/fonts/sc/noto-sans-sc-v37-chinese-simplified-700.woff2") format("woff2")}@font-face{font-family:"Noto Sans SC Fallback: Arial";src:local("Arial")}*,*::before,*::after{box-sizing:border-box}audio,canvas,progress,video{vertical-align:baseline}audio:not([controls]){display:none;block-size:0}b,strong{font-weight:bold}img{max-inline-size:100%;border:0}svg:not(:root){overflow:hidden}figure{margin-block:1em;margin-inline:40px}hr{block-size:1px;border-width:0;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}label,input,select,textarea{font-family:inherit;line-height:normal}textarea{overflow:auto;block-size:auto;font:inherit;color:inherit}textarea::placeholder{padding-inline-start:2px}form,input,optgroup,select{margin:0;font:inherit;color:inherit}html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;appearance:auto}a,a div,a span,a ion-icon,a ion-label,button,button div,button span,button ion-icon,button ion-label,.ion-tappable,[tappable],[tappable] div,[tappable] span,[tappable] ion-icon,[tappable] ion-label,input,textarea{touch-action:manipulation}a ion-label,button ion-label{pointer-events:none}button{border:0;border-radius:0;font-family:inherit;font-style:inherit;font-variant:inherit;line-height:1;text-transform:none;cursor:pointer;appearance:auto}[tappable]{cursor:pointer}a[disabled],button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input[type=checkbox],input[type=radio]{padding:0;box-sizing:border-box}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{block-size:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{appearance:none}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}[hidden]{display:none !important}*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none}button,input,select,textarea{-webkit-tap-highlight-color:rgba(201,224,253,.8)}*,*::before,*::after{box-sizing:border-box;font-family:inherit}html{inline-size:100%;text-size-adjust:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:0;padding:0;text-rendering:optimizelegibility}html,body{font-family:var(--nano-font-family);font-weight:var(--nano-font-weight, 400);color:var(--nano-text-color, #4a4a4a);font-size:var(--nano-base-font-size)}a{color:var(--nano-color-primary, #007495);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-block:16px 10px;font-weight:600;line-height:1.2}h1{margin-block-start:10px;font-size:28px}h2{margin-block-start:18px;font-size:24px}h3{font-size:22px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{inset-block-start:-0.5em}sub{inset-block-end:-0.25em}p{font-size:1.125rem;line-height:1.4;margin-block:0 1rem}p.supporting{font-size:.875rem}.heading{font-weight:600;line-height:1.3;margin-block:0 1.5rem;margin-inline:0}.heading__highlight{color:#007495}@media print{.heading{color:#4a4a4a}}.heading--one{font-size:2.5rem}@media(min-width: 768px){.heading--one{font-size:3.25rem}}.heading--two{font-size:1.5rem}@media(min-width: 768px){.heading--two{font-size:2rem}}.heading--three{font-size:1.125rem}@media(min-width: 768px){.heading--three{font-size:1.375rem}}.heading--four{font-size:1.125rem}.heading--five{font-size:1rem}.heading--light{font-weight:200}.heading--upper{text-transform:uppercase}.heading--meta{font-size:.875rem;text-transform:uppercase;letter-spacing:1.3px;font-weight:bold;margin-block-end:1rem}.button{padding:0;border:none;background-color:rgba(0,0,0,0);font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out,box-shadow 100ms ease-in-out,border-color 100ms ease-in-out,color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0,0,0,.02)}.button::-moz-focus-inner{border:0;padding:0}.button:hover,.button:focus{text-decoration:none;color:inherit}@media print{.button{display:none}}.button:focus,.button.button--focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.button nano-icon,.button nano-spinner{--base-color-rgb: 255 255 255;margin-inline:.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.button.button--icon-start nano-icon,.button.button--icon-start nano-spinner{margin-inline:0 .5em}.button:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.button:active:not(.button--disabled):not(:disabled){box-shadow:none}.button--disabled,.button:disabled{opacity:.6}.button--disabled:hover,.button:disabled:hover{cursor:default}.button--primary{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled),.button--primary.button--active{background-color:var(--nano-color-primary-shade, #00637f);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--primary.button--active.button--keyline{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:focus{color:var(--nano-color-primary-contrast, #fff)}.button--primary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--nano-color-primary, #007495);border-color:var(--nano-color-primary, #007495)}.button--primary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--primary.button--keyline:not(:focus):not(.button--focus),.button--primary.button--keyline.button--active{box-shadow:none}.button--secondary{background-color:#17bb75;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled),.button--secondary.button--active{background-color:#0b814f;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--secondary.button--active.button--keyline{background-color:#17bb75;color:#fff}.button--secondary:focus{color:#fff}.button--secondary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#17bb75;border-color:#17bb75}.button--secondary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--secondary.button--keyline:not(:focus):not(.button--focus),.button--secondary.button--keyline.button--active{box-shadow:none}.button--light{background-color:#fff;color:#007495}.button--light:hover:not(.button--disabled):not(:disabled),.button--light.button--active{background-color:#fff;color:#0c5a71}.button--light:hover:not(.button--disabled):not(:disabled).button--keyline,.button--light.button--active.button--keyline{background-color:#fff;color:#007495}.button--light:focus{color:#007495}.button--light.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#fff;border-color:#fff}.button--light.button--keyline:hover:not(.button--disabled):not(:disabled),.button--light.button--keyline:not(:focus):not(.button--focus),.button--light.button--keyline.button--active{box-shadow:none}.button--danger{background-color:#ef4135;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled),.button--danger.button--active{background-color:#be2a20;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled).button--keyline,.button--danger.button--active.button--keyline{background-color:#ef4135;color:#fff}.button--danger:focus{color:#fff}.button--danger.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#ef4135;border-color:#ef4135}.button--danger.button--keyline:hover:not(.button--disabled):not(:disabled),.button--danger.button--keyline:not(:focus):not(.button--focus),.button--danger.button--keyline.button--active{box-shadow:none}.button--warning{background-color:#f57e20;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled),.button--warning.button--active{background-color:#b95e17;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled).button--keyline,.button--warning.button--active.button--keyline{background-color:#f57e20;color:#fff}.button--warning:focus{color:#fff}.button--warning.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#f57e20;border-color:#f57e20}.button--warning.button--keyline:hover:not(.button--disabled):not(:disabled),.button--warning.button--keyline:not(:focus):not(.button--focus),.button--warning.button--keyline.button--active{box-shadow:none}.button--tertiary{background:rgba(0,0,0,0);box-shadow:none;text-decoration:underline;font-weight:400}.button--tertiary:hover:not(.button--disabled):not(:disabled),.button--tertiary:hover.button--active,.button--tertiary:focus:not(.button--disabled):not(:disabled),.button--tertiary:focus.button--active{color:#b5aea7;box-shadow:none;text-decoration:underline}.nano-color-primary{--nano-color-base: var(--nano-color-primary, #007495) ;--nano-color-base-rgb: var( --nano-color-primary-rgb, 0 116 149 ) ;--nano-color-contrast: var(--nano-color-primary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-primary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-primary-shade, #00637f) ;--nano-color-tint: var(--nano-color-primary-tint, #2689a5) ;--nano-color-tint-rgb: var( --nano-color-primary-tint-rgb, 38 137 165 ) }.nano-color-secondary{--nano-color-base: var(--nano-color-secondary, #548caf) ;--nano-color-base-rgb: var( --nano-color-secondary-rgb, 84 140 175 ) ;--nano-color-contrast: var(--nano-color-secondary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-secondary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-secondary-shade, #477795) ;--nano-color-tint: var(--nano-color-secondary-tint, #6e9dbb) ;--nano-color-tint-rgb: var( --nano-color-secondary-tint-rgb, 110 157 187 ) }.nano-color-tertiary{--nano-color-base: var(--nano-color-tertiary, #b5aea7) ;--nano-color-base-rgb: var( --nano-color-tertiary-rgb, 181 174 167 ) ;--nano-color-contrast: var(--nano-color-tertiary-contrast, #000) ;--nano-color-contrast-rgb: var( --nano-color-tertiary-contrast-rgb, 0 0 0 ) ;--nano-color-shade: var(--nano-color-tertiary-shade, #9a948e) ;--nano-color-tint: var(--nano-color-tertiary-tint, #c0bab4) ;--nano-color-tint-rgb: var( --nano-color-tertiary-tint-rgb, 192 186 180 ) }.nano-color-success{--nano-color-base: var(--nano-color-success, #17bb75) ;--nano-color-base-rgb: var( --nano-color-success-rgb, 23 187 117 ) ;--nano-color-contrast: var(--nano-color-success-contrast, #000) ;--nano-color-contrast-rgb: var( --nano-color-success-contrast-rgb, 0 0 0 ) ;--nano-color-shade: var(--nano-color-success-shade, #149f63) ;--nano-color-tint: var(--nano-color-success-tint, #3ac58a) ;--nano-color-tint-rgb: var( --nano-color-success-tint-rgb, 58 197 138 ) }.nano-color-warning{--nano-color-base: var(--nano-color-warning, #f57e20) ;--nano-color-base-rgb: var( --nano-color-warning-rgb, 245 126 32 ) ;--nano-color-contrast: var(--nano-color-warning-contrast, #000) ;--nano-color-contrast-rgb: var( --nano-color-warning-contrast-rgb, 0 0 0 ) ;--nano-color-shade: var(--nano-color-warning-shade, #d06b1b) ;--nano-color-tint: var(--nano-color-warning-tint, #f79141) ;--nano-color-tint-rgb: var( --nano-color-warning-tint-rgb, 247 145 65 ) }.nano-color-danger{--nano-color-base: var(--nano-color-danger, #ef4135) ;--nano-color-base-rgb: var( --nano-color-danger-rgb, 239 65 53 ) ;--nano-color-contrast: var(--nano-color-danger-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-danger-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-danger-shade, #cb372d) ;--nano-color-tint: var(--nano-color-danger-tint, #f15e53) ;--nano-color-tint-rgb: var( --nano-color-danger-tint-rgb, 241 94 83 ) }.nano-color-light{--nano-color-base: var(--nano-color-light, #f2f7f9) ;--nano-color-base-rgb: var( --nano-color-light-rgb, 242 247 249 ) ;--nano-color-contrast: var(--nano-color-light-contrast, #000) ;--nano-color-contrast-rgb: var( --nano-color-light-contrast-rgb, 0 0 0 ) ;--nano-color-shade: var(--nano-color-light-shade, #ced2d4) ;--nano-color-tint: var(--nano-color-light-tint, #f4f8fa) ;--nano-color-tint-rgb: var( --nano-color-light-tint-rgb, 244 248 250 ) }.nano-color-medium{--nano-color-base: var(--nano-color-medium, #005c75) ;--nano-color-base-rgb: var( --nano-color-medium-rgb, 0 92 117 ) ;--nano-color-contrast: var(--nano-color-medium-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-medium-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-medium-shade, #004e63) ;--nano-color-tint: var(--nano-color-medium-tint, #26748a) ;--nano-color-tint-rgb: var( --nano-color-medium-tint-rgb, 38 116 138 ) }.nano-color-dark{--nano-color-base: var(--nano-color-dark, #455556) ;--nano-color-base-rgb: var( --nano-color-dark-rgb, 69 85 86 ) ;--nano-color-contrast: var(--nano-color-dark-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-dark-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-dark-shade, #3b4849) ;--nano-color-tint: var(--nano-color-dark-tint, #616f6f) ;--nano-color-tint-rgb: var( --nano-color-dark-tint-rgb, 97 111 111 ) }:root{--nano-base-font-size: 16px;--nano-padding: 1rem;--nano-color-white:#fff;--nano-color-white-rgb:255 255 255;--nano-color-lightblue:#90c6e7;--nano-color-lightblue-rgb:144 198 231;--nano-color-blue:#007495;--nano-color-blue-rgb:0 116 149;--nano-color-darkblue:#0c5a71;--nano-color-darkblue-rgb:12 90 113;--nano-color-darkgrey:#455556;--nano-color-darkgrey-rgb:69 85 86;--nano-color-palegrey:#b5aea7;--nano-color-palegrey-rgb:181 174 167;--nano-color-dimgrey:#918b86;--nano-color-dimgrey-rgb:145 139 134;--nano-color-lightgrey:#e4e6e8;--nano-color-lightgrey-rgb:228 230 232;--nano-color-mediumgrey:#687576;--nano-color-mediumgrey-rgb:104 117 118;--nano-color-green:#17bb75;--nano-color-green-rgb:23 187 117;--nano-color-orange:#f57e20;--nano-color-orange-rgb:245 126 32;--nano-color-paleyellow:#ede797;--nano-color-paleyellow-rgb:237 231 151;--nano-color-purple:#a53f97;--nano-color-purple-rgb:165 63 151;--nano-color-red:#ef4135;--nano-color-red-rgb:239 65 53;--nano-color-yellow:#f5cc49;--nano-color-yellow-rgb:245 204 73;--nano-color-background:#f0efed;--nano-color-background-rgb:240 239 237;--nano-color-black:#4a4a4a;--nano-color-black-rgb:74 74 74;--nano-color-celsius:#f0efed;--nano-color-celsius-rgb:240 239 237;--nano-color-offwhite:#f9f9fb;--nano-color-offwhite-rgb:249 249 251;--nano-color-darkblue--faded:#005c75;--nano-color-darkblue--faded-rgb:0 92 117;--nano-color-red--faded:#fee8de;--nano-color-red--faded-rgb:254 232 222;--nano-color-orange--faded:#feeddb;--nano-color-orange--faded-rgb:254 237 219;--nano-color-yellow--faded:#fefcf2;--nano-color-yellow--faded-rgb:254 252 242;--nano-color-green--faded:#edf5f2;--nano-color-green--faded-rgb:237 245 242;--nano-color-blue--faded:#f2f7f9;--nano-color-blue--faded-rgb:242 247 249;--nano-color-blue--darker:#245a6f;--nano-color-blue--darker-rgb:36 90 111;--nano-color-green--darker:#0b814f;--nano-color-green--darker-rgb:11 129 79;--nano-color-red--darker:#be2a20;--nano-color-red--darker-rgb:190 42 32;--nano-color-purple--darker:#772c6d;--nano-color-purple--darker-rgb:119 44 109;--nano-color-orange--darker:#b95e17;--nano-color-orange--darker-rgb:185 94 23;--nano-color-palegrey--darker:#8c8379;--nano-color-palegrey--darker-rgb:140 131 121;--nano-color-lightblue--darker:#548caf;--nano-color-lightblue--darker-rgb:84 140 175}@media(max-width: 576px){:root{--nano-base-font-size: 14px}}html{--nano-font-family: "Noto Sans", "Noto Sans Fallback: Arial", arial, sans-serif;font-family:"Noto Sans","Noto Sans Fallback: Arial",arial,sans-serif}html[lang^=ja-]{--nano-font-family: "Noto Sans JP","Noto Sans JP Fallback: Arial", arial, sans-serif;font-family:"Noto Sans JP","Noto Sans JP Fallback: Arial",arial,sans-serif}html[lang^=ja-] em,html[lang^=ja-] i{font-style:normal !important}html[lang^=zh-]{--nano-font-family: "Noto Sans SC", "Noto Sans SC Fallback: Arial", arial,sans-serif;font-family:"Noto Sans SC","Noto Sans SC Fallback: Arial",arial,sans-serif}html[lang^=zh-] em,html[lang^=zh-] i{font-style:normal !important}body{background-color:var(--nano-background-color, #f0efed)}hr,.horizontal-rule,.content-divider{display:block;block-size:1px;border:0;background-color:rgba(181,174,167,.5);margin-block:.5em;margin-inline:0;padding:0}area[href]:not([tabindex="-1"]):focus,iframe:not([tabindex="-1"]):focus,[contentEditable=true]:not([tabindex="-1"]):focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));border-radius:3px}/*# sourceMappingURL=nanopore.css.map */

package/themes/nanopore.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/themes/base/noto-sans.scss","../src/themes/base/noto-sans-jp.scss","../src/themes/base/noto-sans-sc.scss","../src/themes/base/normalize.scss","../src/themes/base/structure.scss","../src/global/style/utilities/_mixins.scss","../src/global/style/nano-theme/typography.scss","../src/global/style/nano-theme/tokens/_colours.scss","../src/global/style/nano-theme/buttons.scss","../src/global/style/utilities/css-patterns/_unstyled_input.scss","../src/global/style/utilities/css-patterns/_unstyled_anchor.scss","../src/global/style/nano-theme/tokens/_button.scss","../src/themes/nanopore.scss","../src/global/style/nano-theme/tokens/_form.scss"],"names":[],"mappings":"AACA,WACE,kBACA,wBACA,kBACA,gBACA,wFAIF,WACE,kBACA,wBACA,kBACA,gBACA,uFAIF,WACE,kBACA,wBACA,kBACA,gBACA,oFAIF,WACE,kBACA,wBACA,kBACA,gBACA,0FAIF,WACE,kBACA,wBACA,kBACA,gBACA,oFAIF,WACE,kBACA,wBACA,kBACA,gBACA,0FAGF,WACE,2CACA,mBCvDF,WACE,kBACA,2BACA,kBACA,gBACA,2FAIF,WACE,kBACA,2BACA,kBACA,gBACA,uFAIF,WACE,kBACA,2BACA,kBACA,gBACA,uFAGF,WACE,2CACA,mBC5BF,WACE,kBACA,2BACA,kBACA,gBACA,qGAIF,WACE,kBACA,2BACA,kBACA,gBACA,iGAIF,WACE,kBACA,2BACA,kBACA,gBACA,iGAGF,WACE,2CACA,mBC7BF,qBAGE,sBASF,4BAIE,wBAKF,sBACE,aACA,aAOF,SAEE,iBAOF,IACE,qBACA,SAIF,eACE,gBAOF,OACE,iBACA,mBAGF,GACE,eACA,eACA,uBAIF,IACE,cAIF,kBAIE,sBACA,cAeF,4BAIE,oBACA,mBAGF,SACE,cACA,gBACA,aACA,cAGF,sBACE,yBAGF,2BAIE,SACA,aACA,cAQF,6DAGE,eACA,gBAIF,qNAkBE,0BAGF,6BAEE,oBAGF,OACE,SACA,gBACA,oBACA,mBACA,qBACA,cACA,oBACA,eACA,gBAGF,WACE,eAIF,kDAGE,eAIF,iDAEE,UACA,SAMF,uCAEE,UACA,sBAMF,4FAEE,gBAMF,+FAEE,gBAOF,MACE,yBACA,iBAGF,MAEE,UAGF,SACE,wBC7NF,EACE,sBACA,0CACA,0CACA,2BAGF,6BAIE,iDAGF,qBAGE,sBACA,oBAGF,KACE,iBACA,sBAGF,KCiCE,kCACA,mCD/BA,SACA,UACA,kCEhBF,UACE,oCACA,yCACA,MCuGW,gCDtGX,qCAGF,EACE,yCACA,qBAEA,QACE,0BAIJ,kBAME,uBACA,YAvCqB,IAwCrB,YAtCqB,IAyCvB,GACE,wBACA,UAzCa,KA4Cf,GACE,wBACA,UA5Ca,KA+Cf,GACE,UA9Ca,KAiDf,GACE,UAhDa,KAmDf,GACE,UAlDa,KAqDf,GACE,UApDa,KAuDf,MACE,cAGF,QAEE,kBACA,cACA,cACA,wBAGF,IACE,yBAGF,IACE,wBAGF,EACE,mBACA,gBACA,oBAEA,aACE,kBAIJ,SACE,gBACA,gBACA,sBACA,gBAEA,oBACE,cAGF,aAVF,SAWI,eAGF,cACE,iBDHA,yBCEF,cAII,mBAIJ,cACE,iBDXA,yBCUF,cAII,gBAIJ,gBACE,mBDnBA,yBCkBF,gBAII,oBAIJ,eACE,mBAGF,eACE,eAGF,gBACE,gBAGF,gBACE,yBAGF,eACE,kBACA,yBACA,qBACA,iBACA,sBEhKJ,kBCCE,YACA,+BACA,aACA,yBCJA,qBACA,cCgBA,WACE,uHAyDF,qFACA,yFACA,yEACA,qBACA,iDACA,+CACA,gBACA,eACA,2BFzEA,0BACE,SACA,UCTF,4BAEE,qBACA,cC+EF,aHrFF,QGsFI,cAGF,oCAEE,aACA,wHAGF,uCAEE,8BAEA,qBACA,yCACA,sBACA,4BACA,qBAIA,6EAEE,qBAIJ,qCACE,wEAGF,qDACE,gBAGF,mCAEE,WAEA,+CACE,eH1HN,iBGwCE,iBHtCE,mCGuCF,MHtCE,yCGwCF,6FAEE,iBAPS,yCAQT,MATW,yCAWX,6HACE,iBH/CF,mCGgDE,MH/CF,yCGmDF,uBACE,MHpDA,yCGuDF,iCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MH3DA,mCG4DA,aH5DA,mCG2BF,8LAGE,gBHxBJ,mBGgCE,iBH9BE,QG+BF,MH9BE,KGgCF,iGAEE,iBAPS,QAQT,MATW,KAWX,iIACE,iBHvCF,QGwCE,MHvCF,KG2CF,yBACE,MH5CA,KG+CF,mCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MHnDA,QGoDA,aHpDA,QGmBF,oMAGE,gBHhBJ,eGwBE,iBHtBE,KGuBF,MHtBE,QGwBF,yFAEE,iBAPS,KAQT,MATW,QAWX,yHACE,iBH/BF,KGgCE,MH/BF,QGmCF,qBACE,MHpCA,QGuCF,+BArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MH3CA,KG4CA,aH5CA,KGWF,wLAGE,gBHPJ,gBGeE,iBHbE,QGcF,MHbE,KGeF,2FAEE,iBAPS,QAQT,MATW,KAWX,2HACE,iBHtBF,QGuBE,MHtBF,KG0BF,sBACE,MH3BA,KG8BF,gCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MHlCA,QGmCA,aHnCA,QGEF,2LAGE,gBHCJ,iBGOE,iBHLE,QGMF,MHLE,KGOF,6FAEE,iBAPS,QAQT,MATW,KAWX,6HACE,iBHdF,QGeE,MHdF,KGkBF,uBACE,MHnBA,KGsBF,iCArCA,yBACA,iDACA,+CACA,iDACA,cACE,+JAmCA,MH1BA,QG2BA,aH3BA,QGNF,8LAGE,gBHSJ,kBACE,yBACA,gBACA,0BACA,gBAIE,0MAEE,cACA,gBACA,0BIhDJ,oBL+JA,uDACA,mEAMA,iEAGA,kFAMA,8DACA,4DACA,yEKjLA,sBL+JA,yDACA,sEAMA,mEAGA,oFAMA,gEACA,8DACA,4EKjLA,qBL+JA,wDACA,sEAMA,kEAGA,6EAMA,+DACA,6DACA,2EKjLA,oBL+JA,uDACA,oEAMA,iEAGA,4EAMA,8DACA,4DACA,yEKjLA,oBL+JA,uDACA,oEAMA,iEAGA,4EAMA,8DACA,4DACA,yEKjLA,mBL+JA,sDACA,kEAMA,gEAGA,iFAMA,6DACA,2DACA,uEKjLA,kBL+JA,qDACA,mEAMA,+DAGA,0EAMA,4DACA,0DACA,wEKjLA,mBL+JA,sDACA,iEAMA,gEAGA,iFAMA,6DACA,2DACA,wEKjLA,iBL+JA,oDACA,+DAMA,8DAGA,+EAMA,2DACA,yDACA,sEK5KF,MACE,4BACA,qBAGE,wBACA,mCADA,+BACA,uCADA,0BACA,gCADA,8BACA,oCADA,8BACA,mCADA,8BACA,sCADA,6BACA,qCADA,+BACA,uCADA,gCACA,wCADA,2BACA,kCADA,4BACA,mCADA,gCACA,wCADA,4BACA,mCADA,yBACA,+BADA,4BACA,mCADA,gCACA,wCADA,2BACA,gCADA,6BACA,qCADA,8BACA,sCADA,qCACA,0CADA,gCACA,wCADA,mCACA,2CADA,mCACA,2CADA,kCACA,0CADA,iCACA,yCADA,kCACA,wCADA,mCACA,yCADA,iCACA,uCADA,oCACA,2CADA,oCACA,0CADA,sCACA,8CADA,uCACA,8CP8IA,yBOpJJ,MAUI,6BAIJ,KACE,gFAEA,qEAEA,gBACE,qFAEA,2EAGA,qCACE,6BAIJ,gBACE,qFAEA,2EAGA,qCACE,6BAKN,KACE,iBLsEiB,sCKnEnB,qCAGE,cACA,eACA,SACA,sCACA,kBACA,gBACA,UAMA,0HACE,aACA,WCsCkB,6GDrClB","file":"nanopore.css","sourcesContent":["/* noto-sans-regular - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: normal;\n  font-weight: 400;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-regular.woff2') format('woff2'); \n}\n\n/* noto-sans-italic - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: italic;\n  font-weight: 400;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-italic.woff2') format('woff2'); \n}\n\n/* noto-sans-500 - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: normal;\n  font-weight: 500;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-500.woff2') format('woff2'); \n}\n\n/* noto-sans-500italic - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: italic;\n  font-weight: 500;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-500italic.woff2') format('woff2'); \n}\n\n/* noto-sans-700 - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: normal;\n  font-weight: 700;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-700.woff2') format('woff2'); \n}\n\n/* noto-sans-700italic - latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans\";\n  font-style: italic;\n  font-weight: 700;\n  src: url('../nano-assets/fonts/latin/noto-sans-v38-latin-700italic.woff2') format('woff2'); \n}\n\n@font-face {\n  font-family: \"Noto Sans SC Fallback: Arial\";\n  src: local(\"Arial\");\n}","/* noto-sans-jp-regular - japanese */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans JP\";\n  font-style: normal;\n  font-weight: 400;\n  src: url('../nano-assets/fonts/jp/noto-sans-jp-v53-japanese-regular.woff2') format('woff2'); \n}\n\n/* noto-sans-jp-500 - japanese */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans JP\";\n  font-style: normal;\n  font-weight: 500;\n  src: url('../nano-assets/fonts/jp/noto-sans-jp-v53-japanese-500.woff2') format('woff2'); \n}\n\n/* noto-sans-jp-700 - japanese */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans JP\";\n  font-style: normal;\n  font-weight: 700;\n  src: url('../nano-assets/fonts/jp/noto-sans-jp-v53-japanese-700.woff2') format('woff2'); \n}\n\n@font-face {\n  font-family: \"Noto Sans JP Fallback: Arial\";\n  src: local(\"Arial\");\n}","/* noto-sans-sc-regular - chinese-simplified_latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans SC\";\n  font-style: normal;\n  font-weight: 400;\n  src: url('../nano-assets/fonts/sc/noto-sans-sc-v37-chinese-simplified-regular.woff2') format('woff2'); \n}\n\n/* noto-sans-sc-500 - chinese-simplified_latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans SC\";\n  font-style: normal;\n  font-weight: 500;\n  src: url('../nano-assets/fonts/sc/noto-sans-sc-v37-chinese-simplified-500.woff2') format('woff2'); \n}\n\n/* noto-sans-sc-700 - chinese-simplified_latin */\n@font-face {\n  font-display: swap; \n  font-family: \"Noto Sans SC\";\n  font-style: normal;\n  font-weight: 700;\n  src: url('../nano-assets/fonts/sc/noto-sans-sc-v37-chinese-simplified-700.woff2') format('woff2'); \n}\n\n@font-face {\n  font-family: \"Noto Sans SC Fallback: Arial\";\n  src: local(\"Arial\");\n}","*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n// ! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css\n\n// HTML5 display definitions\n// ==========================================================================\n\n// 1. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.\naudio,\ncanvas,\nprogress,\nvideo {\n  vertical-align: baseline; // 1\n}\n\n// Prevent modern browsers from displaying `audio` without controls.\n// Remove excess height in iOS 5 devices.\naudio:not([controls]) {\n  display: none;\n  block-size: 0;\n}\n\n// Text-level semantics\n// ==========================================================================\n\n// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.\nb,\nstrong {\n  font-weight: bold;\n}\n\n// Embedded content\n// ==========================================================================\n\n// Remove border when inside `a` element in IE 8/9/10.\nimg {\n  max-inline-size: 100%;\n  border: 0;\n}\n\n// Correct overflow not hidden in IE 9/10/11.\nsvg:not(:root) {\n  overflow: hidden;\n}\n\n// Grouping content\n// ==========================================================================\n\n// Address margin not present in IE 8/9 and Safari.\nfigure {\n  margin-block: 1em;\n  margin-inline: 40px;\n}\n\nhr {\n  block-size: 1px;\n  border-width: 0;\n  box-sizing: content-box;\n}\n\n// Contain overflow in all browsers.\npre {\n  overflow: auto;\n}\n\n// Address odd `em`-unit font size rendering in all browsers.\ncode,\nkbd,\npre,\nsamp {\n  font-family: monospace;\n  font-size: 1em;\n}\n\n// Forms\n// ==========================================================================\n\n// Known limitation: by default, Chrome and Safari on OS X allow very limited\n// styling of `select`, unless a `border` property is set.\n\n// 1. Correct color not being inherited.\n//    Known issue: affects color of disabled elements.\n// 2. Correct font properties not being inherited.\n// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\n//\n\nlabel,\ninput,\nselect,\ntextarea {\n  font-family: inherit;\n  line-height: normal;\n}\n\ntextarea {\n  overflow: auto;\n  block-size: auto;\n  font: inherit;\n  color: inherit;\n}\n\ntextarea::placeholder {\n  padding-inline-start: 2px;\n}\n\nform,\ninput,\noptgroup,\nselect {\n  margin: 0; // 3\n  font: inherit; // 2\n  color: inherit; // 1\n}\n\n// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n//    and `video` controls.\n// 2. Correct inability to style clickable `input` types in iOS.\n// 3. Improve usability and consistency of cursor style between image-type\n//    `input` and others.\nhtml input[type='button'],\ninput[type='reset'],\ninput[type='submit'] {\n  cursor: pointer; // 3\n  appearance: auto; // 2\n}\n\n// remove 300ms delay\na,\na div,\na span,\na ion-icon,\na ion-label,\nbutton,\nbutton div,\nbutton span,\nbutton ion-icon,\nbutton ion-label,\n.ion-tappable,\n[tappable],\n[tappable] div,\n[tappable] span,\n[tappable] ion-icon,\n[tappable] ion-label,\ninput,\ntextarea {\n  touch-action: manipulation;\n}\n\na ion-label,\nbutton ion-label {\n  pointer-events: none;\n}\n\nbutton {\n  border: 0;\n  border-radius: 0;\n  font-family: inherit;\n  font-style: inherit;\n  font-variant: inherit;\n  line-height: 1;\n  text-transform: none;\n  cursor: pointer;\n  appearance: auto;\n}\n\n[tappable] {\n  cursor: pointer;\n}\n\n// Re-set default cursor for disabled elements.\na[disabled],\nbutton[disabled],\nhtml input[disabled] {\n  cursor: default;\n}\n\n// Remove inner padding and border in Firefox 4+.\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n  padding: 0;\n  border: 0;\n}\n\n// Firefox's implementation doesn't respect box-sizing, padding, or width.\n// 1. Address box sizing set to `content-box` in IE 8/9/10.\n// 2. Remove excess padding in IE 8/9/10.\ninput[type='checkbox'],\ninput[type='radio'] {\n  padding: 0; // 2\n  box-sizing: border-box; // 1\n}\n\n// Fix the cursor style for Chrome's increment/decrement buttons. For certain\n// `font-size` values of the `input`, it causes the cursor style of the\n// decrement button to change from `default` to `text`.\ninput[type='number']::-webkit-inner-spin-button,\ninput[type='number']::-webkit-outer-spin-button {\n  block-size: auto;\n}\n\n// Remove inner padding and search cancel button in Safari and Chrome on OS X.\n// Safari (but not Chrome) clips the cancel button when the search input has\n// padding (and `textfield` appearance).\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-decoration {\n  appearance: none;\n}\n\n// Tables\n// ==========================================================================//\n\n// Remove most spacing between table cells.\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\ntd,\nth {\n  padding: 0;\n}\n\n[hidden] {\n  display: none !important;\n}\n","@use '../../global/style/utilities/mixins';\n\n// Structure\n// --------------------------------------------------\n// Adds structural css to the native html elements\n\n* {\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n  -webkit-tap-highlight-color: rgb(201 224 253 / 80%);\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\nhtml {\n  inline-size: 100%;\n  text-size-adjust: 100%;\n}\n\nbody {\n  @include mixins.font-smoothing();\n\n  margin: 0;\n  padding: 0;\n  text-rendering: optimizelegibility;\n}\n","@use 'sass:map';\n@use 'sass:list';\n@use 'sass:string';\n@use 'globals';\n\n@mixin input-cover() {\n  inset-block: 0;\n  inset-inline: auto;\n  margin: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin text-inherit() {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n}\n\n// A transition-friendly alternative to `display: none` for hiding content\n@mixin hidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden; // prevent tab stops and screen reader discovery\n}\n\n// Hides content visually while still making it available to screen readers\n@mixin visually-hide {\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map.keys($map);\n\n  @return list.nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: globals.$screen-breakpoints) {\n  $min: map.get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: globals.$screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) ==null, '', '-#{$name}');\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: globals.$screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  }\n\n  @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next(\n  $name,\n  $breakpoints: globals.$screen-breakpoints,\n  $breakpoint-names: map.keys($breakpoints)\n) {\n  $n: index($breakpoint-names, $name);\n\n  @return if(\n    $n < length($breakpoint-names),\n    list.nth($breakpoint-names, $n + 1),\n    null\n  );\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is calculated as the minimum of the current one.\n//\n//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-max($name, $breakpoints: globals.$screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @return if($min, breakpoint-min($name, $breakpoints), null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: globals.$screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  }\n\n  @else {\n    @content;\n  }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin host($hostCtx: null) {\n  $root: #{&};\n\n  @if $hostCtx {\n    @at-root :host(#{$hostCtx}) {\n      #{$root} {\n        @content;\n      }\n    }\n  }\n\n  @else {\n    @at-root :host {\n      #{$root} {\n        @content;\n      }\n    }\n  }\n}\n\n@mixin rtl-host($hostCtx: '') {\n  $root: #{&};\n\n  @at-root :host(#{$hostCtx}:dir(rtl)) {\n    @if string.length($root) > 0 {\n      #{$root} { @content; }\n    }\n\n @else {\n      @content;\n    }\n  }\n\n  @at-root :host-context([dir=\"rtl\"]) {\n    @if string.length($root) > 0 {\n      #{$root} { @content; }\n    }\n\n @else {\n      @content;\n    }\n  }\n}\n\n\n@mixin rtl() {\n  $root: #{&};\n\n  @at-root #{$root + '[dir=rtl]'} {\n    @content;\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), ' ');\n\n  @if $flip-rtl !=true or $viewBox==null {\n    @include multi-dir() {\n      background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n    }\n  }\n\n  @else {\n    $transform: \"transform='translate(#{list.nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: str-replace($flipped-url, '<path', '<path #{$transform}');\n    $flipped-url: str-replace($flipped-url, '<line', '<line #{$transform}');\n    $flipped-url: str-replace(\n      $flipped-url,\n      '<polygon',\n      '<polygon #{$transform}'\n    );\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr() {\n      background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n    }\n\n    @include rtl() {\n      background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');\n    }\n  }\n}\n\n@mixin background-position(\n  $horizontal,\n  $horizontal-amount: null,\n  $vertical: null,\n  $vertical-amount: null\n) {\n  @if $horizontal==start or $horizontal==end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n\n    @if $horizontal==start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    }\n\n    @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position:\n        $horizontal-ltr $horizontal-amount $vertical\n        $vertical-amount;\n    }\n\n    @include rtl() {\n      background-position:\n        $horizontal-rtl $horizontal-amount $vertical\n        $vertical-amount;\n    }\n  }\n\n  @else {\n    @include multi-dir() {\n      background-position:\n        $horizontal $horizontal-amount $vertical\n        $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis==start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  }\n\n  @else if $x-axis==end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  }\n\n  @else if $x-axis==left or $x-axis==right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  }\n\n  @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: str-replace($transform, 'translate3d(');\n      $transform: str-replace($transform, ')');\n\n      $coordinates: str-split($transform, ',');\n\n      $x: list.nth($coordinates, 1);\n      $y: list.nth($coordinates, 2);\n      $z: list.nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    }\n\n    @else {\n      @if $extra==null {\n        $extra: $transform;\n      }\n\n      @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x== '0' or $x==null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  }\n\n  @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n\n@mixin hide-scrollbar() {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    inline-size: 0;\n    block-size: 0;\n  }\n}\n","@use 'sass:map';\n@use 'tokens';\n@use '../utilities/mixins' as mx;\n\n/// @prop - Font weight of all headings\n$headings-font-weight: 600 !default;\n/// @prop - Line height of all headings\n$headings-line-height: 1.2 !default;\n/// @prop - Font size of heading level 1\n$h1-font-size: 28px !default;\n/// @prop - Font size of heading level 2\n$h2-font-size: 24px !default;\n/// @prop - Font size of heading level 3\n$h3-font-size: 22px !default;\n/// @prop - Font size of heading level 4\n$h4-font-size: 20px !default;\n/// @prop - Font size of heading level 5\n$h5-font-size: 18px !default;\n/// @prop - Font size of heading level 6\n$h6-font-size: 16px !default;\n\nhtml, body {\n  font-family: var(--nano-font-family);\n  font-weight: var(--nano-font-weight, 400);\n  color: tokens.$text-color;\n  font-size: var(--nano-base-font-size);\n}\n\na {\n  color: tokens.nano-color(primary, base);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-block: 16px 10px;\n  font-weight: $headings-font-weight;\n  line-height: $headings-line-height;\n}\n\nh1 {\n  margin-block-start: 10px;\n  font-size: $h1-font-size;\n}\n\nh2 {\n  margin-block-start: 18px;\n  font-size: $h2-font-size;\n}\n\nh3 {\n  font-size: $h3-font-size;\n}\n\nh4 {\n  font-size: $h4-font-size;\n}\n\nh5 {\n  font-size: $h5-font-size;\n}\n\nh6 {\n  font-size: $h6-font-size;\n}\n\nsmall {\n  font-size: 75%;\n}\n\nsub,\nsup {\n  position: relative;\n  font-size: 75%;\n  line-height: 0;\n  vertical-align: baseline;\n}\n\nsup {\n  inset-block-start: -0.5em;\n}\n\nsub {\n  inset-block-end: -0.25em;\n}\n\np {\n  font-size: 1.125rem;\n  line-height: 1.4;\n  margin-block: 0 1rem;\n\n  &.supporting {\n    font-size: 0.875rem;\n  }\n}\n\n.heading {\n  font-weight: 600;\n  line-height: 1.3;\n  margin-block: 0 1.5rem;\n  margin-inline: 0;\n\n  &__highlight {\n    color: map.get(tokens.$colors, blue);\n  }\n\n  @media print {\n    color: map.get(tokens.$colors, black);\n  }\n\n  &--one {\n    font-size: 2.5rem;\n\n    @include mx.media-breakpoint-up('md') {\n      font-size: 3.25rem;\n    }\n  }\n\n  &--two {\n    font-size: 1.5rem;\n\n    @include mx.media-breakpoint-up('md') {\n      font-size: 2rem;\n    }\n  }\n\n  &--three {\n    font-size: 1.125rem;\n\n    @include mx.media-breakpoint-up('md') {\n      font-size: 1.375rem;\n    }\n  }\n\n  &--four {\n    font-size: 1.125rem;\n  }\n\n  &--five {\n    font-size: 1rem;\n  }\n\n  &--light {\n    font-weight: 200;\n  }\n\n  &--upper {\n    text-transform: uppercase;\n  }\n\n  &--meta {\n    font-size: 0.875rem;\n    text-transform: uppercase;\n    letter-spacing: 1.3px;\n    font-weight: bold;\n    margin-block-end: 1rem;\n  }\n}\n","@use 'sass:map';\n@use 'sass:color';\n@use '../../utilities/colours' as utils;\n\n$colors: (\n  white: #fff,\n  lightblue: #90c6e7,\n  blue: color.adjust(#0084a9, $lightness: -4%),\n  darkblue: #0c5a71,\n  darkgrey: #455556,\n  palegrey: #b5aea7,\n  dimgrey: #918b86,\n  lightgrey: #e4e6e8,\n  mediumgrey: #687576,\n  green: #17bb75,\n  orange: #f57e20,\n  paleyellow: #ede797,\n  purple: #a53f97,\n  red: #ef4135,\n  yellow: #f5cc49,\n  background: #f0efed,\n  black: #4a4a4a,\n  // Bg Colors\n  celsius: #f0efed,\n  offwhite: #f9f9fb,\n  darkblue--faded: #005c75,\n  // Faded Colors\n  red--faded: #fee8de,\n  orange--faded: #feeddb,\n  yellow--faded: #fefcf2,\n  green--faded: #edf5f2,\n  blue--faded: #f2f7f9,\n  // Darkened Colours\n  blue--darker: #245a6f,\n  green--darker: #0b814f,\n  red--darker: #be2a20,\n  purple--darker: #772c6d,\n  orange--darker: #b95e17,\n  palegrey--darker: #8c8379,\n  lightblue--darker: #548caf,\n);\n\n// Text\n$dark-text-default: map.get($colors, black);\n$light-text-default: map.get($colors, white);\n\n// Theme\n$primary: map.get($colors, blue) !default;\n$secondary: map.get($colors, lightblue--darker) !default;\n$tertiary: map.get($colors, palegrey) !default;\n$success: map.get($colors, green) !default;\n$warning: map.get($colors, orange) !default;\n$danger: map.get($colors, red) !default;\n$light: map.get($colors, blue--faded) !default;\n$medium: map.get($colors, darkblue--faded) !default;\n$dark: map.get($colors, darkgrey) !default;\n\n// Theme css variables and variations\n$themes: (\n  primary: (\n    base: $primary,\n    contrast: utils.color-contrast($primary),\n    shade: utils.get-color-shade($primary),\n    tint: utils.get-color-tint($primary),\n  ),\n  secondary: (\n    base: $secondary,\n    contrast: utils.color-contrast($secondary),\n    shade: utils.get-color-shade($secondary),\n    tint: utils.get-color-tint($secondary),\n  ),\n  tertiary: (\n    base: $tertiary,\n    contrast: utils.color-contrast($tertiary),\n    shade: utils.get-color-shade($tertiary),\n    tint: utils.get-color-tint($tertiary),\n  ),\n  success: (\n    base: $success,\n    contrast: utils.color-contrast($tertiary),\n    shade: utils.get-color-shade($success),\n    tint: utils.get-color-tint($success),\n  ),\n  warning: (\n    base: $warning,\n    contrast: utils.color-contrast($warning),\n    shade: utils.get-color-shade($warning),\n    tint: utils.get-color-tint($warning),\n  ),\n  danger: (\n    base: $danger,\n    contrast: utils.color-contrast($danger),\n    shade: utils.get-color-shade($danger),\n    tint: utils.get-color-tint($danger),\n  ),\n  light: (\n    base: $light,\n    contrast: utils.color-contrast($light),\n    shade: utils.get-color-shade($light),\n    tint: utils.get-color-tint($light),\n  ),\n  medium: (\n    base: $medium,\n    contrast: utils.color-contrast($medium),\n    shade: utils.get-color-shade($medium),\n    tint: utils.get-color-tint($medium),\n  ),\n  dark: (\n    base: $dark,\n    contrast: utils.color-contrast($dark),\n    shade: utils.get-color-shade($dark),\n    tint: utils.get-color-tint($dark),\n  ),\n) !default;\n\n// Default Foreground and Background Colors\n// -------------------------------------------------------------------------------------------\n// Used internally to calculate the default steps\n\n$background-color-value: map.get($colors, background) !default;\n$background-color-rgb-value: utils.color-to-rgb-list(\n  $background-color-value\n) !default;\n\n$text-color-value: map.get($colors, black) !default;\n$text-color-rgb-value: utils.color-to-rgb-list($text-color-value) !default;\n\n$text-color: var(--nano-text-color, $text-color-value) !default;\n$text-color-rgb: var(--nano-text-color-rgb, $text-color-rgb-value) !default;\n\n$background-color: var(\n  --nano-background-color,\n  $background-color-value\n) !default;\n$background-color-rgb: var(\n  --nano-background-color-rgb,\n  $background-color-rgb-value\n) !default;\n\n\n@function nano-color($name, $variation, $alpha: null, $rgb: null) {\n  $values: map.get($themes, $name);\n  $value: map.get($values, $variation);\n  $variable: --nano-color-#{$name}-#{$variation};\n\n  @if ($variation == base) {\n    $variable: --nano-color-#{$name};\n  }\n\n  @if ($alpha) {\n    $value: utils.color-to-rgb-list($value);\n\n    @return rgb(var(#{$variable}-rgb, $value) / $alpha);\n  }\n\n  @if ($rgb) {\n    $value: utils.color-to-rgb-list($value);\n    $variable: #{$variable}-rgb;\n  }\n\n  @return var(#{$variable}, $value);\n}\n\n@mixin generate-color($color-name, $important: '') {\n  $value: map.get($themes, $color-name);\n\n  $base: map.get($value, base);\n  $contrast: map.get($value, contrast);\n  $shade: map.get($value, shade);\n  $tint: map.get($value, tint);\n\n  --nano-color-base: var(--nano-color-#{$color-name}, #{$base}) #{$important};\n  --nano-color-base-rgb:\n    var(\n      --nano-color-#{$color-name}-rgb,\n      #{utils.color-to-rgb-list($base)}\n    )\n    #{$important};\n  --nano-color-contrast:\n    var(--nano-color-#{$color-name}-contrast, #{$contrast})\n    #{$important};\n  --nano-color-contrast-rgb:\n    var(\n      --nano-color-#{$color-name}-contrast-rgb,\n      #{utils.color-to-rgb-list($contrast)}\n    )\n    #{$important};\n  --nano-color-shade: var(--nano-color-#{$color-name}-shade, #{$shade}) #{$important};\n  --nano-color-tint: var(--nano-color-#{$color-name}-tint, #{$tint}) #{$important};\n  --nano-color-tint-rgb:\n    var(\n      --nano-color-#{$color-name}-tint-rgb,\n      #{utils.color-to-rgb-list($tint)}\n    )\n    #{$important};\n}\n","@use 'sass:map';\n@use 'tokens';\n\n.button {\n  @include tokens.button-base;\n}\n\n.button--primary {\n  @include tokens.button-standard(\n    #{tokens.nano-color(primary, base)},\n    #{tokens.nano-color(primary, contrast)},\n    #{tokens.nano-color(primary, shade)}\n  );\n}\n\n.button--secondary {\n  @include tokens.button-standard(\n    map.get(tokens.$colors, green),\n    map.get(tokens.$colors, white),\n    map.get(tokens.$colors, green--darker)\n  );\n}\n\n.button--light {\n  @include tokens.button-standard(\n    map.get(tokens.$colors, white),\n    map.get(tokens.$colors, blue),\n    map.get(tokens.$colors, white),\n    map.get(tokens.$colors, darkblue)\n  );\n}\n\n.button--danger {\n  @include tokens.button-standard(\n    map.get(tokens.$colors, red),\n    map.get(tokens.$colors, white),\n    map.get(tokens.$colors, red--darker)\n  );\n}\n\n.button--warning {\n  @include tokens.button-standard(\n    map.get(tokens.$colors, orange),\n    map.get(tokens.$colors, white),\n    map.get(tokens.$colors, orange--darker)\n  );\n}\n\n.button--tertiary {\n  background: transparent;\n  box-shadow: none;\n  text-decoration: underline;\n  font-weight: 400;\n\n  &:hover,\n  &:focus {\n    &:not(.button--disabled):not(:disabled),\n    &.button--active {\n      color: map.get(tokens.$colors, palegrey);\n      box-shadow: none;\n      text-decoration: underline;\n    }\n  }\n}\n","/// Strips browser styling from an input.\n\n@mixin unstyled-input($outline: false) {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  font: inherit;\n  -webkit-box-align: center;\n\n  @if $outline == false {\n    outline: none;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n  }\n}\n","/// Displays an anchor as plain text.\n\n@mixin unstyled-anchor {\n  text-decoration: none;\n  color: inherit;\n\n  &:hover,\n  &:focus {\n    text-decoration: none;\n    color: inherit;\n  }\n}\n","@use '../../utilities/css-patterns' as patterns;\n@use 'layers';\n@use 'form';\n\n// Border\n$btn-border-radius: var(--nano-btn-border-radius, 5px);\n$btn-border-width: var(--nano-btn-border-width, 2px);\n$btn-border-style: var(--nano-btn-border-style, solid);\n\n// Spacing\n$btn-padding-top: var(--nano-btn-padding-top, 0.5rem);\n$btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5rem);\n$btn-padding-start: var(--nano-btn-padding-start, 1rem);\n$btn-padding-end: var(--nano-btn-padding-end, 1rem);\n$btn-line-height: var(--nano-btn-line-height, 1.5em);\n\n// Misc\n$btn-icon-size: var(--nano-btn-icon-size, 1em);\n\n@mixin transition-hover {\n  transition:\n    background-color 100ms ease-in-out,\n    box-shadow 100ms ease-in-out,\n    border-color 100ms ease-in-out,\n    color 100ms ease-in-out;\n}\n\n@mixin button-keyline {\n  background: transparent;\n  border-style: #{$btn-border-style};\n  border-width: #{$btn-border-width};\n  border-radius: #{$btn-border-radius};\n  padding-block:\n    calc(#{$btn-padding-top} - #{$btn-border-width})\n    calc(#{$btn-padding-bottom} - #{$btn-border-width});\n\n  &:hover:not(.button--disabled):not(:disabled),\n  &:not(:focus):not(.button--focus),\n  &.button--active {\n    box-shadow: none;\n  }\n}\n\n@mixin button-standard($bg, $font, $bg-hover: false, $font-hover: false) {\n  $font-hover: if($font-hover, $font-hover, $font);\n  $bg-hover: if($bg-hover, $bg-hover, $bg);\n\n  background-color: $bg;\n  color: $font;\n\n  &:hover:not(.button--disabled):not(:disabled),\n  &.button--active {\n    background-color: $bg-hover;\n    color: $font-hover;\n\n    &.button--keyline {\n      background-color: $bg;\n      color: $font;\n    }\n  }\n\n  &:focus {\n    color: $font;\n  }\n\n  &.button--keyline {\n    @include button-keyline;\n\n    color: $bg;\n    border-color: $bg;\n  }\n}\n\n@mixin button-base {\n  @include patterns.unstyled-input($outline: true);\n  @include patterns.unstyled-anchor;\n  @include transition-hover;\n\n  padding-inline: #{$btn-padding-start} #{$btn-padding-end};\n  padding-block: #{$btn-padding-top} #{$btn-padding-bottom};\n  box-shadow: #{layers.$layer-shadow-medium};\n  display: inline-block;\n  border-radius: #{$btn-border-radius};\n  line-height: #{$btn-line-height};\n  font-weight: 400;\n  cursor: pointer;\n  background: rgb(0 0 0 / 2%);\n\n  @media print {\n    display: none;\n  }\n\n  &:focus,\n  &.button--focus {\n    outline: none;\n    box-shadow: #{form.$control-focus-style};\n  }\n\n  nano-icon,\n  nano-spinner {\n    --base-color-rgb: 255 255 255;\n\n    margin-inline: 0.5em 0;\n    font-size: #{$btn-icon-size};\n    vertical-align: middle;\n    margin-block-start: -0.188em;\n    display: inline-block;\n  }\n\n  &.button--icon-start {\n    nano-icon,\n    nano-spinner {\n      margin-inline: 0 0.5em;\n    }\n  }\n\n  &:hover:not(.button--disabled) {\n    box-shadow: #{layers.$layer-shadow-large};\n  }\n\n  &:active:not(.button--disabled):not(:disabled) {\n    box-shadow: none;\n  }\n\n  &--disabled,\n  &:disabled {\n    opacity: 0.6;\n\n    &:hover {\n      cursor: default;\n    }\n  }\n}\n","@use 'sass:map';\n@use '../global/style/utilities' as mx;\n@use '../global/style/nano-theme/tokens' as tokens;\n@use 'base/noto-sans';\n@use 'base/noto-sans-jp';\n@use 'base/noto-sans-sc';\n@use 'base/normalize';\n@use 'base/structure';\n@use '../global/style/nano-theme/typography';\n@use '../global/style/nano-theme/buttons';\n\n@each $color-name, $value in tokens.$themes {\n  .nano-color-#{$color-name} {\n    @include tokens.generate-color($color-name);\n  }\n}\n\n:root {\n  --nano-base-font-size: 16px;\n  --nano-padding: 1rem;\n\n  @each $key, $value in tokens.$colors {\n    #{'--nano-color-' + $key}: #{$value};\n    #{'--nano-color-' + $key + '-rgb'}: #{mx.color-to-rgb-list($value)};\n  }\n\n  @include mx.media-breakpoint-down('sm') {\n    --nano-base-font-size: 14px;\n  }\n}\n\nhtml {\n  --nano-font-family: 'Noto Sans', 'Noto Sans Fallback: Arial', arial, sans-serif;\n\n  font-family: 'Noto Sans', 'Noto Sans Fallback: Arial', arial, sans-serif;\n\n  &[lang^='ja-'] {\n    --nano-font-family: 'Noto Sans JP','Noto Sans JP Fallback: Arial', arial, sans-serif;\n\n    font-family: 'Noto Sans JP','Noto Sans JP Fallback: Arial', arial, sans-serif;\n\n    // no italics in japanese\n    em, i {\n      font-style: normal !important;\n    }\n  }\n\n  &[lang^='zh-'] {\n    --nano-font-family: 'Noto Sans SC', 'Noto Sans SC Fallback: Arial', arial,sans-serif;\n\n    font-family: 'Noto Sans SC', 'Noto Sans SC Fallback: Arial', arial,sans-serif;\n\n    // no italics in chinese\n    em, i {\n      font-style: normal !important;\n    }\n  }\n}\n\nbody {\n  background-color: tokens.$background-color;\n}\n\nhr,\n.horizontal-rule,\n.content-divider {\n  display: block;\n  block-size: 1px;\n  border: 0;\n  background-color: rgba(map.get(tokens.$colors, palegrey), 0.5);\n  margin-block: 0.5em;\n  margin-inline: 0;\n  padding: 0;\n}\n\narea[href]:not([tabindex='-1']),\niframe:not([tabindex='-1']),\n[contentEditable='true']:not([tabindex='-1']) {\n  &:focus {\n    outline: none;\n    box-shadow: tokens.$control-focus-style;\n    border-radius: 3px;\n  }\n}\n","@use 'sass:map';\n@use 'sass:color';\n@use '../../utilities/colours' as mx;\n@use 'colours' as tokens;\n\n// Defaults\n\n$df-input-padding-top: 8px;\n$df-input-padding-bottom: 6px;\n$df-input-padding-start: 8px;\n$df-input-padding-end: 8px;\n\n$df-input-background-color: map.get(tokens.$colors, white);\n$df-input-background-color--invalid: white;\n\n$df-input-text-color: tokens.$text-color-value;\n$df-input-font-size: 0.87em;\n\n$df-input-border-width: 1px;\n$df-input-border-style: solid;\n$df-input-border-radius: 0;\n\n$df-input-border-color: map.get(tokens.$colors, lightgrey);\n$df-input-border--focus-color: map.get(tokens.$colors, lightblue);\n$df-input-border--invalid-color: map.get(tokens.$colors, lightgrey);\n$df-input-border--invalid-focus-color: map.get(tokens.$colors, red);\n\n$df-clear-btn-color: rgb(0 0 0 / 30%);\n$df-clear-btn-color--invalid: color.adjust(map.get(tokens.$colors, red), $lightness: 30%);\n\n$df-label-color: 'currentcolor';\n$df-label-font-size: 1em;\n\n$df-input-help-font-size: 0.75em;\n$df-input-help-color: color.adjust(map.get(tokens.$colors, mediumgrey), $lightness: -3%);\n\n$df-input-tag-bg: mx.color-to-rgb-list(#badcf0);\n$df-input-tag-color: #455556;\n$df-input-tag-border-color: #badcf0;\n\n// Setup global / theme css variables with default fallbacks\n\n// Placeholders\n$input-placeholder-color: var(--nano-input-placeholder-color, initial);\n$input-placeholder-style: var(--nano-input-placeholder-style, initial);\n$input-placeholder-weight: var(--nano-input-placeholder-weight, initial);\n$input-placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n\n// Space around labels, help, errors and inside inputs\n$input-padding-bottom: var(\n  --nano-input-padding-bottom,\n  var(--nano-input-padding, $df-input-padding-bottom)\n);\n$input-padding-start: var(\n  --nano-input-padding-start,\n  var(--nano-input-padding, $df-input-padding-start)\n);\n$input-padding-end: var(\n  --nano-input-padding-end,\n  var(--nano-input-padding, $df-input-padding-end)\n);\n$input-padding-top: var(\n  --nano-input-padding-top,\n  var(--nano-input-padding, $df-input-padding-top)\n);\n\n// Input background\n$input-background-color: var(\n  --nano-input-background-color,\n  $df-input-background-color\n);\n$input-background-color--invalid: var(\n  --nano-input-background-color,\n  $df-input-background-color--invalid\n);\n\n// Input text\n$input-text-color: var(--nano-input-text-color, $df-input-text-color);\n$input-font-size: var(--nano-input-font-size, $df-input-font-size);\n\n// Input border\n$input-border-width: var(--nano-input-border-width, $df-input-border-width);\n$input-border-color: var(--nano-input-border-color, $df-input-border-color);\n$input-border-style: var(--nano-input-border-style, $df-input-border-style);\n$input-border-radius: var(--nano-input-border-radius, $df-input-border-radius);\n\n// Input border state variants\n$input-border--focus-color: var(\n  --nano-input-border-color--focus,\n  $df-input-border--focus-color\n);\n$input-border--invalid-color: var(\n  --nano-input-border-color--invalid,\n  $df-input-border--invalid-color\n);\n$input-border--invalid-focus-color: var(\n  --nano-input-border-color--invalid,\n  $df-input-border--invalid-focus-color\n);\n\n// Clear button\n$clear-btn-color: var(--nano-clear-btn-color, $df-clear-btn-color);\n$clear-btn-color--invalid: var(\n  --nano-clear-btn-color--invalid,\n  $df-clear-btn-color--invalid\n);\n\n// Label\n$label-color: var(--nano-input-label-color, $df-label-color);\n$label-color-invalid: var(--nano-input-label-color-invalid, $df-label-color);\n$label-font-size: var(--nano-input-label-color, $df-label-font-size);\n\n// Focus shadow / outline\n$control-focus-color: var(\n  --nano-control-focus-color,\n  rgba(map.get(tokens.$colors, lightblue), 0.8)\n);\n$control-focus-size: 0 0 0 0.1875rem;\n$control-focus-style: var(\n  --nano-control-focus-shadow,\n  #{$control-focus-size + ' ' $control-focus-color}\n);\n$control-invalid-style: var(\n  --nano-control-focus-shadow,\n  #{$control-focus-size + ' ' $df-input-border--invalid-color}\n);\n\n// Helper / Error text\n$input-help-font-size: var(\n  --nano-input-help-font-size,\n  $df-input-help-font-size\n);\n$input-help-color: var(--nano-input-help-color, $df-input-help-color);\n\n// General button\n$button-bg-color: var(--nano-button-color, #{map.get(tokens.$colors, celsius)});\n\n// Tags / Multi value\n$input-tag-bg: var(--nano-input-tag-bg, $df-input-tag-bg);\n$input-tag-color: var(--nano-input-tag-color, $df-input-tag-color);\n$input-tag-border-color: var(\n  --nano-input-tag-color,\n  $df-input-tag-border-color\n);\n\n// Select\n$select-opt-focus: var(\n  --nano-select-opt-bg,\n  color.adjust(map.get(tokens.$colors, blue--faded), $lightness: -5%)\n);\n$select-opt-selected: var(--nano-select-opt-bg, map.get(tokens.$colors, blue--faded));\n"]}