@nationalarchives/frontend 0.2.7 → 0.2.8

package/nationalarchives/components/tabs/tabs.mjs

@@ -5,7 +5,7 @@ export class Tabs {
     this.$tabListItemLinks =
       $module &&
       this.$tabList &&
-      $module.querySelectorAll(".tna-tabs__list-item-link");
+      this.$tabList.querySelectorAll(".tna-tabs__button");
     this.$tabItems = $module && $module.querySelectorAll(".tna-tabs__item");
 
     if (
@@ -18,197 +18,115 @@ export class Tabs {
       return;
     }
 
-    this.sticky = this.$module.classList.contains("tna-tabs--sticky");
-
-    const startingTarget = window.location.hash.replace(/^#/, "");
-    const doesStartingTargetExist = [...this.$tabItems].some(
-      ($tabItem) => $tabItem.getAttribute("id") === startingTarget,
-    );
-
-    this.$newTabList = document.createElement("div");
-    this.$newTabList.setAttribute("role", "tablist");
-    this.$newTabList.setAttribute("class", this.$tabList.getAttribute("class"));
-
-    this.$tabItems.forEach(($tabItem, index) => {
-      $tabItem.setAttribute("role", "tabpanel");
-      $tabItem.setAttribute(
-        "aria-labelledby",
-        `${$tabItem.getAttribute("id")}-tab`,
-      );
-      $tabItem.setAttribute("tabindex", "0");
-      if (
-        (doesStartingTargetExist &&
-          $tabItem.getAttribute("id") !== startingTarget) ||
-        (!doesStartingTargetExist && index > 0)
-      ) {
-        $tabItem.setAttribute("hidden", true);
-      }
-    });
+    this.currentTabIndex = 0;
+    this.init();
+  }
 
+  init() {
+    this.$module.classList.add("tna-tabs--interactive");
+    this.$tabList.removeAttribute("hidden");
     this.$tabListItemLinks.forEach(($tabListItemLink) => {
-      const $replacementButton = document.createElement("button");
-      $replacementButton.innerText = $tabListItemLink.innerText;
-      $replacementButton.setAttribute(
-        "class",
-        $tabListItemLink.getAttribute("class"),
-      );
-      $replacementButton.setAttribute("role", "tab");
-      $replacementButton.setAttribute(
-        "id",
-        $tabListItemLink.getAttribute("id"),
-      );
-      $replacementButton.setAttribute(
-        "aria-controls",
-        $tabListItemLink.getAttribute("href")?.replace(/^#/, ""),
-      );
-      $replacementButton.setAttribute("tabindex", "-1");
-      this.$newTabList.appendChild($replacementButton);
-    });
-
-    this.$tabList.replaceWith(this.$newTabList);
-
-    this.$tabListItemLinks = this.$module.querySelectorAll(
-      ".tna-tabs__list-item-link",
-    );
-
-    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {
-      if (
-        (startingTarget &&
-          $tabListItemLink.getAttribute("aria-controls") ===
-            `${startingTarget}`) ||
-        (!startingTarget && index === 0)
-      ) {
-        $tabListItemLink.classList.add("tna-tabs__list-item-link--selected");
-        $tabListItemLink.setAttribute("aria-selected", true);
-        $tabListItemLink.setAttribute("tabindex", "0");
-      } else {
-        $tabListItemLink.setAttribute("aria-selected", false);
-      }
-
-      $tabListItemLink.addEventListener(
-        "keydown",
-        (e) => this.handleItemLinkKeyDown(e),
-        true,
-      );
+      const tabPanelID = $tabListItemLink.getAttribute("aria-controls");
+      $tabListItemLink.setAttribute("aria-selected", false);
+      const $tabPanel = document.getElementById(tabPanelID);
+      $tabPanel.setAttribute("aria-labelledby", $tabListItemLink.id);
+      $tabPanel.setAttribute("role", "tabpanel");
       $tabListItemLink.addEventListener(
         "click",
         (e) => this.handleItemLinkClick(e),
         true,
       );
     });
+    this.switchTabByIndex(this.currentTabIndex);
+    this.$module.addEventListener("keydown", (e) =>
+      this.handleItemLinkKeyDown(e),
+    );
   }
 
   handleItemLinkClick(itemLinkClickEvent) {
     itemLinkClickEvent.preventDefault();
     const targetItem =
       itemLinkClickEvent.currentTarget.getAttribute("aria-controls");
-
-    this.switchTab(targetItem);
+    this.switchTabByID(targetItem);
   }
 
   handleItemLinkKeyDown(itemLinkKeyDownEvent) {
-    const targetItem = itemLinkKeyDownEvent.currentTarget;
-    let overwriteKeyAction = false;
-
+    let preventDefaultKeyAction = false;
     switch (itemLinkKeyDownEvent.key) {
       case "ArrowLeft":
       case "ArrowUp":
-        this.setSelectedToPreviousTab(targetItem);
-        overwriteKeyAction = true;
+        this.previousTab();
+        preventDefaultKeyAction = true;
         break;
-
       case "ArrowRight":
       case "ArrowDown":
-        this.setSelectedToNextTab(targetItem);
-        overwriteKeyAction = true;
+        this.nextTab();
+        preventDefaultKeyAction = true;
         break;
-
       case "Home":
-        this.switchTab(this.$tabListItemLinks[0].getAttribute("aria-controls"));
-        overwriteKeyAction = true;
+        this.switchTabByIndex(0, true);
+        preventDefaultKeyAction = true;
         break;
-
       case "End":
-        this.switchTab(
-          this.$tabListItemLinks[
-            this.$tabListItemLinks.length - 1
-          ].getAttribute("aria-controls"),
-        );
-        overwriteKeyAction = true;
+        this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);
+        preventDefaultKeyAction = true;
         break;
-
       default:
         break;
     }
-
-    if (overwriteKeyAction) {
+    if (preventDefaultKeyAction) {
       itemLinkKeyDownEvent.stopPropagation();
       itemLinkKeyDownEvent.preventDefault();
     }
   }
 
-  setSelectedToNextTab(targetItem) {
-    const currentIndex = [...this.$tabListItemLinks].findIndex(
-      ($tabListItemLink) =>
-        $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
-    );
-    let newIndex;
-    if (currentIndex < this.$tabListItemLinks.length - 1) {
-      newIndex = currentIndex + 1;
+  nextTab() {
+    if (this.currentTabIndex < this.$tabListItemLinks.length - 1) {
+      this.switchTabByIndex(this.currentTabIndex + 1, true);
     } else {
-      newIndex = 0;
+      this.switchTabByIndex(0, true);
     }
-    this.switchTab(
-      this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
-    );
   }
 
-  setSelectedToPreviousTab(targetItem) {
-    const currentIndex = [...this.$tabListItemLinks].findIndex(
-      ($tabListItemLink) =>
-        $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
-    );
-    let newIndex;
-    if (currentIndex >= 1) {
-      newIndex = currentIndex - 1;
+  previousTab() {
+    if (this.currentTabIndex >= 1) {
+      this.switchTabByIndex(this.currentTabIndex - 1, true);
     } else {
-      newIndex = this.$tabListItemLinks.length - 1;
+      this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);
     }
-    this.switchTab(
-      this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
-    );
   }
 
-  switchTab(targetId) {
-    this.$tabListItemLinks.forEach(($tabListItemLink) => {
-      if ($tabListItemLink.getAttribute("aria-controls") === targetId) {
-        $tabListItemLink.classList.add("tna-tabs__list-item-link--selected");
+  switchTabByIndex(newIndex, switchFocus = false) {
+    this.currentTabIndex = newIndex;
+
+    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {
+      if (index === this.currentTabIndex) {
         $tabListItemLink.setAttribute("aria-selected", true);
         $tabListItemLink.setAttribute("tabindex", "0");
-        $tabListItemLink.focus();
+        if (switchFocus) {
+          $tabListItemLink.focus();
+        }
       } else {
-        $tabListItemLink.classList.remove("tna-tabs__list-item-link--selected");
         $tabListItemLink.setAttribute("aria-selected", false);
         $tabListItemLink.setAttribute("tabindex", "-1");
       }
     });
 
-    this.$tabItems.forEach(($tabItem) => {
-      if ($tabItem.getAttribute("id") === targetId) {
+    this.$tabItems.forEach(($tabItem, index) => {
+      if (index === this.currentTabIndex) {
         $tabItem.removeAttribute("hidden");
         $tabItem.setAttribute("tabindex", "0");
       } else {
-        $tabItem.setAttribute("hidden", true);
+        $tabItem.setAttribute("hidden", "until-found");
         $tabItem.setAttribute("tabindex", "-1");
       }
     });
+  }
 
-    if (this.sticky) {
-      if (history.replaceState) {
-        history.replaceState(null, null, `#${targetId}`);
-      } else {
-        location.hash = `#${targetId}`;
-      }
-    }
+  switchTabByID(targetId) {
+    const index = Array.from(this.$tabItems).findIndex(
+      ($tabItem) => $tabItem.getAttribute("id") === targetId,
+    );
+    this.switchTabByIndex(index);
   }
 }

package/nationalarchives/components/tabs/tabs.scss

@@ -1,3 +1,6 @@
+@use "../../variables/a11y" as a11yVariables;
+@use "../../variables/borders";
+@use "../../tools/a11y";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -7,135 +10,147 @@
   @include spacing.space-above;
 
   &__list {
-    margin: 0 0 spacing.space(1);
+    margin: 0;
     padding: 0;
 
     display: flex;
     flex-wrap: nowrap;
     align-items: stretch;
-    gap: spacing.space(1);
+    gap: spacing.space(0.5);
+
+    position: relative;
+    z-index: 2;
 
     list-style: none;
   }
 
-  &__list-item {
+  &--small &__list {
+    gap: spacing.space(0.25);
   }
 
-  &__list-item-link {
-    padding: spacing.space(0.5) 0;
-
-    display: flex;
+  &__list-item {
+  }
 
-    align-items: center;
+  &__button {
+    padding: borders.$thick-border-width 0;
 
     position: relative;
 
     text-align: center;
-    text-decoration: none;
 
     background: transparent;
 
     border: none;
 
     cursor: pointer;
+  }
 
-    @include typography.font-size(20);
-    @include typography.heading-font;
+  &--interactive &__button {
+    background: transparent;
 
-    &,
-    &:link,
-    &:visited {
-      @include colour.colour-font("font-dark");
-    }
+    border: 1px transparent solid;
+    border-bottom: none;
+  }
+
+  &--interactive &__button[aria-selected="true"] {
+    padding-top: 0;
+
+    @include colour.colour-border("keyline");
 
     &::after {
       content: "";
 
+      height: 1px;
+
       position: absolute;
+      top: 100%;
       right: 0;
-      bottom: 0;
       left: 0;
+
+      @include colour.colour-background("background");
     }
+  }
 
-    &:hover,
-    &--selected,
-    &--selected:hover {
-      text-decoration: none;
+  &__button-inner {
+    padding: spacing.space(0.5) spacing.space(0.75);
 
-      &::after {
-        @include colour.thick-keyline-dark(top);
-      }
-    }
+    display: block;
 
-    .tna-template--js-enabled & {
-      @include colour.colour-font("font-light");
+    text-decoration: underline;
 
-      &:hover {
-        &::after {
-          @include colour.thick-keyline(top);
-        }
-      }
+    @include colour.colour-font("font-dark");
+  }
 
-      &--selected {
-        @include colour.colour-font("font-dark");
+  &--small &__button-inner {
+    padding: spacing.space(0.25) spacing.space(0.5) spacing.space(0.125);
 
-        &::after,
-        &:hover::after {
-          @include colour.thick-keyline-dark(top);
-        }
-      }
-    }
+    @include typography.font-size(16);
   }
 
-  &__items {
-    // &:not(:target-within) {
-    //   .tna-tabs__item:first-child {
-    //     display: block;
-    //   }
-    // }
+  &__button:hover &__button-inner {
+    @include typography.interacted-text-decoration;
   }
 
-  &__item {
-    display: none;
+  &__button[aria-selected="true"] &__button-inner {
+    text-decoration: none;
 
-    &:first-child {
-      display: block;
-    }
+    @include colour.thick-keyline-accent(top);
+  }
 
-    &:has(~ :target) {
-      display: none;
-    }
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: spacing.space(2);
 
-    &:target {
-      display: block;
-    }
+    position: relative;
+    z-index: 1;
+  }
 
-    .tna-template--js-enabled & {
-      display: block;
+  &__item {
+    border-radius: 0.1px;
+    @include a11y.no-focus-outline-on-click;
 
-      &[hidden] {
-        display: none;
-      }
+    &:focus {
+      outline-offset: -#{a11yVariables.$focus-outline-width};
     }
+  }
 
-    .tna-template--clicked &:focus {
-      outline: none;
-    }
+  &--interactive &__item {
+    padding: spacing.space(1);
+    @include colour.colour-border("keyline", 1px, solid);
   }
 
-  @include colour.on-high-contrast-and-forced-colours {
-    &__list {
-      @include colour.colour-border("keyline-dark", 1px, solid, bottom);
-    }
+  &--tint#{&}--interactive &__button[aria-selected="true"],
+  &--tint#{&}--interactive &__button:hover &__button-inner,
+  &--tint#{&}--interactive &__items {
+    @include colour.tint;
   }
 
-  // @include colour.on-forced-colours {
-  //   &__list-item-link {
-  //     &--selected {
-  //       padding-bottom: spacing.space(0.125);
+  // &--contrast#{&}--interactive &__button[aria-selected="true"],
+  // &--contrast#{&}--interactive &__button:hover &__button-inner,
+  // &--contrast#{&}--interactive &__items {
+  //   @include colour.contrast;
+  // }
+
+  // &--accent#{&}--interactive &__button[aria-selected="true"],
+  // &--accent#{&}--interactive &__button:hover &__button-inner,
+  // &--accent#{&}--interactive &__items {
+  //   @include colour.accent;
+  // }
 
-  //       border-bottom-width: 0.375rem;
-  //     }
-  //   }
+  // &--contrast &__list,
+  // &--contrast &__button,
+  // &--contrast &__item,
+  // &--accent &__list,
+  // &--accent &__button,
+  // &--accent &__item {
+  //   border: none;
   // }
+
+  @include colour.on-forced-colours {
+    // &__button,
+    // &__item {
+    //   @include colour.colour-border("keyline", 1px, solid);
+    // }
+  }
 }

package/nationalarchives/components/tabs/template.njk

@@ -4,16 +4,23 @@
 {%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
 <div class="tna-tabs{% if classes %} {{ classes }}{% endif %}" data-module="tna-tabs"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
-  <ul class="tna-tabs__list">
+  <ul class="tna-tabs__list" role="tablist" hidden>
   {%- for item in params.items %}
     <li class="tna-tabs__list-item">
-      <a href="#{{ item.id }}" class="tna-tabs__list-item-link" id="{{ item.id }}-tab">{{ item.title }}</a>
+      <button type="button" class="tna-tabs__button" id="{{ item.id }}-tab" aria-controls="{{ item.id }}" role="tab">
+        <span class="tna-tabs__button-inner">
+          {{ item.title }}
+        </span>
+      </button>
     </li>
   {%- endfor %}
   </ul>
   <div class="tna-tabs__items">
   {%- for item in params.items %}
     <section id="{{ item.id }}" class="tna-tabs__item">
+      <h{{ params.itemHeadingLevel }} class="tna-tabs__heading tna-heading-m">
+        {{ item.title }}
+      </h{{ params.itemHeadingLevel }}>
       {{ item.body | safe }}
     </section>
   {%- endfor %}

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":"AA6KA,gBAhKM,oxDAmKJ,+BAHF,gBAhJM,8vDCzBN,gBACE,WACA,cAEA,cACA,sBDyCA,4CCrCA,iBDyCA,6DA0BI,mDC9DJ,mBAEA,wCDiEI,+CC7DJ,oBACE,eAGF,mBACE,gBAGF,mBACE,gBAGF,mBACE,gBAGF,oBACE","file":"text-input.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline-dark\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"accent-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid\n    );\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width\n      #{brand-colour($brandColour)}\n      solid;\n  } @else {\n    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  @include colour-css-vars(\"form-error-border\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error-border\");\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n  --accent-list-marker: var(--accent-border);\n  // --accent-list-marker: var(--font-base);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n    --accent-list-marker: var(--accent-border);\n    // --accent-list-marker: var(--font-base);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n  --accent-list-marker: var(--accent-font-base);\n  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n  --accent-border: var(--font-base);\n  --accent-list-marker: var(--font-base);\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"pink\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"orange\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"green\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"blue\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n\n.tna-text-input {\n  width: 100%;\n  padding: 0 spacing.space(0.375);\n\n  display: block;\n  box-sizing: border-box;\n\n  @include colour.always-light;\n  @include colour.colour-font(\"input-foreground\");\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-border\");\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":"AAsLA,gBAxKM,oxDA2KJ,+BAHF,gBAxJM,8vDC1BN,gBACE,WACA,cAEA,cACA,sBD0CA,4CCtCA,iBD0CA,6DA0BI,mDC/DJ,mBAEA,wCDkEI,+CC9DJ,oBACE,eAGF,mBACE,gBAGF,mBACE,gBAGF,mBACE,gBAGF,oBACE","file":"text-input.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline-dark\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"accent-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid\n    );\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width\n      #{brand-colour($brandColour)}\n      solid;\n  } @else {\n    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width transparent solid;\n  } @else {\n    border: borders.$thick-border-width transparent solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  @include colour-css-vars(\"form-error-border\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error-border\");\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n  --accent-list-marker: var(--accent-border);\n  // --accent-list-marker: var(--font-base);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n    --accent-list-marker: var(--accent-border);\n    // --accent-list-marker: var(--font-base);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n  --accent-list-marker: var(--accent-font-base);\n  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n  --accent-border: var(--font-base);\n  --accent-list-marker: var(--font-base);\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"pink\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"orange\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"green\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"blue\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n\n@mixin image-loader-background {\n  @if not features.$disable-image-loader-animations {\n    background: linear-gradient(\n      -45deg,\n      rgba(0 0 0 / 25%),\n      rgba(255 255 255 / 25%),\n      rgba(0 0 0 / 25%)\n    );\n    background-size: 500% 500%;\n    background-position: 0 50%;\n\n    animation: image-loader-background ease-in-out 1.2s infinite;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n\n.tna-text-input {\n  width: 100%;\n  padding: 0 spacing.space(0.375);\n\n  display: block;\n  box-sizing: border-box;\n\n  @include colour.always-light;\n  @include colour.colour-font(\"input-foreground\");\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-border\");\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"]}