npm - @nanoporetech-digital/components - Versions diffs - 3.3.3 → 3.4.0 - Mend

@nanoporetech-digital/components 3.3.3 → 3.4.0

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

Files changed (59) hide show

package/dist/themes/nanopore.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../src/global/style/base/display.scss","../src/global/style/utilities/_mixins.scss","../src/global/style/base/normalize.scss","../src/global/style/base/structure.scss","../src/global/style/base/padding.scss","../src/global/style/nano-theme/_base.scss","../src/global/style/nano-theme/_helvetica-now.scss","../src/global/style/nano-theme/typography.scss","../src/global/style/nano-theme/_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/_button.scss","../src/global/style/nano-theme/theme.scss","../src/global/style/utilities/_colours.scss","../src/global/style/nano-theme/_form.scss"],"names":[],"mappings":"AAMA,WACE,wBAUE,cACE,wBAOF,gBACE,wBCqFF,yBD9FA,iBACE,yBC8IF,yBDvIA,mBACE,yBCqFF,yBD9FA,iBACE,yBC8IF,yBDvIA,mBACE,yBCqFF,yBD9FA,iBACE,yBC8IF,yBDvIA,mBACE,yBCqFF,0BD9FA,iBACE,yBC8IF,0BDvIA,mBACE,yBEpBN,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,0BAIF,qNAkBE,0BAGF,6BAEE,oBAGF,OACE,SACA,gBACA,oBACA,mBACA,qBACA,cACA,oBACA,eACA,0BAGF,WACE,eAIF,kDAGE,eAIF,iDAEE,UACA,SAMF,uCAEE,UACA,sBAMF,4FAEE,gBAMF,+FAEE,wBAOF,MACE,yBACA,iBAGF,MAEE,UCrNF,EACE,sBACA,0CACA,0CACA,2BAGF,6BAIE,iDAGF,qBAGE,sBACA,oBAGF,KACE,iBACA,sBAGF,KF8BE,kCACA,mCE5BA,SACA,UACA,kCCxBF,iBACE,mBACA,iBACA,iBACA,oBAEA,UAGF,cACE,kDACA,gDACA,gDACA,mDAEA,QCrBe,iCDwBjB,kBACE,gDAEA,oBC3Be,iCD8BjB,oBACE,kDAEA,qBCjCe,iCDoCjB,kBACE,gDAEA,mBCvCe,iCD0CjB,qBACE,mDAEA,kBC7Ce,iCDgDjB,uBACE,gDACA,mDAEA,cCpDe,iCDuDjB,yBACE,kDACA,gDAEA,eC3De,iCDiEjB,gBACE,kBACA,gBACA,gBACA,mBAEA,SAGF,aACE,iDACA,+CACA,+CACA,kDAEA,OChFe,iCDmFjB,iBACE,+CAEA,mBCtFe,iCDyFjB,mBACE,iDAEA,oBC5Fe,iCD+FjB,iBACE,+CAEA,kBClGe,iCDqGjB,oBACE,kDAEA,iBCxGe,iCD2GjB,sBACE,+CACA,kDAEA,aC/Ge,iCDkHjB,wBACE,iDACA,+CAEA,cCtHe,iCCiBjB,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAGF,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAGF,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAGF,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAGF,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAGF,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAKF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAKF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,sBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,sBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,sBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,sBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,sBACA,kBC3LF,KACE,oCACA,yCACA,MCsGW,gCDrGX,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,iBNVA,yBMSF,cAII,mBAIJ,cACE,iBNlBA,yBMiBF,cAII,gBAIJ,gBACE,mBN1BA,yBMyBF,gBAII,oBAIJ,eACE,mBAGF,eACE,eAGF,gBACE,gBAGF,gBACE,yBAGF,eACE,kBACA,yBACA,qBACA,iBACA,sBE/JJ,QCHE,UACA,YACA,+BACA,aACA,yBCJA,qBACA,cCgBA,WACE,uHAuDF,qFACA,yFACA,yEACA,qBACA,iDACA,+CACA,gBACA,eACA,2BFvEA,0BACE,SACA,UCTF,4BAEE,qBACA,cC6EF,aHhFF,QGiFI,cAGF,oCAEE,aACA,wHAGF,uCAEE,gCAEA,yBACA,oBACA,yCACA,sBACA,4BACA,qBAIA,6EAEE,sBACA,uBAIJ,qCACE,wEAGF,qDACE,gBAGF,mCAEE,WAEA,+CACE,eHvHN,iBGmCE,iBHjCE,mCGkCF,MHjCE,yCGmCF,6FAEE,iBAPS,yCAQT,MATW,yCAWX,6HACE,iBH1CF,mCG2CE,MH1CF,yCG8CF,uBACE,MH/CA,yCGkDF,iCAnCA,yBACA,iDACA,+CACA,iDACA,6KAkCE,MHtDA,mCGuDA,aHvDA,mCGsBF,8LAGE,gBHnBJ,mBG2BE,iBHzBE,QG0BF,MHzBE,KG2BF,iGAEE,iBAPS,QAQT,MATW,KAWX,iIACE,iBHlCF,QGmCE,MHlCF,KGsCF,yBACE,MHvCA,KG0CF,mCAnCA,yBACA,iDACA,+CACA,iDACA,6KAkCE,MH9CA,QG+CA,aH/CA,QGcF,oMAGE,gBHXJ,eGmBE,iBHjBE,KGkBF,MHjBE,QGmBF,yFAEE,iBAPS,KAQT,MATW,QAWX,yHACE,iBH1BF,KG2BE,MH1BF,QG8BF,qBACE,MH/BA,QGkCF,+BAnCA,yBACA,iDACA,+CACA,iDACA,6KAkCE,MHtCA,KGuCA,aHvCA,KGMF,wLAGE,gBHFJ,gBGUE,iBHTyB,QGUzB,MHVgD,KGYhD,2FAEE,iBAPS,QAQT,MATW,KAWX,2HACE,iBHlBqB,QGmBrB,MHnB4C,KGuBhD,sBACE,MHxB8C,KG2BhD,gCAnCA,yBACA,iDACA,+CACA,iDACA,6KAkCE,MH9BuB,QG+BvB,aH/BuB,QGFzB,2LAGE,gBHEJ,iBGME,iBHLyB,QGMzB,MHNmD,KGQnD,6FAEE,iBAPS,QAQT,MATW,KAWX,6HACE,iBHdqB,QGerB,MHf+C,KGmBnD,uBACE,MHpBiD,KGuBnD,iCAnCA,yBACA,iDACA,+CACA,iDACA,6KAkCE,MH1BuB,QG2BvB,aH3BuB,QGNzB,8LAGE,gBHMJ,kBACE,yBACA,gBACA,0BACA,gBAIE,0MAEE,cACA,gBACA,0BI5CJ,oBC0FA,uDACA,qEAMA,iEAGA,oFAMA,8DACA,4DACA,2ED5GA,sBC0FA,yDACA,wEAMA,mEAGA,sFAMA,gEACA,8DACA,8ED5GA,qBC0FA,wDACA,wEAMA,qEAGA,kFAMA,+DACA,6DACA,6ED5GA,oBC0FA,uDACA,sEAMA,oEAGA,iFAMA,8DACA,4DACA,2ED5GA,oBC0FA,uDACA,sEAMA,iEAGA,oFAMA,8DACA,4DACA,2ED5GA,mBC0FA,sDACA,oEAMA,gEAGA,mFAMA,6DACA,2DACA,yED5GA,kBC0FA,qDACA,qEAMA,kEAGA,+EAMA,4DACA,0DACA,0ED5GA,mBC0FA,sDACA,mEAMA,gEAGA,mFAMA,6DACA,2DACA,0ED5GA,iBC0FA,oDACA,iEAMA,8DAGA,iFAMA,2DACA,yDACA,wEDvGF,MACE,4BAMA,qBACA,oGASE,wBAEA,qCAFA,+BAEA,yCAFA,0BAEA,kCAFA,8BAEA,sCAFA,8BAEA,qCAFA,8BAEA,wCAFA,6BAEA,uCAFA,+BAEA,yCAFA,gCAEA,0CAFA,2BAEA,oCAFA,4BAEA,qCAFA,gCAEA,0CAFA,4BAEA,qCAFA,yBAEA,iCAFA,4BAEA,qCAFA,gCAEA,0CAFA,2BAEA,kCAFA,6BAEA,uCAFA,8BAEA,wCAFA,qCAEA,4CAFA,gCAEA,0CAFA,mCAEA,6CAFA,mCAEA,6CAFA,kCAEA,4CAFA,iCAEA,2CAFA,kCAEA,0CAFA,mCAEA,2CAFA,iCAEA,yCAFA,oCAEA,6CAFA,oCAEA,4CAFA,sCAEA,gDAFA,uCAEA,gDZ6HA,yBYhJJ,MAII,6BAmBJ,KACE,iBL2FiB,sCKxFnB,qCAGE,cACA,eACA,SACA,sCACA,kBACA,gBACA,UAMA,0HACE,aACA,WE0DkB,6GFzDlB","file":"nanopore.css","sourcesContent":["@import '../utilities/globals';\n\n// Display\n// --------------------------------------------------\n// Modifies display of a particular element based on the given classes\n\n.nano-hide {\n display: none !important;\n}\n\n// Adds hidden classes\n@each $breakpoint in map-keys($screen-breakpoints) {\n $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n // Provide `ion-hide-{bp}-up` classes for hiding the element based\n // on the breakpoint\n .nano-hide#{$infix}-up {\n display: none !important;\n }\n }\n\n @include media-breakpoint-down($breakpoint, $screen-breakpoints) {\n // Provide `ion-hide-{bp}-down` classes for hiding the element based\n // on the breakpoint\n .nano-hide#{$infix}-down {\n display: none !important;\n }\n }\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 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: $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: $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: $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: $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 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: $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: $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 #{$root} {\n @content;\n }\n }\n}\n\n@mixin ltr-host($hostCtx: '') {\n $root: #{&};\n\n @at-root :host(#{$hostCtx}:not([dir='rtl'])) {\n #{$root} {\n @content;\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(#{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: nth($coordinates, 1);\n $y: nth($coordinates, 2);\n $z: 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","// ! 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 -webkit-appearance: button; // 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 -webkit-appearance: button;\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 -webkit-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","// Structure\n// --------------------------------------------------\n// Adds structural css to the native html elements\n\n* {\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(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: rgba(201, 224, 253, 0.8);\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 font-smoothing();\n\n margin: 0;\n padding: 0;\n text-rendering: optimizeLegibility;\n}\n","@import '../nano-theme/base';\n@import '../utilities/globals';\n\n// Element Space\n// --------------------------------------------------\n// Creates padding and margin attributes to be used on\n// any element\n\n// Padding\n// --------------------------------------------------\n\n.nano-no-padding {\n --padding-start: 0;\n --padding-end: 0;\n --padding-top: 0;\n --padding-bottom: 0;\n\n padding: 0;\n}\n\n.nano-padding {\n --padding-start: #{$spacing-medium};\n --padding-end: #{$spacing-medium};\n --padding-top: #{$spacing-medium};\n --padding-bottom: #{$spacing-medium};\n\n padding: $spacing-medium;\n}\n\n.nano-padding-top {\n --padding-top: #{$spacing-medium};\n\n padding-block-start: $spacing-medium;\n}\n\n.nano-padding-start {\n --padding-start: #{$spacing-medium};\n\n padding-inline-start: $spacing-medium;\n}\n\n.nano-padding-end {\n --padding-end: #{$spacing-medium};\n\n padding-inline-end: $spacing-medium;\n}\n\n.nano-padding-bottom {\n --padding-bottom: #{$spacing-medium};\n\n padding-block-end: $spacing-medium;\n}\n\n.nano-padding-vertical {\n --padding-top: #{$spacing-medium};\n --padding-bottom: #{$spacing-medium};\n\n padding-block: $spacing-medium;\n}\n\n.nano-padding-horizontal {\n --padding-start: #{$spacing-medium};\n --padding-end: #{$spacing-medium};\n\n padding-inline: $spacing-medium;\n}\n\n// Margin\n// --------------------------------------------------\n\n.nano-no-margin {\n --margin-start: 0;\n --margin-end: 0;\n --margin-top: 0;\n --margin-bottom: 0;\n\n margin: 0;\n}\n\n.nano-margin {\n --margin-start: #{$spacing-medium};\n --margin-end: #{$spacing-medium};\n --margin-top: #{$spacing-medium};\n --margin-bottom: #{$spacing-medium};\n\n margin: $spacing-medium;\n}\n\n.nano-margin-top {\n --margin-top: #{$spacing-medium};\n\n margin-block-start: $spacing-medium;\n}\n\n.nano-margin-start {\n --margin-start: #{$spacing-medium};\n\n margin-inline-start: $spacing-medium;\n}\n\n.nano-margin-end {\n --margin-end: #{$spacing-medium};\n\n margin-inline-end: $spacing-medium;\n}\n\n.nano-margin-bottom {\n --margin-bottom: #{$spacing-medium};\n\n margin-block-end: $spacing-medium;\n}\n\n.nano-margin-vertical {\n --margin-top: #{$spacing-medium};\n --margin-bottom: #{$spacing-medium};\n\n margin-block: $spacing-medium;\n}\n\n.nano-margin-horizontal {\n --margin-start: #{$spacing-medium};\n --margin-end: #{$spacing-medium};\n\n margin-inline: $spacing-medium;\n}\n","// Setup global / theme css variables with default fallbacks\n\n// Padding, Margin\n$spacing-xsmall: var(--nano-spacing-xsmall, 4px);\n$spacing-small: var(--nano-spacing-small, 8px);\n$spacing-medium: var(--nano-spacing-medium, 16px);\n$spacing-large: var(--nano-spacing-large, 20px);\n$spacing-xlarge: var(--nano-spacing-xlarge, 24px);\n\n// Text\n$fontsize-xsmall: var(--nano-fontsize-xsmall, 0.625rem);\n$fontsize-small: var(--nano-fontsize-small, 0.875rem);\n$fontsize-medium: var(--nano-fontsize-medium, 1rem);\n$fontsize-large: var(--nano-fontsize-large, 1.25rem);\n$fontsize-xlarge: var(--nano-fontsize-xlarge, 1.5rem);\n\n// Border radius\n$border-radius-small: var(--nano-border-radius-small, 2px);\n$border-radius-medium: var(--nano-border-radius-medium, 4px);\n$border-radius-large: var(--nano-border-radius-large, 8px);\n$border-radius-xlarge: var(--nano-border-radius-xlarge, 16px);\n\n// Transition\n$transition-xslow: var(--nano-transition-x-slow, 1s);\n$transition-slow: var(--nano-transition-slow, 0.7s);\n$transition-medium: var(--nano-transition-medium, 0.5s);\n$transition-fast: var(--nano-transition-fast, 0.3s);\n$transition-xfast: var(--nano-transition-fast, 0.1s);\n","/\n @license\n * MyFonts Webfont Build ID 3183969,\n 2016-03-09T09:39:13-0500\n \n The fonts listed in this notice are subject to the End User License\n * Agreement(s) entered into by the website owner. All other parties are\n * explicitly restricted from using the Licensed Webfonts(s).\n \n You may obtain a valid license at the URLs below.\n \n \n * License: http://www.myfonts.com/viewlicense?type=web&buildid=3183969\n * Webfonts copyright: Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted © 1988 - 2006 Linotype GmbH,\n www.linotype.com. All rights reserved. This software is the property of Linotype GmbH,\n and may not be repro\n \n © 2016 MyFonts Inc\n/\n\n// Helvetica Now Display\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_1_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_1_0.woff') format('woff');\n font-weight: 400;\n font-style: normal;\n font-stretch: condensed;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_8_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_8_0.woff') format('woff');\n font-weight: 400;\n font-style: italic;\n font-stretch: condensed;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_5_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_5_0.woff') format('woff');\n font-weight: 600;\n font-style: normal;\n font-stretch: condensed;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_2_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_2_0.woff') format('woff');\n font-weight: 600;\n font-style: italic;\n font-stretch: condensed;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_9_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_9_0.woff') format('woff');\n font-weight: 200;\n font-style: normal;\n font-stretch: condensed;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_A_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_A_0.woff') format('woff');\n font-weight: 200;\n font-style: italic;\n font-stretch: condensed;\n font-display: swap;\n}\n\n// Helvetica Now Text\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_21_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_21_0.woff') format('woff');\n font-weight: 400;\n font-style: normal;\n font-stretch: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_28_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_28_0.woff') format('woff');\n font-weight: 400;\n font-style: italic;\n font-stretch: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_25_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_25_0.woff') format('woff');\n font-weight: 600;\n font-style: normal;\n font-stretch: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_22_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_22_0.woff') format('woff');\n font-weight: 600;\n font-style: italic;\n font-stretch: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_29_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_29_0.woff') format('woff');\n font-weight: 200;\n font-style: normal;\n font-stretch: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_2A_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_2A_0.woff') format('woff');\n font-weight: 200;\n font-style: italic;\n font-stretch: normal;\n font-display: swap;\n}\n\n// Helvetica Now Micro\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_15_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_15_0.woff') format('woff');\n font-weight: 400;\n font-style: normal;\n font-stretch: expanded;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_16_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_16_0.woff') format('woff');\n font-weight: 600;\n font-style: italic;\n font-stretch: expanded;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_17_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_17_0.woff') format('woff');\n font-weight: 600;\n font-style: normal;\n font-stretch: expanded;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_1B_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_1B_0.woff') format('woff');\n font-weight: 200;\n font-style: normal;\n font-stretch: expanded;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_1C_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_1C_0.woff') format('woff');\n font-weight: 200;\n font-style: italic;\n font-stretch: expanded;\n font-display: swap;\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../utilities/globals';\n@import 'colours';\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 {\n font-family: var(--nano-font-family);\n font-weight: var(--nano-font-weight, 500);\n color: $text-color;\n font-size: var(--nano-base-font-size);\n}\n\na {\n color: 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: 500;\n line-height: 1.3;\n margin-block: 0 1.5rem;\n margin-inline: 0;\n\n &__highlight {\n color: map.get($colors, blue);\n }\n\n @media print {\n color: map.get($colors, black);\n }\n\n &--one {\n font-size: 2.5rem;\n\n @include media-breakpoint-up('md') {\n font-size: 3.25rem;\n }\n }\n\n &--two {\n font-size: 1.5rem;\n\n @include media-breakpoint-up('md') {\n font-size: 2rem;\n }\n }\n\n &--three {\n font-size: 1.125rem;\n\n @include 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:list';\n\n@import '../utilities/colours';\n\n$colors: (\n white: #fff,\n lightblue: #90c6e7,\n blue: darken(#0084a9, 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: color-contrast($primary),\n shade: get-color-shade($primary),\n tint: get-color-tint($primary),\n ),\n secondary: (\n base: $secondary,\n contrast: color-contrast($secondary),\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary),\n ),\n tertiary: (\n base: $tertiary,\n contrast: color-contrast($tertiary),\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary),\n ),\n success: (\n base: $success,\n contrast: color-contrast($tertiary),\n shade: get-color-shade($success),\n tint: get-color-tint($success),\n ),\n warning: (\n base: $warning,\n contrast: color-contrast($warning),\n shade: get-color-shade($warning),\n tint: get-color-tint($warning),\n ),\n danger: (\n base: $danger,\n contrast: color-contrast($danger),\n shade: get-color-shade($danger),\n tint: get-color-tint($danger),\n ),\n light: (\n base: $light,\n contrast: color-contrast($light),\n shade: get-color-shade($light),\n tint: get-color-tint($light),\n ),\n medium: (\n base: $medium,\n contrast: color-contrast($medium),\n shade: get-color-shade($medium),\n tint: get-color-tint($medium),\n ),\n dark: (\n base: $dark,\n contrast: color-contrast($dark),\n shade: get-color-shade($dark),\n tint: 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: 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: 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","@use 'sass:map';\n@use 'sass:list';\n\n@import './colours';\n@import './button';\n\n.button {\n @include button-base;\n}\n\n.button--primary {\n @include button-standard(\n #{nano-color(primary, base)},\n #{nano-color(primary, contrast)},\n #{nano-color(primary, shade)}\n );\n}\n\n.button--secondary {\n @include button-standard(\n map.get($colors, green),\n map.get($colors, white),\n map.get($colors, green--darker)\n );\n}\n\n.button--light {\n @include button-standard(\n map.get($colors, white),\n map.get($colors, blue),\n map.get($colors, white),\n map.get($colors, darkblue)\n );\n}\n\n.button--danger {\n @include button-standard(map.get($colors, red), map.get($colors, white), map.get($colors, red--darker));\n}\n\n.button--warning {\n @include button-standard(map.get($colors, orange), map.get($colors, white), map.get($colors, orange--darker));\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($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","@import '../utilities/css-patterns/patterns';\n@import './layers';\n@import './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: calc(#{$btn-padding-top} - #{$btn-border-width}) 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 unstyled-input($outline: true);\n @include 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: #{$layer-shadow-medium};\n display: inline-block;\n border-radius: #{$btn-border-radius};\n line-height: #{$btn-line-height};\n font-weight: 500;\n cursor: pointer;\n background: rgba(0, 0, 0, 0.02);\n\n @media print {\n display: none;\n }\n\n &:focus,\n &.button--focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n\n nano-icon,\n nano-spinner {\n --base-color-rgb: 255, 255, 255;\n\n margin-inline-start: 0.5em;\n margin-inline-end: 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-start: 0;\n margin-inline-end: 0.5em;\n }\n }\n\n &:hover:not(&--disabled) {\n box-shadow: #{$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 'sass:list';\n\n@import '../utilities/globals';\n@import 'helvetica-now';\n@import 'colours';\n@import 'typography';\n@import 'buttons';\n@import 'form';\n\n@each $color-name, $value in $themes {\n .nano-color-#{$color-name} {\n @include generate-color($color-name);\n }\n}\n\n:root {\n --nano-base-font-size: 16px;\n\n @include media-breakpoint-down('sm') {\n --nano-base-font-size: 14px;\n }\n\n --nano-padding: 1rem;\n --nano-font-family:\n 'HelveticaNow',\n 'Helvetica Neue',\n helvetica,\n arial,\n 'Lucida Grande',\n sans-serif;\n\n @each $key, $value in $colors {\n #{'--nano-color-' + $key}: #{$value};\n // nice!\n #{'--nano-color-' + $key + '-rgb'}: #{color-to-rgb-list($value)};\n }\n}\n\nbody {\n background-color: $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($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: $control-focus-style;\n border-radius: 3px;\n }\n}\n","@use 'sass:math';\n\n@import 'mixins';\n\n$dark-text-default: #000 !default;\n$light-text-default: #fff !default;\n\n@function current-color($variation, $alpha: null) {\n @if $alpha==null {\n @return var(--nano-color-#{$variation});\n }\n\n @else {\n @return rgba(var(--nano-color-#{$variation}-rgb), #{$alpha});\n }\n}\n\n// Mixes a color with black to create its shade.\n// --------------------------------------------------------------------------------------------\n@function get-color-shade($color) {\n @return mix(#000, $color, 15%);\n}\n\n// Mixes a color with white to create its tint.\n// --------------------------------------------------------------------------------------------\n@function get-color-tint($color) {\n @return mix(#fff, $color, 15%);\n}\n\n// Converts a color to a comma separated hsl.\n// --------------------------------------------------------------------------------------------\n@function color-to-hsl-list($color) {\n @return #{hue($color)}, #{saturation($color)}, #{lightness($color)};\n}\n\n// Converts a color to a comma separated rgb.\n// --------------------------------------------------------------------------------------------\n@function color-to-rgb-list($color) {\n @return #{red($color)}, #{green($color)}, #{blue($color)};\n}\n\n// Calculeate brightness of a given color.\n@function brightness($color) {\n @return math.div((red($color) 0.299) + (green($color) * 0.587) + (blue($color) * 0.114), 255) * 100%;\n}\n\n// Compares contrast of a given color to the light/dark arguments and returns whichever is most \"contrasty\"\n@function color-contrast(\n $color,\n $dark: $dark-text-default,\n $light: $light-text-default\n) {\n @if $color==null {\n @return null;\n }\n\n @else {\n $color-brightness: brightness($color);\n $light-text-brightness: brightness($light);\n $dark-text-brightness: brightness($dark);\n\n @return if(\n abs($color-brightness - $light-text-brightness) >\n abs($color-brightness - $dark-text-brightness),\n $light,\n $dark\n );\n }\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: color-to-rgb-list($value);\n\n @return rgba(var(#{$variable}-rgb, $value), $alpha);\n }\n\n @if ($rgb) {\n $value: 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 #{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 #{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 #{color-to-rgb-list($tint)}\n )\n #{$important};\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import 'colours';\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($colors, white);\n$df-input-background-color--invalid: white;\n\n$df-input-text-color: $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($colors, lightgrey);\n$df-input-border--focus-color: map.get($colors, lightblue);\n$df-input-border--invalid-color: map.get($colors, lightgrey);\n$df-input-border--invalid-focus-color: map.get($colors, red);\n\n$df-clear-btn-color: rgba(0, 0, 0, 0.3);\n$df-clear-btn-color--invalid: lighten(map.get($colors, red), 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: darken(map.get($colors, mediumgrey), 3%);\n\n$df-input-tag-bg: 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($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($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(--nano-select-opt-bg, darken(map.get($colors, blue--faded), 5%));\n$select-opt-selected: var(--nano-select-opt-bg, map.get($colors, blue--faded));\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../src/global/style/base/display.scss","../src/global/style/utilities/_mixins.scss","../src/global/style/base/normalize.scss","../src/global/style/base/structure.scss","../src/global/style/base/padding.scss","../src/global/style/nano-theme/_base.scss","../src/global/style/nano-theme/_helvetica-now.scss","../src/global/style/nano-theme/typography.scss","../src/global/style/nano-theme/_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/_button.scss","../src/global/style/nano-theme/theme.scss","../src/global/style/utilities/_colours.scss","../src/global/style/nano-theme/_form.scss"],"names":[],"mappings":"AAMA,WACE,wBAUE,cACE,wBAOF,gBACE,wBCqFF,yBD9FA,iBACE,yBC8IF,yBDvIA,mBACE,yBCqFF,yBD9FA,iBACE,yBC8IF,yBDvIA,mBACE,yBCqFF,yBD9FA,iBACE,yBC8IF,yBDvIA,mBACE,yBCqFF,0BD9FA,iBACE,yBC8IF,0BDvIA,mBACE,yBEpBN,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,0BAIF,qNAkBE,0BAGF,6BAEE,oBAGF,OACE,SACA,gBACA,oBACA,mBACA,qBACA,cACA,oBACA,eACA,0BAGF,WACE,eAIF,kDAGE,eAIF,iDAEE,UACA,SAMF,uCAEE,UACA,sBAMF,4FAEE,gBAMF,+FAEE,wBAOF,MACE,yBACA,iBAGF,MAEE,UCrNF,EACE,sBACA,0CACA,0CACA,2BAGF,6BAIE,iDAGF,qBAGE,sBACA,oBAGF,KACE,iBACA,sBAGF,KF8BE,kCACA,mCE5BA,SACA,UACA,kCCxBF,iBACE,mBACA,iBACA,iBACA,oBAEA,UAGF,cACE,kDACA,gDACA,gDACA,mDAEA,QCrBe,iCDwBjB,kBACE,gDAEA,oBC3Be,iCD8BjB,oBACE,kDAEA,qBCjCe,iCDoCjB,kBACE,gDAEA,mBCvCe,iCD0CjB,qBACE,mDAEA,kBC7Ce,iCDgDjB,uBACE,gDACA,mDAEA,cCpDe,iCDuDjB,yBACE,kDACA,gDAEA,eC3De,iCDiEjB,gBACE,kBACA,gBACA,gBACA,mBAEA,SAGF,aACE,iDACA,+CACA,+CACA,kDAEA,OChFe,iCDmFjB,iBACE,+CAEA,mBCtFe,iCDyFjB,mBACE,iDAEA,oBC5Fe,iCD+FjB,iBACE,+CAEA,kBClGe,iCDqGjB,oBACE,kDAEA,iBCxGe,iCD2GjB,sBACE,+CACA,kDAEA,aC/Ge,iCDkHjB,wBACE,iDACA,+CAEA,cCtHe,iCCiBjB,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAGF,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAGF,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAGF,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAGF,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAGF,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,uBACA,kBAKF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,oBACA,kBAKF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,sBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,sBACA,kBAGF,WACE,2BACA,IACE,8GAEF,gBACA,kBACA,sBACA,kBAGF,WACE,2BACA,IACE,kHAEF,gBACA,kBACA,sBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,sBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,sBACA,kBAGF,WACE,2BACA,IACE,gHAEF,gBACA,kBACA,sBACA,kBCjNF,KACE,oCACA,yCACA,MCsGW,gCDrGX,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,iBNVA,yBMSF,cAII,mBAIJ,cACE,iBNlBA,yBMiBF,cAII,gBAIJ,gBACE,mBN1BA,yBMyBF,gBAII,oBAIJ,eACE,mBAGF,eACE,eAGF,gBACE,gBAGF,gBACE,yBAGF,eACE,kBACA,yBACA,qBACA,iBACA,sBE/JJ,QCHE,UACA,YACA,+BACA,aACA,yBCJA,qBACA,cCgBA,WACE,uHAuDF,qFACA,yFACA,yEACA,qBACA,iDACA,+CACA,gBACA,eACA,2BFvEA,0BACE,SACA,UCTF,4BAEE,qBACA,cC6EF,aHhFF,QGiFI,cAGF,oCAEE,aACA,wHAGF,uCAEE,gCAEA,yBACA,oBACA,yCACA,sBACA,4BACA,qBAIA,6EAEE,sBACA,uBAIJ,qCACE,wEAGF,qDACE,gBAGF,mCAEE,WAEA,+CACE,eHvHN,iBGmCE,iBHjCE,mCGkCF,MHjCE,yCGmCF,6FAEE,iBAPS,yCAQT,MATW,yCAWX,6HACE,iBH1CF,mCG2CE,MH1CF,yCG8CF,uBACE,MH/CA,yCGkDF,iCAnCA,yBACA,iDACA,+CACA,iDACA,6KAkCE,MHtDA,mCGuDA,aHvDA,mCGsBF,8LAGE,gBHnBJ,mBG2BE,iBHzBE,QG0BF,MHzBE,KG2BF,iGAEE,iBAPS,QAQT,MATW,KAWX,iIACE,iBHlCF,QGmCE,MHlCF,KGsCF,yBACE,MHvCA,KG0CF,mCAnCA,yBACA,iDACA,+CACA,iDACA,6KAkCE,MH9CA,QG+CA,aH/CA,QGcF,oMAGE,gBHXJ,eGmBE,iBHjBE,KGkBF,MHjBE,QGmBF,yFAEE,iBAPS,KAQT,MATW,QAWX,yHACE,iBH1BF,KG2BE,MH1BF,QG8BF,qBACE,MH/BA,QGkCF,+BAnCA,yBACA,iDACA,+CACA,iDACA,6KAkCE,MHtCA,KGuCA,aHvCA,KGMF,wLAGE,gBHFJ,gBGUE,iBHTyB,QGUzB,MHVgD,KGYhD,2FAEE,iBAPS,QAQT,MATW,KAWX,2HACE,iBHlBqB,QGmBrB,MHnB4C,KGuBhD,sBACE,MHxB8C,KG2BhD,gCAnCA,yBACA,iDACA,+CACA,iDACA,6KAkCE,MH9BuB,QG+BvB,aH/BuB,QGFzB,2LAGE,gBHEJ,iBGME,iBHLyB,QGMzB,MHNmD,KGQnD,6FAEE,iBAPS,QAQT,MATW,KAWX,6HACE,iBHdqB,QGerB,MHf+C,KGmBnD,uBACE,MHpBiD,KGuBnD,iCAnCA,yBACA,iDACA,+CACA,iDACA,6KAkCE,MH1BuB,QG2BvB,aH3BuB,QGNzB,8LAGE,gBHMJ,kBACE,yBACA,gBACA,0BACA,gBAIE,0MAEE,cACA,gBACA,0BI5CJ,oBC0FA,uDACA,qEAMA,iEAGA,oFAMA,8DACA,4DACA,2ED5GA,sBC0FA,yDACA,wEAMA,mEAGA,sFAMA,gEACA,8DACA,8ED5GA,qBC0FA,wDACA,wEAMA,qEAGA,kFAMA,+DACA,6DACA,6ED5GA,oBC0FA,uDACA,sEAMA,oEAGA,iFAMA,8DACA,4DACA,2ED5GA,oBC0FA,uDACA,sEAMA,iEAGA,oFAMA,8DACA,4DACA,2ED5GA,mBC0FA,sDACA,oEAMA,gEAGA,mFAMA,6DACA,2DACA,yED5GA,kBC0FA,qDACA,qEAMA,kEAGA,+EAMA,4DACA,0DACA,0ED5GA,mBC0FA,sDACA,mEAMA,gEAGA,mFAMA,6DACA,2DACA,0ED5GA,iBC0FA,oDACA,iEAMA,8DAGA,iFAMA,2DACA,yDACA,wEDvGF,MACE,4BAMA,qBACA,oGASE,wBAEA,qCAFA,+BAEA,yCAFA,0BAEA,kCAFA,8BAEA,sCAFA,8BAEA,qCAFA,8BAEA,wCAFA,6BAEA,uCAFA,+BAEA,yCAFA,gCAEA,0CAFA,2BAEA,oCAFA,4BAEA,qCAFA,gCAEA,0CAFA,4BAEA,qCAFA,yBAEA,iCAFA,4BAEA,qCAFA,gCAEA,0CAFA,2BAEA,kCAFA,6BAEA,uCAFA,8BAEA,wCAFA,qCAEA,4CAFA,gCAEA,0CAFA,mCAEA,6CAFA,mCAEA,6CAFA,kCAEA,4CAFA,iCAEA,2CAFA,kCAEA,0CAFA,mCAEA,2CAFA,iCAEA,yCAFA,oCAEA,6CAFA,oCAEA,4CAFA,sCAEA,gDAFA,uCAEA,gDZ6HA,yBYhJJ,MAII,6BAmBJ,KACE,iBL2FiB,sCKxFnB,qCAGE,cACA,eACA,SACA,sCACA,kBACA,gBACA,UAMA,0HACE,aACA,WE0DkB,6GFzDlB","file":"nanopore.css","sourcesContent":["@import '../utilities/globals';\n\n// Display\n// --------------------------------------------------\n// Modifies display of a particular element based on the given classes\n\n.nano-hide {\n display: none !important;\n}\n\n// Adds hidden classes\n@each $breakpoint in map-keys($screen-breakpoints) {\n $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n // Provide `ion-hide-{bp}-up` classes for hiding the element based\n // on the breakpoint\n .nano-hide#{$infix}-up {\n display: none !important;\n }\n }\n\n @include media-breakpoint-down($breakpoint, $screen-breakpoints) {\n // Provide `ion-hide-{bp}-down` classes for hiding the element based\n // on the breakpoint\n .nano-hide#{$infix}-down {\n display: none !important;\n }\n }\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 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: $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: $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: $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: $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 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: $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: $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 #{$root} {\n @content;\n }\n }\n}\n\n@mixin ltr-host($hostCtx: '') {\n $root: #{&};\n\n @at-root :host(#{$hostCtx}:not([dir='rtl'])) {\n #{$root} {\n @content;\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(#{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: nth($coordinates, 1);\n $y: nth($coordinates, 2);\n $z: 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","// ! 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 -webkit-appearance: button; // 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 -webkit-appearance: button;\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 -webkit-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","// Structure\n// --------------------------------------------------\n// Adds structural css to the native html elements\n\n* {\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(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: rgba(201, 224, 253, 0.8);\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 font-smoothing();\n\n margin: 0;\n padding: 0;\n text-rendering: optimizeLegibility;\n}\n","@import '../nano-theme/base';\n@import '../utilities/globals';\n\n// Element Space\n// --------------------------------------------------\n// Creates padding and margin attributes to be used on\n// any element\n\n// Padding\n// --------------------------------------------------\n\n.nano-no-padding {\n --padding-start: 0;\n --padding-end: 0;\n --padding-top: 0;\n --padding-bottom: 0;\n\n padding: 0;\n}\n\n.nano-padding {\n --padding-start: #{$spacing-medium};\n --padding-end: #{$spacing-medium};\n --padding-top: #{$spacing-medium};\n --padding-bottom: #{$spacing-medium};\n\n padding: $spacing-medium;\n}\n\n.nano-padding-top {\n --padding-top: #{$spacing-medium};\n\n padding-block-start: $spacing-medium;\n}\n\n.nano-padding-start {\n --padding-start: #{$spacing-medium};\n\n padding-inline-start: $spacing-medium;\n}\n\n.nano-padding-end {\n --padding-end: #{$spacing-medium};\n\n padding-inline-end: $spacing-medium;\n}\n\n.nano-padding-bottom {\n --padding-bottom: #{$spacing-medium};\n\n padding-block-end: $spacing-medium;\n}\n\n.nano-padding-vertical {\n --padding-top: #{$spacing-medium};\n --padding-bottom: #{$spacing-medium};\n\n padding-block: $spacing-medium;\n}\n\n.nano-padding-horizontal {\n --padding-start: #{$spacing-medium};\n --padding-end: #{$spacing-medium};\n\n padding-inline: $spacing-medium;\n}\n\n// Margin\n// --------------------------------------------------\n\n.nano-no-margin {\n --margin-start: 0;\n --margin-end: 0;\n --margin-top: 0;\n --margin-bottom: 0;\n\n margin: 0;\n}\n\n.nano-margin {\n --margin-start: #{$spacing-medium};\n --margin-end: #{$spacing-medium};\n --margin-top: #{$spacing-medium};\n --margin-bottom: #{$spacing-medium};\n\n margin: $spacing-medium;\n}\n\n.nano-margin-top {\n --margin-top: #{$spacing-medium};\n\n margin-block-start: $spacing-medium;\n}\n\n.nano-margin-start {\n --margin-start: #{$spacing-medium};\n\n margin-inline-start: $spacing-medium;\n}\n\n.nano-margin-end {\n --margin-end: #{$spacing-medium};\n\n margin-inline-end: $spacing-medium;\n}\n\n.nano-margin-bottom {\n --margin-bottom: #{$spacing-medium};\n\n margin-block-end: $spacing-medium;\n}\n\n.nano-margin-vertical {\n --margin-top: #{$spacing-medium};\n --margin-bottom: #{$spacing-medium};\n\n margin-block: $spacing-medium;\n}\n\n.nano-margin-horizontal {\n --margin-start: #{$spacing-medium};\n --margin-end: #{$spacing-medium};\n\n margin-inline: $spacing-medium;\n}\n","// Setup global / theme css variables with default fallbacks\n\n// Padding, Margin\n$spacing-xsmall: var(--nano-spacing-xsmall, 4px);\n$spacing-small: var(--nano-spacing-small, 8px);\n$spacing-medium: var(--nano-spacing-medium, 16px);\n$spacing-large: var(--nano-spacing-large, 20px);\n$spacing-xlarge: var(--nano-spacing-xlarge, 24px);\n\n// Text\n$fontsize-xsmall: var(--nano-fontsize-xsmall, 0.625rem);\n$fontsize-small: var(--nano-fontsize-small, 0.875rem);\n$fontsize-medium: var(--nano-fontsize-medium, 1rem);\n$fontsize-large: var(--nano-fontsize-large, 1.25rem);\n$fontsize-xlarge: var(--nano-fontsize-xlarge, 1.5rem);\n\n// Border radius\n$border-radius-small: var(--nano-border-radius-small, 2px);\n$border-radius-medium: var(--nano-border-radius-medium, 4px);\n$border-radius-large: var(--nano-border-radius-large, 8px);\n$border-radius-xlarge: var(--nano-border-radius-xlarge, 16px);\n\n// Transition\n$transition-xslow: var(--nano-transition-x-slow, 1s);\n$transition-slow: var(--nano-transition-slow, 0.7s);\n$transition-medium: var(--nano-transition-medium, 0.5s);\n$transition-fast: var(--nano-transition-fast, 0.3s);\n$transition-xfast: var(--nano-transition-fast, 0.1s);\n","/\n @license\n * MyFonts Webfont Build ID 3183969,\n 2016-03-09T09:39:13-0500\n \n The fonts listed in this notice are subject to the End User License\n * Agreement(s) entered into by the website owner. All other parties are\n * explicitly restricted from using the Licensed Webfonts(s).\n \n You may obtain a valid license at the URLs below.\n \n \n * License: http://www.myfonts.com/viewlicense?type=web&buildid=3183969\n * Webfonts copyright: Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted © 1988 - 2006 Linotype GmbH,\n www.linotype.com. All rights reserved. This software is the property of Linotype GmbH,\n and may not be repro\n \n © 2016 MyFonts Inc\n/\n\n// Helvetica Now Display\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_1_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_1_0.woff') format('woff');\n font-weight: 400;\n font-style: normal;\n font-stretch: condensed;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_8_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_8_0.woff') format('woff');\n font-weight: 400;\n font-style: italic;\n font-stretch: condensed;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_5_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_5_0.woff') format('woff');\n font-weight: 600;\n font-style: normal;\n font-stretch: condensed;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_2_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_2_0.woff') format('woff');\n font-weight: 600;\n font-style: italic;\n font-stretch: condensed;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_9_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_9_0.woff') format('woff');\n font-weight: 200;\n font-style: normal;\n font-stretch: condensed;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_A_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_A_0.woff') format('woff');\n font-weight: 200;\n font-style: italic;\n font-stretch: condensed;\n font-display: swap;\n}\n\n// Helvetica Now Text\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_21_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_21_0.woff') format('woff');\n font-weight: 400;\n font-style: normal;\n font-stretch: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_28_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_28_0.woff') format('woff');\n font-weight: 400;\n font-style: italic;\n font-stretch: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_25_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_25_0.woff') format('woff');\n font-weight: 600;\n font-style: normal;\n font-stretch: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_22_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_22_0.woff') format('woff');\n font-weight: 600;\n font-style: italic;\n font-stretch: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_29_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_29_0.woff') format('woff');\n font-weight: 200;\n font-style: normal;\n font-stretch: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_2A_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_2A_0.woff') format('woff');\n font-weight: 200;\n font-style: italic;\n font-stretch: normal;\n font-display: swap;\n}\n\n// Helvetica Now Micro\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_16_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_16_0.woff') format('woff');\n font-weight: 600;\n font-style: italic;\n font-stretch: expanded;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_17_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_17_0.woff') format('woff');\n font-weight: 600;\n font-style: normal;\n font-stretch: expanded;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/HVMicro500.woff2') format('woff2'),\n url('../assets/fonts/HVMicro500.woff') format('woff');\n font-weight: 400;\n font-style: normal;\n font-stretch: expanded;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/HVMicro500It.woff2') format('woff2'),\n url('../assets/fonts/HVMicro500It.woff') format('woff');\n font-weight: 400;\n font-style: italic;\n font-stretch: expanded;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_15_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_15_0.woff') format('woff');\n font-weight: 300;\n font-style: normal;\n font-stretch: expanded;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_1B_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_1B_0.woff') format('woff');\n font-weight: 200;\n font-style: normal;\n font-stretch: expanded;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'HelveticaNow';\n src:\n url('../assets/fonts/3AF163_1C_0.woff2') format('woff2'),\n url('../assets/fonts/3AF163_1C_0.woff') format('woff');\n font-weight: 200;\n font-style: italic;\n font-stretch: expanded;\n font-display: swap;\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../utilities/globals';\n@import 'colours';\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 {\n font-family: var(--nano-font-family);\n font-weight: var(--nano-font-weight, 500);\n color: $text-color;\n font-size: var(--nano-base-font-size);\n}\n\na {\n color: 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: 500;\n line-height: 1.3;\n margin-block: 0 1.5rem;\n margin-inline: 0;\n\n &__highlight {\n color: map.get($colors, blue);\n }\n\n @media print {\n color: map.get($colors, black);\n }\n\n &--one {\n font-size: 2.5rem;\n\n @include media-breakpoint-up('md') {\n font-size: 3.25rem;\n }\n }\n\n &--two {\n font-size: 1.5rem;\n\n @include media-breakpoint-up('md') {\n font-size: 2rem;\n }\n }\n\n &--three {\n font-size: 1.125rem;\n\n @include 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:list';\n\n@import '../utilities/colours';\n\n$colors: (\n white: #fff,\n lightblue: #90c6e7,\n blue: darken(#0084a9, 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: color-contrast($primary),\n shade: get-color-shade($primary),\n tint: get-color-tint($primary),\n ),\n secondary: (\n base: $secondary,\n contrast: color-contrast($secondary),\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary),\n ),\n tertiary: (\n base: $tertiary,\n contrast: color-contrast($tertiary),\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary),\n ),\n success: (\n base: $success,\n contrast: color-contrast($tertiary),\n shade: get-color-shade($success),\n tint: get-color-tint($success),\n ),\n warning: (\n base: $warning,\n contrast: color-contrast($warning),\n shade: get-color-shade($warning),\n tint: get-color-tint($warning),\n ),\n danger: (\n base: $danger,\n contrast: color-contrast($danger),\n shade: get-color-shade($danger),\n tint: get-color-tint($danger),\n ),\n light: (\n base: $light,\n contrast: color-contrast($light),\n shade: get-color-shade($light),\n tint: get-color-tint($light),\n ),\n medium: (\n base: $medium,\n contrast: color-contrast($medium),\n shade: get-color-shade($medium),\n tint: get-color-tint($medium),\n ),\n dark: (\n base: $dark,\n contrast: color-contrast($dark),\n shade: get-color-shade($dark),\n tint: 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: 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: 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","@use 'sass:map';\n@use 'sass:list';\n\n@import './colours';\n@import './button';\n\n.button {\n @include button-base;\n}\n\n.button--primary {\n @include button-standard(\n #{nano-color(primary, base)},\n #{nano-color(primary, contrast)},\n #{nano-color(primary, shade)}\n );\n}\n\n.button--secondary {\n @include button-standard(\n map.get($colors, green),\n map.get($colors, white),\n map.get($colors, green--darker)\n );\n}\n\n.button--light {\n @include button-standard(\n map.get($colors, white),\n map.get($colors, blue),\n map.get($colors, white),\n map.get($colors, darkblue)\n );\n}\n\n.button--danger {\n @include button-standard(map.get($colors, red), map.get($colors, white), map.get($colors, red--darker));\n}\n\n.button--warning {\n @include button-standard(map.get($colors, orange), map.get($colors, white), map.get($colors, orange--darker));\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($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","@import '../utilities/css-patterns/patterns';\n@import './layers';\n@import './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: calc(#{$btn-padding-top} - #{$btn-border-width}) 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 unstyled-input($outline: true);\n @include 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: #{$layer-shadow-medium};\n display: inline-block;\n border-radius: #{$btn-border-radius};\n line-height: #{$btn-line-height};\n font-weight: 500;\n cursor: pointer;\n background: rgba(0, 0, 0, 0.02);\n\n @media print {\n display: none;\n }\n\n &:focus,\n &.button--focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n\n nano-icon,\n nano-spinner {\n --base-color-rgb: 255, 255, 255;\n\n margin-inline-start: 0.5em;\n margin-inline-end: 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-start: 0;\n margin-inline-end: 0.5em;\n }\n }\n\n &:hover:not(&--disabled) {\n box-shadow: #{$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 'sass:list';\n\n@import '../utilities/globals';\n@import 'helvetica-now';\n@import 'colours';\n@import 'typography';\n@import 'buttons';\n@import 'form';\n\n@each $color-name, $value in $themes {\n .nano-color-#{$color-name} {\n @include generate-color($color-name);\n }\n}\n\n:root {\n --nano-base-font-size: 16px;\n\n @include media-breakpoint-down('sm') {\n --nano-base-font-size: 14px;\n }\n\n --nano-padding: 1rem;\n --nano-font-family:\n 'HelveticaNow',\n 'Helvetica Neue',\n helvetica,\n arial,\n 'Lucida Grande',\n sans-serif;\n\n @each $key, $value in $colors {\n #{'--nano-color-' + $key}: #{$value};\n // nice!\n #{'--nano-color-' + $key + '-rgb'}: #{color-to-rgb-list($value)};\n }\n}\n\nbody {\n background-color: $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($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: $control-focus-style;\n border-radius: 3px;\n }\n}\n","@use 'sass:math';\n\n@import 'mixins';\n\n$dark-text-default: #000 !default;\n$light-text-default: #fff !default;\n\n@function current-color($variation, $alpha: null) {\n @if $alpha==null {\n @return var(--nano-color-#{$variation});\n }\n\n @else {\n @return rgba(var(--nano-color-#{$variation}-rgb), #{$alpha});\n }\n}\n\n// Mixes a color with black to create its shade.\n// --------------------------------------------------------------------------------------------\n@function get-color-shade($color) {\n @return mix(#000, $color, 15%);\n}\n\n// Mixes a color with white to create its tint.\n// --------------------------------------------------------------------------------------------\n@function get-color-tint($color) {\n @return mix(#fff, $color, 15%);\n}\n\n// Converts a color to a comma separated hsl.\n// --------------------------------------------------------------------------------------------\n@function color-to-hsl-list($color) {\n @return #{hue($color)}, #{saturation($color)}, #{lightness($color)};\n}\n\n// Converts a color to a comma separated rgb.\n// --------------------------------------------------------------------------------------------\n@function color-to-rgb-list($color) {\n @return #{red($color)}, #{green($color)}, #{blue($color)};\n}\n\n// Calculeate brightness of a given color.\n@function brightness($color) {\n @return math.div((red($color) 0.299) + (green($color) * 0.587) + (blue($color) * 0.114), 255) * 100%;\n}\n\n// Compares contrast of a given color to the light/dark arguments and returns whichever is most \"contrasty\"\n@function color-contrast(\n $color,\n $dark: $dark-text-default,\n $light: $light-text-default\n) {\n @if $color==null {\n @return null;\n }\n\n @else {\n $color-brightness: brightness($color);\n $light-text-brightness: brightness($light);\n $dark-text-brightness: brightness($dark);\n\n @return if(\n abs($color-brightness - $light-text-brightness) >\n abs($color-brightness - $dark-text-brightness),\n $light,\n $dark\n );\n }\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: color-to-rgb-list($value);\n\n @return rgba(var(#{$variable}-rgb, $value), $alpha);\n }\n\n @if ($rgb) {\n $value: 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 #{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 #{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 #{color-to-rgb-list($tint)}\n )\n #{$important};\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import 'colours';\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($colors, white);\n$df-input-background-color--invalid: white;\n\n$df-input-text-color: $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($colors, lightgrey);\n$df-input-border--focus-color: map.get($colors, lightblue);\n$df-input-border--invalid-color: map.get($colors, lightgrey);\n$df-input-border--invalid-focus-color: map.get($colors, red);\n\n$df-clear-btn-color: rgba(0, 0, 0, 0.3);\n$df-clear-btn-color--invalid: lighten(map.get($colors, red), 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: darken(map.get($colors, mediumgrey), 3%);\n\n$df-input-tag-bg: 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($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($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(--nano-select-opt-bg, darken(map.get($colors, blue--faded), 5%));\n$select-opt-selected: var(--nano-select-opt-bg, map.get($colors, blue--faded));\n"]}

package/dist/types/components/nav-item/nav-item.d.ts CHANGED Viewed

@@ -22,7 +22,6 @@ export declare class NavItem implements ComponentInterface {
   private hasAnchorEle;
   private secondaryDiv;
   private btn;
-  private didBlur;
   private fromHover;
   private animating;
   private waitHide;
@@ -107,6 +106,7 @@ export declare class NavItem implements ComponentInterface {
    * Internal open watcher
    */
   didOpenChange(): void;
+  handleClose(e: MouseEvent | KeyboardEvent): void;
   private closeSecondary;
   private openSecondary;
   private toggleSecondary;
@@ -116,8 +116,6 @@ export declare class NavItem implements ComponentInterface {
   private handleMouseEnter;
   private handleMouseLeave;
   private handleClick;
-  private foundThisNavEle;
-  private blur;
   componentWillLoad(): void;
   connectedCallback(): void;
   render(): any;

package/docs-json.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-12-05T20:09:00",
+  "timestamp": "2022-12-06T17:05:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.19.4",
@@ -10362,7 +10362,20 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "click",
+          "target": "body",
+          "capture": false,
+          "passive": false
+        },
+        {
+          "event": "keyup",
+          "target": "body",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [],
       "slots": [
         {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "3.3.3",
+  "version": "3.4.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -124,5 +124,5 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "8e38a06ce7c0ffab3a07d61a76ad1e381a0c85ed"
+  "gitHead": "d3dd3984e97348e32a487bf72cbc115d8dd81723"
 }

package/dist/cjs/table.worker-715f9aba.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"table.worker-715f9aba.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/table.worker-70ee9cc5.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"table.worker-70ee9cc5.js","mappings":";;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/nano-components/p-2d0cd874.entry.js DELETED Viewed

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,h as e,i as n,c as s,a as i,g as o}from"./p-1fe12320.js";import{b as a,g as r,c as l}from"./p-845ae77e.js";import{d as c}from"./p-167b9165.js";import{g as h}from"./p-45abbbdd.js";import{g as d}from"./p-74a7fc4f.js";import{c as u}from"./p-7b3638b7.js";import{d as p,a as f}from"./p-9746b0a5.js";import{F as b,a as m}from"./p-77cad8d1.js";const v=class{constructor(e){t(this,e);this.myAccountUser=null;this.userProfileUrl=""}render(){return e("a",{href:this.userProfileUrl,class:"user-profile"},e("div",{class:"left"},e("div",{class:"avatar-container"},e("img",{class:"avatar",src:this.myAccountUser.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&e("img",{class:"logo-small",src:n(`./assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),e("div",{class:"user-details"},e("span",{class:"name"},this.myAccountUser.name),e("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),e("div",{class:"right"},e("div",{class:"chevron-right"},e("nano-icon",{slot:"icon-end",name:"light/chevron-right","aria-label":"navigate to ..."}))))}static get assetsDirs(){return["assets"]}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){padding-inline-start:var(--padding-start);padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){padding-inline-end:var(--padding-end);padding-inline-start:0}:host .link,:host button,:host a{border-block-end:var(--border-bottom);display:flex;align-items:center}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:"currentColor";text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-inline-start:0;padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, "currentColor");min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block-start:calc(var(--padding-top) / 2);padding-inline-end:0;padding-block-end:calc(var(--padding-bottom) / 2);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentColor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{padding-inline-end:var(--padding-end);padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(e){t(this,e);this.nanoClose=s(this,"nanoClose",7);this.nanoOpen=s(this,"nanoOpen",7);this.nanoOpening=s(this,"nanoOpening",7);this.nanoClosing=s(this,"nanoClosing",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7);this.hasSecondarySlot=false;this.hasAnchorEle=false;this.didBlur=false;this.animating=false;this.closeSecondary=async()=>{this.open=false;if(!this.hasSecondarySlot||!this.didOpen)return;this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});const t=await c(this.secondaryDiv,"open",false);this.didOpen=t!=="hidden"};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}this.open=true;if(!this.hasSecondarySlot||this.didOpen)return;this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});const t=await c(this.secondaryDiv,"open",true);this.didOpen=t==="shown"};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=t=>{if(!this.hasAnchorEle)return;const e=t.target.closest("a, button");if(!e)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let t=0;if(a(this.el,".secondary-open.has-secondary").length)t=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),t);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary();else this.el.querySelector("*")?.click()};this.blur=t=>{if(!this.didOpen||this.animating)return;if(!this.closeOnBlur)return;if(t&&t.relatedTarget){if(this.foundThisNavEle(t.relatedTarget))return;if(t.relatedTarget===this.el||t.relatedTarget===this.btn){this.secondaryDiv.focus({preventScroll:true});return}}else if(this.foundThisNavEle(t.target))return;this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur);window.removeEventListener("blur",this.blur);this.didBlur=true;this.open=false;if(!t.relatedTarget)setTimeout((()=>{this.el.focus({preventScroll:true})}),50)};this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){if(!this.fromHover){this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur)}setTimeout((()=>{if(!this.fromHover&&!this.didBlur)this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{this.didBlur=false;if(!this.fromHover){const t=new window.IntersectionObserver((e=>{if(e[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const e=h(this.secondaryDiv,true);if(e[0])e[0].focus();this.btn.addEventListener("focusout",this.blur);this.secondaryDiv.addEventListener("focusout",this.blur);window.addEventListener("blur",this.blur);this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}foundThisNavEle(t){const e=!!t.getRootNode&&t.getRootNode().host;let n=!!e&&e.tagName.toLowerCase()==="nano-nav-item"?e:t.closest("nano-nav-item");n=n===t?t.parentElement.closest("nano-nav-item"):n;if(!n)return false;if(n===this.el)return true;return this.foundThisNavEle(n)}componentWillLoad(){const t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;const e=r(this.el,"a, button")[0];this.hasAnchorEle=!!e;if(e){this.href=e.href?e.href:null;this.btn=e;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}}connectedCallback(){this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}render(){return e(i,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:"menuitem"},e("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&e("a",{part:"ctrl ctrl--anchor",target:this.target,ref:t=>this.btn=t,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&e("button",{part:"ctrl ctrl--button",ref:t=>this.btn=t,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&e("div",{class:"link"},e("slot",{name:"icon-start"}),e("slot",null),e("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&e("div",{class:"secondary-menu",ref:t=>this.secondaryDiv=t,tabindex:"-1"},e("div",{class:"secondary-menu-content",part:"secondary-wrapper"},e("slot",{name:"secondary"})),e("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}get el(){return o(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const y='.sc-nano-select-h{box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-inline-size:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-select{padding-block:0;padding-inline-end:0;padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;transform:translateY(-50%);transform-origin:top left;inset-block-start:50%;transition:all 0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-block-end:var(--padding-bottom);line-height:1;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-block:unset;margin-inline-end:5px;margin-inline-start:0;opacity:0;-webkit-appearance:none;appearance:none;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-block:unset;margin-inline-end:0;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{block-size:1em;position:relative;margin-block:4px var(--padding-bottom);margin-inline:3px 0}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{flex:1 1 30%;min-inline-size:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);inline-size:100%;padding:0 !important;position:relative;flex:1 0 auto;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:flex;align-items:stretch;flex:1;max-inline-size:100%}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-block:0;margin-inline:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:flex;align-items:stretch;inline-size:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-inline:unset;padding-inline-start:var(--padding-start);padding-inline-end:var(--padding-end);font-size:1em;align-items:center;display:flex;block-size:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;inline-size:0;-webkit-appearance:none;appearance:none;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-block:0;padding-inline:var(--padding-start) var(--padding-end);opacity:1;inline-size:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding:unset;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;padding-block-start:1.4em}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-block:var(--padding-top) var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{padding-block-start:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;inset-inline-start:0;inset-block-start:0}.select__mask.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);pointer-events:none;line-height:2.5em;min-height:2.5em}.select__multi-wrap.sc-nano-select{padding-block:0 var(--padding-bottom);padding-inline:0 0;display:flex;flex:1;flex-wrap:wrap;overflow:hidden;align-items:flex-start}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{padding-block-start:1em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-bottom) 0;min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;flex:0;position:relative;box-sizing:border-box;line-height:calc(2.5em - var(--padding-bottom));height:calc(2.5em - var(--padding-bottom))}.select__multi-input.sc-nano-select:last-child{flex:1}.select__multi-value.sc-nano-select{margin-block:var(--padding-bottom) 0;margin-inline:var(--padding-start) -3px;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.35em 0.5em;max-width:100%;display:flex;align-items:center;font-size:var(--input-font-size);letter-spacing:1px;max-height:calc(2.5em - 8px)}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1}.select__multi-value-remove.sc-nano-select{background-position:center;padding-inline-start:0.5em;margin:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;display:flex;align-items:center;inset-block-start:0;font-size:1em}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + var(--padding-start) * 2))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(21%);inset-block-start:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}';let w=0;const x=class{constructor(e){t(this,e);this.nanoChange=s(this,"nanoChange",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7);this.nanoDidLoad=s(this,"nanoDidLoad",7);this.nanoDidUnload=s(this,"nanoDidUnload",7);this.nanoSearchChange=s(this,"nanoSearchChange",7);this.nanoValidate=s(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${w++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError)return;this.nativeSelect.setCustomValidity("");if(this.required&&!this.valArray.length){this.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(this.valArray.length&&!this.allowCustomValues&&!this.isValidValues()){this.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(this.max&&this.valArray.length>this.max){this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);return true}if(this.min&&this.valArray.length<this.min){this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);return true}return false};this.showInlineValidation=t=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.showErrorMsg=false;this.errorMessage="";if(!this.nativeSelect.validity.valid){this.errorMessage=this.nativeSelect.validationMessage;this._invalid=true;this.showErrorMsg=true}this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:t})};this.handleInvalid=t=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)t.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(t)))};this.setValue=t=>{t.preventDefault();if(!this.multiple){this.value=t.detail.value;return}if(this.value&&this.value.length&&this.value.includes(t.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),t.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=t=>{if(!this.multiple||!this.value.length)return;if(!t)t=this.value[this.value.length-1];this.value=this.value.filter((e=>e!==t));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((t=>{const{value:e,selected:n,label:s,filterMeta:i}=t;return{value:e,selected:n,label:s,filterMeta:i}}));this.customValidate()};this.handleDocumentKeyDown=t=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let e;switch(t.key){case"Backspace":if(this.inputCtrl.previousElementSibling)e=this.inputCtrl.previousElementSibling;else break;this.removeValue(e.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)e=this.inputCtrl.nextElementSibling;else break;this.removeValue(e.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(t.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(t.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);t.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=t=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const e=new window.Event("change");this.inputCtrl.dispatchEvent(e)};this.onClick=()=>{this.setFocus()};this.onDragStart=t=>{const e=t.target;this.dragVal=e.dataset.value};this.onDragEnd=t=>{this.dragVal=null;t.preventDefault()};this.onDragLeave=t=>{const e=t.target;const n=e.dataset&&e.dataset.value?e.dataset.value:null;if(!n||this.dragVal===n||!this.value.includes(this.dragVal)){t.preventDefault();return}const s=this.value.indexOf(n);const i=this.value.indexOf(this.dragVal);const o=this.value;const a=o[s];o[s]=o[i];o[i]=a;this.value=[...o]};this.onMultiInput=t=>{this.inputSearchVal=t.target.value.trim();this.nanoSearchChange.emit({value:t.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.showInlineValidation=p(this.showInlineValidation,50)}get inputCtrl(){return this._inputCtrl}set inputCtrl(t){if(t===this._inputCtrl)return;this._inputCtrl=t;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(t){if(this._selectWrap===t)return;this._selectWrap=t;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(t){if(this._datalist===t)return;this._datalist=t;this.setDataListOpts()}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}get value(){return this._value}set value(t){if(typeof t==="string"){if(this.multiple)this._value=t.split(",");else this._value=t}else if(Array.isArray(t)){if(this.multiple)this._value=t;else this._value=t[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((t=>{const{value:e,selected:n,label:s,filterMeta:i}=t;return{value:e,selected:n,label:s,filterMeta:i}}))}set options(t){this._options=t.map((t=>{if(typeof t==="string")return{value:t,label:t};else return t}))}debounceChanged(){this.nanoSearchChange=f(this.nanoSearchChange,this.debounce)}shouldValidate(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}valueChanged(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig={...t,...this.dropDownConfig,tetherTo:this.selectWrap}}async reportValidity(t){return new Promise((e=>{if(t){this.customValidate();this.showInlineValidation()}setTimeout((()=>{e({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(t){if(this.nativeSelect){this.customError=t;this.nativeSelect.setCustomValidity(t);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((t=>this.options.find((e=>e.value===t))))}slotChangeObserver(){const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getLabel(t){const e=this.options.find((e=>!e.disabled&&e.value?.length&&e.value===t));return e&&e.label?e.label:t}onReset(t){const e=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!e||t.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(t){if(!this.hasFocus)return;const e=t;let n;requestAnimationFrame((()=>{if(e.key){if(e.key!=="Tab")return;n=d()}else n=t.target;if(l(this.el.tagName.toLowerCase(),n)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const t=this.selectId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const s=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const o=(({el:t,floatLabel:e,label:n,errorMessage:s,showInlineError:i,hasHelperSlot:o,hasHelperEndSlot:a,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:t,floatLabel:e,label:n,errorMessage:s,showInlineError:i,hasHelperSlot:o,hasHelperEndSlot:a,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const a={...o,labelId:t,moreId:n,helperEndId:s,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId};const r=(({readonly:t,disabled:e})=>({readonly:t,disabled:e,clearControl:this.clearSelect}))(this);return e(i,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:{...u(this.color),"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask}},e(b,{...a},e(m,{...r,onClearText:this.clearSelectValue,control:this.el,ref:t=>this.selectWrap=t,endValueSlot:e("slot",{name:"down-arrow"},e("nano-icon",{slot:"value-end",name:"light/chevron-down"}))},this.multiple&&e("div",{class:"select__multi-wrap select"},this.multipleValues(t,n,s)),!this.multiple&&[this.mask&&e("div",{class:"select__mask"},this.getLabel(this.value)),e("input",{id:this.selectId,class:"select__native-input",ref:t=>this.inputCtrl=t,"aria-labelledby":t+" "+n+" "+s,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&e("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:t=>this.datalist=t,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:t=>{t.preventDefault();this.removeValue(t.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&e("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},e("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),e("slot",null)),e("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n+" "+s,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((t=>e("option",{value:t,selected:true},t))),!this.allowCustomValues&&this.options.map((t=>e("option",{value:t.value,selected:this.valArray.includes(t.value),disabled:t.disabled,label:t.label},this.valArray.includes(t.value))))))}multipleValues(t,n,s){const i=e("input",{class:"select__multi-input",id:this.selectId,ref:t=>this.inputCtrl=t,readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.value.length?this.placeholder:"","aria-labelledby":t+" "+n+" "+s});if(!this.value.length)return i;return this.value.map(((t,n)=>{let s=e("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:t=>t.preventDefault(),draggable:true,"data-value":t,ref:t=>this.valueItems.push(t),class:"select__multi-value"},e("span",null,this.getLabel(t)),e("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(t)},onMouseUp:()=>{this.removeValue(t)}},e("nano-icon",{name:"light/times"})));if(n===0&&this.currInsertIndex<0)s=[i,s];else if(n===this.currInsertIndex)s=[s,i];return s}))}get el(){return o(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};x.style=y;export{v as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
-//# sourceMappingURL=p-2d0cd874.entry.js.map