@nationalarchives/frontend 0.1.42 → 0.1.44

package/nationalarchives/components/search-filters/search-filters.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/search-filters/search-filters.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAIA,oBACE,gBAEA,gCACE,aCKF,4BACE,cAGF,mCACE,SACA,UAGF,8BACE,YAGF,4BACE,WAGF,oEAEE,qBCgGE,oCAIA,gCDjGF,sBAGF,mCACE,gBACA,qBAGF,iCACE,WACA,SACA,qBAEA,cAEA,kBAEA,cACA,oBACA,kBACA,oBACA,oBACA,mBAEA,gBAEA,eAEA,yCACE,QACA,SAEA,kBACA,YACA,gCC2DA,qCAIA,8CDzDA,uCACA,sBACA,sCAEA,WAGF,+EE9BF,0BACA,0BC3CsC,MH4ElC,gBAIA,6DACE,mBACA,oCAQN,sCACE,cE5FF,YCKiB,IDTjB,mBFsGA,0BACE,eCdF,yBAEA,wCAgCI,oCAIA,gCDnBF,uBAGF,0BACE,oBEhHF,eDoFA,sBACA,wBDiCA,mCACE,aACA,eACA,eAGF,2BACE,cAGF,4BACE,eAEA,aCRE,oCAIA,gCDSJ,2DACE,mBAGF,4DACE,cAGF,0DACE,mBAGF,iEACE,aAGF,4EACE,iBAEA","file":"search-filters.css","sourcesContent":["@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n  margin-top: 2rem;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above {\n  @extend %space-above;\n}\n\n@function space($size) {\n  @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n  @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{$amount} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{$amount} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{$amount} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{$amount} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{$amount} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{$amount} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-search-filters {\n  @include spacing.space-above;\n\n  &__title {\n  }\n\n  &__update {\n    display: block;\n  }\n\n  .tna-heading-s {\n    margin: 0;\n    padding: 0;\n  }\n\n  &__fieldset {\n    border: none;\n  }\n\n  &__legend {\n    width: 100%;\n  }\n\n  &__heading-inner,\n  &__item-toggle {\n    padding: 0.5rem 0.75rem;\n\n    @include colour.colour-border(\"keyline\", 1px, solid);\n    border-bottom-width: 0;\n  }\n\n  &__heading-inner {\n    margin-top: 1rem;\n    padding: 0.5rem 0.75rem;\n  }\n\n  &__item-toggle {\n    width: 100%;\n    margin: 0;\n    padding-right: 2.5rem;\n\n    display: block;\n\n    position: relative;\n\n    color: inherit;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n    text-align: inherit;\n\n    background: none;\n\n    cursor: pointer;\n\n    &::before {\n      width: 0;\n      height: 0;\n\n      position: absolute;\n      right: 0.5rem;\n      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);\n\n      @include colour.colour-border(\n        \"font-base\",\n        #{math.div(math.sqrt(3), 2)}rem\n      );\n      border-right: 0.5rem transparent solid;\n      border-bottom-width: 0;\n      border-left: 0.5rem transparent solid;\n\n      content: \"\";\n    }\n\n    &:hover,\n    &:active {\n      @include typography.interacted-text-decoration;\n\n      background: none;\n    }\n\n    &[aria-expanded=\"true\"] {\n      &::before {\n        border-top-width: 0;\n        border-bottom-width: #{math.div(math.sqrt(3), 2)}rem;\n      }\n    }\n  }\n\n  &__item-toggle-label {\n  }\n\n  &__item-toggle-info {\n    display: block;\n\n    @include typography.main-font-weight;\n    @include typography.relative-font-size(14);\n  }\n\n  &__item {\n    padding: 0.75rem;\n\n    @include colour.colour-background(\"background-tint\");\n\n    @include colour.colour-border(\"keyline\", 1px);\n    border-width: 0 1px 1px;\n  }\n\n  &__hint {\n    margin-bottom: 0.5rem;\n\n    @include typography.relative-font-size(16);\n    @include colour.colour-font(\"font-light\");\n  }\n\n  &__inline-fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem 2rem;\n  }\n\n  &__label {\n    display: block;\n  }\n\n  &__footer {\n    padding: 0.75rem;\n\n    display: none;\n\n    @include colour.colour-border(\"keyline\", 1px);\n  }\n\n  &--js-enabled &__title {\n    margin-bottom: 1rem;\n  }\n\n  &--js-enabled &__footer {\n    display: block;\n  }\n\n  &--js-enabled &__item {\n    border-bottom: none;\n  }\n\n  &--js-enabled &__update-item {\n    display: none;\n  }\n\n  &__fieldset[data-type=\"multiple\"] &__item {\n    max-height: 15rem;\n\n    overflow: auto;\n  }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/search-filters/search-filters.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAIA,oBACE,gBAEA,gCACE,aCKF,4BACE,cAGF,mCACE,SACA,UAGF,8BACE,YAGF,4BACE,WAGF,oEAEE,qBCoGE,oCAIA,gCDrGF,sBAGF,mCACE,gBACA,qBAGF,iCACE,WACA,SACA,qBAEA,cAEA,kBAEA,cACA,oBACA,kBACA,oBACA,oBACA,mBAEA,gBAEA,eAEA,yCACE,QACA,SAEA,kBACA,YACA,gCC+DA,qCAIA,8CD7DA,uCACA,sBACA,sCAEA,WAGF,+EE9BF,0BACA,0BC3CsC,MH4ElC,gBAIA,6DACE,mBACA,oCAQN,sCACE,cE5FF,YCKiB,IDTjB,mBFsGA,0BACE,eCdF,yBAEA,wCAoCI,oCAIA,gCDvBF,uBAGF,0BACE,oBEhHF,eDoFA,sBACA,wBDiCA,mCACE,aACA,eACA,eAGF,2BACE,cAGF,4BACE,eAEA,aCJE,oCAIA,gCDKJ,2DACE,mBAGF,4DACE,cAGF,0DACE,mBAGF,iEACE,aAGF,4EACE,iBAEA","file":"search-filters.css","sourcesContent":["@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n  margin-top: 2rem;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n%space-only-above {\n  margin: 2rem 0 0;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above($zero-other-margins: false) {\n  @if $zero-other-margins {\n    @extend %space-only-above;\n  } @else {\n    @extend %space-above;\n  }\n}\n\n@function space($size) {\n  @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n  @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{$amount} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{$amount} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{$amount} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{$amount} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{$amount} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{$amount} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-search-filters {\n  @include spacing.space-above;\n\n  &__title {\n  }\n\n  &__update {\n    display: block;\n  }\n\n  .tna-heading-s {\n    margin: 0;\n    padding: 0;\n  }\n\n  &__fieldset {\n    border: none;\n  }\n\n  &__legend {\n    width: 100%;\n  }\n\n  &__heading-inner,\n  &__item-toggle {\n    padding: 0.5rem 0.75rem;\n\n    @include colour.colour-border(\"keyline\", 1px, solid);\n    border-bottom-width: 0;\n  }\n\n  &__heading-inner {\n    margin-top: 1rem;\n    padding: 0.5rem 0.75rem;\n  }\n\n  &__item-toggle {\n    width: 100%;\n    margin: 0;\n    padding-right: 2.5rem;\n\n    display: block;\n\n    position: relative;\n\n    color: inherit;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n    text-align: inherit;\n\n    background: none;\n\n    cursor: pointer;\n\n    &::before {\n      width: 0;\n      height: 0;\n\n      position: absolute;\n      right: 0.5rem;\n      top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);\n\n      @include colour.colour-border(\n        \"font-base\",\n        #{math.div(math.sqrt(3), 2)}rem\n      );\n      border-right: 0.5rem transparent solid;\n      border-bottom-width: 0;\n      border-left: 0.5rem transparent solid;\n\n      content: \"\";\n    }\n\n    &:hover,\n    &:active {\n      @include typography.interacted-text-decoration;\n\n      background: none;\n    }\n\n    &[aria-expanded=\"true\"] {\n      &::before {\n        border-top-width: 0;\n        border-bottom-width: #{math.div(math.sqrt(3), 2)}rem;\n      }\n    }\n  }\n\n  &__item-toggle-label {\n  }\n\n  &__item-toggle-info {\n    display: block;\n\n    @include typography.main-font-weight;\n    @include typography.relative-font-size(14);\n  }\n\n  &__item {\n    padding: 0.75rem;\n\n    @include colour.colour-background(\"background-tint\");\n\n    @include colour.colour-border(\"keyline\", 1px);\n    border-width: 0 1px 1px;\n  }\n\n  &__hint {\n    margin-bottom: 0.5rem;\n\n    @include typography.relative-font-size(16);\n    @include colour.colour-font(\"font-light\");\n  }\n\n  &__inline-fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem 2rem;\n  }\n\n  &__label {\n    display: block;\n  }\n\n  &__footer {\n    padding: 0.75rem;\n\n    display: none;\n\n    @include colour.colour-border(\"keyline\", 1px);\n  }\n\n  &--js-enabled &__title {\n    margin-bottom: 1rem;\n  }\n\n  &--js-enabled &__footer {\n    display: block;\n  }\n\n  &--js-enabled &__item {\n    border-bottom: none;\n  }\n\n  &--js-enabled &__update-item {\n    display: none;\n  }\n\n  &__fieldset[data-type=\"multiple\"] &__item {\n    max-height: 15rem;\n\n    overflow: auto;\n  }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n"]}

package/nationalarchives/components/select/select.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/select/select.scss"],"names":[],"mappings":"AAiKA,YArJM,ygDAwJJ,+BAHF,YArIM,48CA4IJ,+CA5II,28CCzBN,YACE,eACA,wBACA,uBAEA,cDiFA,WACA,8BC9EA,kBACA,iBDiFA,sBAEA,yCAgCI,sBAIA,qCClHJ,mBAEA,oBACE,0BAEA,gBAEA,+lBACA,uCACA,8BACA,4BAGF,oCDuGI,kBAEA,+BCrGJ,eACE,YAGF,eACE,YAGF,eACE,YAGF,gBACE","file":"select.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n\n.tna-select {\n  max-width: 100%;\n  height: calc(2rem + 6px);\n  padding: 0 1rem 0 0.5rem;\n\n  display: block;\n\n  @include colour.light;\n  @include colour.colour-font(\"input-foreground\");\n  font-size: inherit;\n  line-height: 2rem;\n\n  @include colour.colour-background(\"input-background\");\n\n  @include colour.colour-border(\"input-border\", forms.$form-field-border-width);\n  border-radius: 0.1px;\n\n  &--styled {\n    padding: 0 2.5rem 0 0.75rem;\n\n    appearance: none;\n\n    background-image: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAwIDUwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSIyNTAsNDAwIDUwLDEwMCA0NTAsMTAwIiBmaWxsPSIjMDAwIi8+PC9zdmc+\");\n    background-position: center right 0.5rem;\n    background-size: 0.75rem 0.75rem;\n    background-repeat: no-repeat;\n  }\n\n  .tna-form__group--error & {\n    @include colour.colour-border(\"form-error\");\n  }\n\n  &--s {\n    width: 10rem;\n  }\n\n  &--m {\n    width: 20rem;\n  }\n\n  &--l {\n    width: 40rem;\n  }\n\n  &--xl {\n    width: 80rem;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/select/select.scss"],"names":[],"mappings":"AAyLA,YA7KM,ygDAgLJ,+BAHF,YA7JM,48CAoKJ,+CApKI,28CCzBN,YACE,eACA,wBACA,uBAEA,cDiFA,WACA,8BC9EA,kBACA,iBDiFA,sBAEA,yCAoCI,sBAIA,qCCtHJ,mBAEA,oBACE,0BAEA,gBAEA,+lBACA,uCACA,8BACA,4BAGF,oCD2GI,kBAEA,+BCzGJ,eACE,YAGF,eACE,YAGF,eACE,YAGF,gBACE","file":"select.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n\n.tna-select {\n  max-width: 100%;\n  height: calc(2rem + 6px);\n  padding: 0 1rem 0 0.5rem;\n\n  display: block;\n\n  @include colour.light;\n  @include colour.colour-font(\"input-foreground\");\n  font-size: inherit;\n  line-height: 2rem;\n\n  @include colour.colour-background(\"input-background\");\n\n  @include colour.colour-border(\"input-border\", forms.$form-field-border-width);\n  border-radius: 0.1px;\n\n  &--styled {\n    padding: 0 2.5rem 0 0.75rem;\n\n    appearance: none;\n\n    background-image: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAwIDUwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSIyNTAsNDAwIDUwLDEwMCA0NTAsMTAwIiBmaWxsPSIjMDAwIi8+PC9zdmc+\");\n    background-position: center right 0.5rem;\n    background-size: 0.75rem 0.75rem;\n    background-repeat: no-repeat;\n  }\n\n  .tna-form__group--error & {\n    @include colour.colour-border(\"form-error\");\n  }\n\n  &--s {\n    width: 10rem;\n  }\n\n  &--m {\n    width: 20rem;\n  }\n\n  &--l {\n    width: 40rem;\n  }\n\n  &--xl {\n    width: 80rem;\n  }\n}\n"]}

package/nationalarchives/components/sensitive-image/fixtures.json

@@ -13,7 +13,7 @@
         "warning": "This is a gory photo",
         "action": "Show me the gory photo"
       },
-      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\"><p class=\"tna-sensitive-image__warning\">This is a gory photo</p><details class=\"tna-sensitive-image__details\"><summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary><div class=\"tna-sensitive-image__container\"><img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" /></div></details></div>"
+      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\"><p class=\"tna-sensitive-image__warning\">This is a gory photo</p><details class=\"tna-sensitive-image__details\"><summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary><div class=\"tna-sensitive-image__container\"><img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\"></div></details></div>"
     },
     {
       "name": "with classes",
@@ -28,7 +28,7 @@
         "action": "Show me the gory photo",
         "classes": "sensitive-image__test-class"
       },
-      "html": "<div class=\"tna-sensitive-image sensitive-image__test-class\" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\"><p class=\"tna-sensitive-image__warning\">This is a gory photo</p><details class=\"tna-sensitive-image__details\"><summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary><div class=\"tna-sensitive-image__container\"><img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" /></div></details></div>"
+      "html": "<div class=\"tna-sensitive-image sensitive-image__test-class\" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\"><p class=\"tna-sensitive-image__warning\">This is a gory photo</p><details class=\"tna-sensitive-image__details\"><summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary><div class=\"tna-sensitive-image__container\"><img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\"></div></details></div>"
     },
     {
       "name": "with attributes",
@@ -45,7 +45,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\" data-testattribute=\"foobar\"><p class=\"tna-sensitive-image__warning\">This is a gory photo</p><details class=\"tna-sensitive-image__details\"><summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary><div class=\"tna-sensitive-image__container\"><img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" /></div></details></div>"
+      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\" data-testattribute=\"foobar\"><p class=\"tna-sensitive-image__warning\">This is a gory photo</p><details class=\"tna-sensitive-image__details\"><summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary><div class=\"tna-sensitive-image__container\"><img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\"></div></details></div>"
     }
   ]
 }

package/nationalarchives/components/sensitive-image/template.njk

@@ -4,7 +4,7 @@
   <details class="tna-sensitive-image__details">
     <summary class="tna-sensitive-image__show" data-action="{{ params.action }}">{{ params.action }}</summary>
     <div class="tna-sensitive-image__container">
-      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-sensitive-image__image" />
+      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-sensitive-image__image">
     </div>
   </details>
 </div>

package/nationalarchives/components/skip-link/skip-link.css

@@ -1 +1 @@
-.tna-skip-link{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;display:block !important;position:absolute !important;left:-100vw;overflow:hidden !important;white-space:nowrap !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important}.tna-skip-link,.tna-skip-link:link,.tna-skip-link:visited{color:#fff !important;color:var(--button-text) !important}.tna-skip-link:focus{background-color:#000 !important;background-color:var(--button-background) !important;border:.3125rem #00b0ff solid !important;border:.3125rem var(--focus-outline) solid !important;outline:none !important}.tna-skip-link:active,.tna-skip-link:focus{width:auto !important;height:auto !important;margin:inherit !important;padding:1rem !important;position:static !important;overflow:visible !important;white-space:inherit !important;clip:auto !important;-webkit-clip-path:none !important;clip-path:none !important}.tna-skip-link:active:hover,.tna-skip-link:focus:hover{color:#000 !important;color:var(--button-hover-text) !important;background-color:#fff !important;background-color:var(--button-hover-background) !important}/*# sourceMappingURL=skip-link.css.map */
+.tna-skip-link{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;display:block !important;position:absolute !important;left:-100vw;overflow:hidden !important;white-space:nowrap !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important}.tna-skip-link,.tna-skip-link:link,.tna-skip-link:visited{color:#fff !important;color:var(--button-text) !important}.tna-skip-link:focus{background-color:#000 !important;background-color:var(--button-background) !important;border:5px #00b0ff solid !important;border:5px var(--focus-outline) solid !important;outline:none !important}.tna-skip-link:active,.tna-skip-link:focus{width:auto !important;height:auto !important;margin:inherit !important;padding:1rem !important;position:static !important;overflow:visible !important;white-space:inherit !important;clip:auto !important;-webkit-clip-path:none !important;clip-path:none !important}.tna-skip-link:active:hover,.tna-skip-link:focus:hover{color:#000 !important;color:var(--button-hover-text) !important;background-color:#fff !important;background-color:var(--button-hover-background) !important}/*# sourceMappingURL=skip-link.css.map */

package/nationalarchives/components/skip-link/skip-link.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/skip-link/skip-link.scss","../../../../src/nationalarchives/tools/_colour.scss"],"names":[],"mappings":"AAEA,eACE,qBACA,sBACA,oBACA,qBAEA,yBAEA,6BACA,YAEA,2BAEA,8BAEA,8BACA,wCACA,gCAEA,0DCoEA,sBACA,oCD/DA,qBCmEA,iCAEA,qDAgCI,yCAIA,sDDpGF,wBAGF,2CAEE,sBACA,uBACA,0BACA,wBAEA,2BAEA,4BAEA,+BAEA,qBACA,kCACA,0BAEA,uDCqCF,sBACA,0CAIA,iCAEA","file":"skip-link.css","sourcesContent":["@use \"../../tools/colour\";\n\n.tna-skip-link {\n  width: 1px !important;\n  height: 1px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n\n  display: block !important;\n\n  position: absolute !important;\n  left: -100vw;\n\n  overflow: hidden !important;\n\n  white-space: nowrap !important;\n\n  clip: rect(0 0 0 0) !important;\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n\n  &,\n  &:link,\n  &:visited {\n    @include colour.colour-font(\"button-text\", $important: true);\n  }\n\n  &:focus {\n    @include colour.colour-background(\"button-background\", $important: true);\n\n    @include colour.colour-border(\"focus-outline\", 0.3125rem, $important: true);\n\n    outline: none !important;\n  }\n\n  &:active,\n  &:focus {\n    width: auto !important;\n    height: auto !important;\n    margin: inherit !important;\n    padding: 1rem !important;\n\n    position: static !important;\n\n    overflow: visible !important;\n\n    white-space: inherit !important;\n\n    clip: auto !important;\n    -webkit-clip-path: none !important;\n    clip-path: none !important;\n\n    &:hover {\n      @include colour.colour-font(\"button-hover-text\", $important: true);\n\n      @include colour.colour-background(\n        \"button-hover-background\",\n        $important: true\n      );\n    }\n  }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/skip-link/skip-link.scss","../../../../src/nationalarchives/tools/_colour.scss"],"names":[],"mappings":"AAEA,eACE,qBACA,sBACA,oBACA,qBAEA,yBAEA,6BACA,YAEA,2BAEA,8BAEA,8BACA,wCACA,gCAEA,0DCoEA,sBACA,oCD/DA,qBCmEA,iCAEA,qDAoCI,oCAIA,iDDxGF,wBAGF,2CAEE,sBACA,uBACA,0BACA,wBAEA,2BAEA,4BAEA,+BAEA,qBACA,kCACA,0BAEA,uDCqCF,sBACA,0CAIA,iCAEA","file":"skip-link.css","sourcesContent":["@use \"../../tools/colour\";\n\n.tna-skip-link {\n  width: 1px !important;\n  height: 1px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n\n  display: block !important;\n\n  position: absolute !important;\n  left: -100vw;\n\n  overflow: hidden !important;\n\n  white-space: nowrap !important;\n\n  clip: rect(0 0 0 0) !important;\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n\n  &,\n  &:link,\n  &:visited {\n    @include colour.colour-font(\"button-text\", $important: true);\n  }\n\n  &:focus {\n    @include colour.colour-background(\"button-background\", $important: true);\n\n    @include colour.colour-border(\"focus-outline\", 5px, $important: true);\n\n    outline: none !important;\n  }\n\n  &:active,\n  &:focus {\n    width: auto !important;\n    height: auto !important;\n    margin: inherit !important;\n    padding: 1rem !important;\n\n    position: static !important;\n\n    overflow: visible !important;\n\n    white-space: inherit !important;\n\n    clip: auto !important;\n    -webkit-clip-path: none !important;\n    clip-path: none !important;\n\n    &:hover {\n      @include colour.colour-font(\"button-hover-text\", $important: true);\n\n      @include colour.colour-background(\n        \"button-hover-background\",\n        $important: true\n      );\n    }\n  }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n"]}

package/nationalarchives/components/skip-link/skip-link.scss

@@ -28,7 +28,7 @@
   &:focus {
     @include colour.colour-background("button-background", $important: true);
 
-    @include colour.colour-border("focus-outline", 0.3125rem, $important: true);
+    @include colour.colour-border("focus-outline", 5px, $important: true);
 
     outline: none !important;
   }

package/nationalarchives/components/skip-link/skip-link.stories.js

@@ -25,7 +25,7 @@ const Template = ({ text, href, classes, attributes }) =>
   ${SkipLink({
     params: { text, href, classes, attributes },
   })}
-  <main id="main-content" role="main">
+  <main class="tna-main" id="main-content">
     <h1>Main content</h1>
   </main>`;
 

package/nationalarchives/components/tabs/tabs.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/tabs/tabs.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAIA,UACE,gBAEA,sBACE,6BCCA,gBACA,UAEA,aACA,oBACA,SACA,iBAEA,gBAMF,0BACE,gBAEA,aAEA,mBACA,kBCxBF,kBAwBA,YCZoB,gDDapB,YCZoB,IFelB,qBACA,kBAEA,yBAEA,YAEA,eAEA,2FG+CF,WACA,uBH1CE,iCACE,SAEA,kBACA,QACA,SACA,OGwCJ,yBAEA,qCHtCI,WAGF,8GAGE,qBAEA,mIACE,cAIJ,oDGkBF,sBACA,wBHfM,iEACE,eGkBR,iCAEA,mCHdI,8DGOJ,WACA,uBHLM,gJAEE,cGOR,yBAEA,qCHOA,gBACE,aAEA,4BACE,cAGF,8BACE,aAGF,uBACE,cAGF,0CACE,cAEA,kDACE,aAIJ,6CACE,aGsPJ,8BHjPE,gBGvBE,gCAIA,6CHmBF,mDGvBE,gCAIA,4CA6PF,+BH1OA,4CGvBE,gCAIA,6CAoQJ,8BH1OI,oCACE,uBAEA,6BI7EN,aJmFE,gBACE,aAGF,gBACE,yBAEA,gCACE","file":"tabs.css","sourcesContent":["@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n  margin-top: 2rem;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above {\n  @extend %space-above;\n}\n\n@function space($size) {\n  @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n  @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{$amount} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{$amount} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{$amount} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{$amount} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{$amount} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{$amount} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-tabs {\n  @include spacing.space-above;\n\n  &__list {\n    margin: 0 0 1rem;\n    padding: 0;\n\n    display: flex;\n    align-items: stretch;\n    gap: 1rem;\n    flex-wrap: nowrap;\n\n    list-style: none;\n  }\n\n  &__list-item {\n  }\n\n  &__list-item-link {\n    padding: 0.5rem 0;\n\n    display: flex;\n\n    align-items: center;\n    position: relative;\n\n    @include typography.relative-font-size(20);\n    @include typography.heading-font;\n    text-decoration: none;\n    text-align: center;\n\n    background: transparent;\n\n    border: none;\n\n    cursor: pointer;\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-dark\");\n    }\n\n    &::after {\n      height: 0;\n\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      left: 0;\n\n      @include colour.colour-background(\"keyline-dark\");\n\n      content: \"\";\n    }\n\n    &:hover,\n    &--selected,\n    &--selected:hover {\n      text-decoration: none;\n\n      &::after {\n        height: 0.25rem;\n      }\n    }\n\n    .tna-template--js-enabled & {\n      @include colour.colour-font(\"font-light\");\n\n      &:hover {\n        &::after {\n          height: 0.125rem;\n\n          @include colour.colour-background(\"font-light\");\n        }\n      }\n\n      &--selected {\n        @include colour.colour-font(\"font-dark\");\n\n        &::after,\n        &:hover::after {\n          height: 0.25rem;\n\n          @include colour.colour-background(\"keyline-dark\");\n        }\n      }\n    }\n  }\n\n  &__items {\n    // &:not(:target-within) {\n    //   .tna-tabs__item:first-child {\n    //     display: block;\n    //   }\n    // }\n  }\n\n  &__item {\n    display: none;\n\n    &:first-child {\n      display: block;\n    }\n\n    &:has(~ :target) {\n      display: none;\n    }\n\n    &:target {\n      display: block;\n    }\n\n    .tna-template--js-enabled & {\n      display: block;\n\n      &[hidden] {\n        display: none;\n      }\n    }\n\n    .tna-template--clicked &:focus {\n      outline: none;\n    }\n  }\n\n  @include colour.on-high-contrast-and-forced-colours {\n    &__list {\n      @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n    }\n  }\n\n  @include colour.on-forced-colours {\n    &__list-item-link {\n      &--selected {\n        padding-bottom: 0.125rem;\n\n        border-bottom-width: 0.375rem;\n      }\n    }\n  }\n\n  @include media.on-print {\n    &__list {\n      display: none;\n    }\n\n    &__item {\n      display: block !important;\n\n      & + & {\n        margin-top: 2rem;\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/tabs/tabs.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAIA,UACE,gBAEA,sBACE,6BCCA,gBACA,UAEA,aACA,oBACA,SACA,iBAEA,gBAMF,0BACE,gBAEA,aAEA,mBACA,kBCxBF,kBAwBA,YCZoB,gDDapB,YCZoB,IFelB,qBACA,kBAEA,yBAEA,YAEA,eAEA,2FG+CF,WACA,uBH1CE,iCACE,SAEA,kBACA,QACA,SACA,OGwCJ,yBAEA,qCHtCI,WAGF,8GAGE,qBAEA,mIACE,cAIJ,oDGkBF,sBACA,wBHfM,iEACE,eGkBR,iCAEA,mCHdI,8DGOJ,WACA,uBHLM,gJAEE,cGOR,yBAEA,qCHOA,gBACE,aAEA,4BACE,cAGF,8BACE,aAGF,uBACE,cAGF,0CACE,cAEA,kDACE,aAIJ,6CACE,aG8QJ,8BHzQE,gBGnBE,gCAIA,6CHeF,mDGnBE,gCAIA,4CAiRF,+BHlQA,4CGnBE,gCAIA,6CAwRJ,8BHlQI,oCACE,uBAEA,6BI7EN,aJmFE,gBACE,aAGF,gBACE,yBAEA,gCACE","file":"tabs.css","sourcesContent":["@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n  margin-top: 2rem;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n%space-only-above {\n  margin: 2rem 0 0;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above($zero-other-margins: false) {\n  @if $zero-other-margins {\n    @extend %space-only-above;\n  } @else {\n    @extend %space-above;\n  }\n}\n\n@function space($size) {\n  @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n  @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{$amount} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{$amount} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{$amount} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{$amount} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{$amount} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{$amount} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-tabs {\n  @include spacing.space-above;\n\n  &__list {\n    margin: 0 0 1rem;\n    padding: 0;\n\n    display: flex;\n    align-items: stretch;\n    gap: 1rem;\n    flex-wrap: nowrap;\n\n    list-style: none;\n  }\n\n  &__list-item {\n  }\n\n  &__list-item-link {\n    padding: 0.5rem 0;\n\n    display: flex;\n\n    align-items: center;\n    position: relative;\n\n    @include typography.relative-font-size(20);\n    @include typography.heading-font;\n    text-decoration: none;\n    text-align: center;\n\n    background: transparent;\n\n    border: none;\n\n    cursor: pointer;\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-dark\");\n    }\n\n    &::after {\n      height: 0;\n\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      left: 0;\n\n      @include colour.colour-background(\"keyline-dark\");\n\n      content: \"\";\n    }\n\n    &:hover,\n    &--selected,\n    &--selected:hover {\n      text-decoration: none;\n\n      &::after {\n        height: 0.25rem;\n      }\n    }\n\n    .tna-template--js-enabled & {\n      @include colour.colour-font(\"font-light\");\n\n      &:hover {\n        &::after {\n          height: 0.125rem;\n\n          @include colour.colour-background(\"font-light\");\n        }\n      }\n\n      &--selected {\n        @include colour.colour-font(\"font-dark\");\n\n        &::after,\n        &:hover::after {\n          height: 0.25rem;\n\n          @include colour.colour-background(\"keyline-dark\");\n        }\n      }\n    }\n  }\n\n  &__items {\n    // &:not(:target-within) {\n    //   .tna-tabs__item:first-child {\n    //     display: block;\n    //   }\n    // }\n  }\n\n  &__item {\n    display: none;\n\n    &:first-child {\n      display: block;\n    }\n\n    &:has(~ :target) {\n      display: none;\n    }\n\n    &:target {\n      display: block;\n    }\n\n    .tna-template--js-enabled & {\n      display: block;\n\n      &[hidden] {\n        display: none;\n      }\n    }\n\n    .tna-template--clicked &:focus {\n      outline: none;\n    }\n  }\n\n  @include colour.on-high-contrast-and-forced-colours {\n    &__list {\n      @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n    }\n  }\n\n  @include colour.on-forced-colours {\n    &__list-item-link {\n      &--selected {\n        padding-bottom: 0.125rem;\n\n        border-bottom-width: 0.375rem;\n      }\n    }\n  }\n\n  @include media.on-print {\n    &__list {\n      display: none;\n    }\n\n    &__item {\n      display: block !important;\n\n      & + & {\n        margin-top: 2rem;\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}

package/nationalarchives/components/text-input/text-input.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/text-input/text-input.scss"],"names":[],"mappings":"AAiKA,gBArJM,ygDAwJJ,+BAHF,gBArIM,48CA4IJ,mDA5II,28CCzBN,gBACE,WACA,kBAEA,cACA,sBDiFA,WACA,8BC9EA,kBACA,iBDiFA,sBAEA,yCAgCI,sBAIA,qCClHJ,mBAEA,wCDkHI,kBAEA,+BChHJ,oBACE,eAGF,mBACE,gBAGF,mBACE,gBAGF,mBACE,gBAGF,oBACE","file":"text-input.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n\n.tna-text-input {\n  width: 100%;\n  padding: 0 0.375rem;\n\n  display: block;\n  box-sizing: border-box;\n\n  @include colour.light;\n  @include colour.colour-font(\"input-foreground\");\n  font-size: inherit;\n  line-height: 2rem;\n\n  @include colour.colour-background(\"input-background\");\n\n  @include colour.colour-border(\"input-border\", forms.$form-field-border-width);\n  border-radius: 0.1px;\n\n  .tna-form__group--error & {\n    @include colour.colour-border(\"form-error\");\n  }\n\n  &--xs {\n    max-width: 5rem;\n  }\n\n  &--s {\n    max-width: 10rem;\n  }\n\n  &--m {\n    max-width: 20rem;\n  }\n\n  &--l {\n    max-width: 40rem;\n  }\n\n  &--xl {\n    max-width: 80rem;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/text-input/text-input.scss"],"names":[],"mappings":"AAyLA,gBA7KM,ygDAgLJ,+BAHF,gBA7JM,48CAoKJ,mDApKI,28CCzBN,gBACE,WACA,kBAEA,cACA,sBDiFA,WACA,8BC9EA,kBACA,iBDiFA,sBAEA,yCAoCI,sBAIA,qCCtHJ,mBAEA,wCDsHI,kBAEA,+BCpHJ,oBACE,eAGF,mBACE,gBAGF,mBACE,gBAGF,mBACE,gBAGF,oBACE","file":"text-input.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n\n.tna-text-input {\n  width: 100%;\n  padding: 0 0.375rem;\n\n  display: block;\n  box-sizing: border-box;\n\n  @include colour.light;\n  @include colour.colour-font(\"input-foreground\");\n  font-size: inherit;\n  line-height: 2rem;\n\n  @include colour.colour-background(\"input-background\");\n\n  @include colour.colour-border(\"input-border\", forms.$form-field-border-width);\n  border-radius: 0.1px;\n\n  .tna-form__group--error & {\n    @include colour.colour-border(\"form-error\");\n  }\n\n  &--xs {\n    max-width: 5rem;\n  }\n\n  &--s {\n    max-width: 10rem;\n  }\n\n  &--m {\n    max-width: 20rem;\n  }\n\n  &--l {\n    max-width: 40rem;\n  }\n\n  &--xl {\n    max-width: 80rem;\n  }\n}\n"]}